So I recently upgreade native-base and I am using Select on my react native app, however, the Select is not triggered until you click on the dropdown arrow only, if you click anywhere else, it will not triggered the dropdown. any thoughts? Here is my code.
let testTypeOptions = [
{ value: 6, label: 'Maternity Test' },
{ value: 18, label: 'Paternity Test' },
];
<Container style={cocStyle.container}>
<View style={cocStyle.formContainer}>
<Select
selectedValue={examDetail?.testType}
onValueChange={value => handleChange('testType', value)}>
{testTypeOptions.map((test, index) => (
<Select.Item key={index} {...test} />
))}
</Select>
</View>
</Container>
const cocStyle = StyleSheet.create({
container: { paddingTop: 10, width: '60%', alignSelf: 'center' },
formContainer: {
...formStyles.formWrapper,
width: '100%',
flexWrap: 'wrap',
flexDirection: 'row',
},
});
Related
Hello I tried implementing Material UI Autocomplete component to use it as a search input. I used styled function from "#mui/material/styles" and added some custom CSS but when the page first loads you can see the CSS code instead of the actual component for a split second before appearing. Here is a screenshot of the problem:
The source code appears for a split second on the first load of the page before the Autocomplete component appears
Here is the Autocomplete component:
<Autocomplete
value={undefined || autoValue}
freeSolo
id="autocomplete"
autoHighlight={true}
autoSelect={true}
autoComplete={true}
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
disableClearable
// className="w-full"
fullWidth
options={items.map((item: string) => ({
url: item,
title: makeTitle(item),
}))}
getOptionLabel={(option: any) => option.title || ""}
renderOption={(props, option: Item) => {
return (
<li
key={option.url}
className=" hover:bg-slate-200 "
onClick={handleOptionClick}
>
<Link
href={`/calculators/${option.url}`}
className="block p-4 w-full"
>
{makeTitle(option.title)}
</Link>
</li>
);
}}
renderInput={(params) => (
<SearchTextField
{...params}
ref={textInput}
// onChange={(e) => console.log(e.target.value)}
// value="Hello"
variant="outlined"
// onChange={handleChange}
InputProps={{
...params.InputProps,
type: "search",
startAdornment: (
<InputAdornment position="start">
<SearchIcon style={{ color: "white" }} />
</InputAdornment>
),
}}
/>
)}
/>
And here is the CSS:
const SearchTextField = styled(TextField)({
"& .MuiInputBase-root": {
backgroundColor: "rgb(40,80,170)",
"&:hover": {
backgroundColor: "rgb(36,69,159)",
},
"&.Mui-focused": {
backgroundColor: "rgb(36,69,159)",
},
},
// "& .MuiAutocomplete-input": {
// paddingLeft: "10px !important",
// },
"& .MuiInputBase-input": {
backgroundColor: "white",
borderRadius: `90px`,
paddingLeft: "16px !important",
},
"& label.Mui-focused": {
color: "white",
},
"& .MuiInput-underline:after": {
borderBottomColor: "white",
},
"& .MuiOutlinedInput-root": {
borderRadius: `90px`,
"& fieldset": {
borderStyle: "none",
borderRadius: `90px`,
paddingRight: "10px",
},
"&:hover fieldset": {
borderStyle: "none",
borderColor: "white",
},
"&.Mui-focused fieldset": {
borderStyle: "none",
borderColor: "white",
},
},
});
I've never seen CSS source code rendering on the browser tried looking in Material UI forums but could not find anything. It does not look to happen in mobile browsers only desktop.
I have this project and I want to make a sidebar and inside the sidebar there are icons and a word that expresses this icon, the problem is that when I wanted to change the size of the icon in the “useStyles()” it didn’t change its size and I didn’t know why.
How can I solve this problem?
const useStyles = makeStyles((theme) => ({
item: {
display: "flex",
alignItems: "center",
marginBottom: theme.spacing(4),
[theme.breakpoints.up("sm")]: {
marginBottom: theme.spacing(3),
cursor: "pointer",
},
},
icon: {
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]:{
fontSize: "18px"
}
},
text: {
fontWeight: 500,
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
container: {
height: "100vh",
paddingTop: theme.spacing(2),
color: "white",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.up("sm")]:{
backgroundColor: 'white',
color: '#555',
border: '1px solid #ece7e7'
}
},
}));
const LeftBar = () => {
const classes = useStyles();
return (
<Container className={classes.container}>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
</Container>
);
};
export default LeftBar;
If you want a quick fix, give your icon the sx prop and put your desired font size there.
<Home sx={{fontSize:"18px"}}/>
Otherwise make sure that your import statements are correct.
... from "#mui/material/styles"
Usually I use the mui styled for breakpoints, so something like
const IconWrapper = styled("div")(({ theme }) => ({
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
fontSize: 18,
},
}));
Then implement it like
<IconWrapper>
<Home />
</IconWrapper>
I'm having trouble trying to display a list of Views using flex with 100% height, the issue comes when it renders the list from Flat list, I might do something wrong with flex.
This is what I want: A Flat list with same height when scrolls I will go to another component
And this is What I am having a smashed List of all the rendered views
The flatList is just this :
<FlatList
pagingEnabled={true}
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
And the container from the Views I am rendering looks like this (css)
container: {
alignItems: 'center',
// TODO: check how why the screen is forguetting the tab, thats why I put the height like that
width: '100%',
height: '100%',
justifyContent: 'space-around',
flex: 1,
},
Use onLayout to get the height of the parent container and use that to set the height of FlatList items:
Example Output:
Full source code:
//import { List, ListItem } from 'react-native-elements';
import React, { useState } from 'react';
import {
Text,
View,
FlatList,
StyleSheet,
SafeAreaView,
StatusBar,
} from 'react-native';
const attendants = [
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 1,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '09/11/2020',
no: 2,
},
{
courseName: 'comp',
lecturer: 'Akanbi T.B',
students: 'Tunde Ajagba',
date: '10/11/2020',
no: 3,
},
];
const App = () => {
const [data, setData] = useState(attendants);
const [layoutHeight, setHeight] = useState(100);
return (
<View style={styles.container}>
<View style={{ flex: 5 }}>
<FlatList
onLayout={(e) => {
setHeight(e.nativeEvent.layout.height);
console.log(e.nativeEvent.layout.height);
}}
style={{ flexGrow: 1, backgroundColor: 'pink', height: layoutHeight }}
data={data}
keyExtractor={(item) => item.no}
renderItem={({ item }) => (
<View
style={{
height: layoutHeight
}}>
<ListItem
customStyle={{ backgroundColor: 'black' }}
title={`${item.lecturer} ${item.courseName}`}
subtitle={item.students}
/>
</View>
)}
/>
</View>
<View
style={{
flex: 1,
backgroundColor: 'lightgreen',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={[styles.subtitle, { fontSize: 20 }]}>Bottom Bar</Text>
</View>
</View>
);
};
const ListItem = ({ title, subtitle, customStyle }) => {
return (
<View style={styles.listContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 30,
flex: 1,
},
listContainer: {
flex: 1,
backgroundColor: 'teal',
margin: 5,
paddingHorizontal: 5,
borderRadius: 4,
},
subtitle: { fontSize: 12, color: 'rgba(0,0,10,0.5)' },
title: {
fontSize: 14,
color: 'white',
fontWeight: 'bold',
textAlign: 'cetere',
},
});
export default App;
You can find the working app example here: Expo Snack
Flatlist is scrollview with many item inside and ScrollView content will calculator height of children render on it. So any item render on it need set height. height 100% will get height of parent and set for itself so you can not using height of scrollview content (infinity) and set for item inside.
I have a basic chat application and when I open the keyboard I want the Sticky Chat Footer to persist at the top of the keyboard but its still being covered even when I use KeyboardAvoidingView.
Here is the image below:
And here is the image when keyboard is open:
Here is my component code below:
<SafeAreaView style={styles.scrollWrapper}>
<KeyboardAvoidingView
style={styles.scrollWrapper}
behavior="height"
keyboardVerticalOffset={headerHeight + 20}
>
<View style={styles.chatBar}>
<IconButton Icon={ButtonAdd} size={32} onPress={() => {}} />
{isKeyboardVisible ? (
<>
<RoundedInput
ref={inputRef}
itemStyle={styles.chatInput}
placeholder="type something here..."
RightComponent={(
<IconButton
Icon={EmojiIcon}
size={normalize(16.5)}
onPress={() => {}}
/>
)}
/>
<TouchableOpacity
activeOpacity={0.4}
onPress={handleKeyboardVisibility}
>
<Icon
style={styles.icon}
name="send-circle"
size={normalize(34)}
color="#F48C2D"
/>
</TouchableOpacity>
</>
) : (
<>
<IconButton
Icon={KeyboardIcon}
size={32}
onPress={handleKeyboardVisibility}
/>
<IconButton Icon={ChatCamera} size={32} onPress={() => {}} />
<IconButton Icon={GalleryIcon} size={32} onPress={() => {}} />
<IconButton Icon={GifIcon} size={32} onPress={() => {}} />
<IconButton Icon={LocationIcon} size={32} onPress={() => {}} />
</>
)}
</View>
</KeyboardAvoidingView>
</SafeAreaView>
and here is my style
const styles = StyleSheet.create({
header: {
...headerStyles.homeHeaderWrapper,
backgroundColor: '#F9F9F9',
borderBottomColor: '#D0D1D1',
},
scrollWrapper: {
flexGrow: 1,
backgroundColor: 'white',
},
dateWrapper: {
marginTop: normalize(12),
...helpers.center,
},
dateTxt: {
...fontHelper(10, typographyFonts.openSansRegular, '#212121', 0).font,
},
messageWrapper: {
flexDirection: 'row',
padding: normalize(12),
},
image: {
height: normalize(33),
width: normalize(33),
overflow: 'hidden',
borderRadius: 100,
alignSelf: 'center',
marginTop: normalize(12),
},
chatBubble: {
marginLeft: normalize(8),
maxWidth: '75%',
// height: normalize(77),
backgroundColor: '#F2F5F8',
borderRadius: 14,
// ...helpers.center,
padding: normalize(12),
marginVertical: normalize(5),
},
chatMsg: {
...fontHelper(13, typographyFonts.openSansRegular, '#212121', 0).font,
},
chatBar: {
height: normalize(65),
shadowOffset: { width: normalize(0), height: normalize(-1.25) },
// borderWidth: 5,
// borderBottomColor: 'red',
borderTopWidth: normalize(0.3),
borderTopColor: colors.alternative,
shadowColor: 'rgba(186,190,214,0.70)',
shadowOpacity: normalize(0.2),
shadowRadius: 2,
elevation: 5,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
zIndex: 999,
},
chatInput: {
height: normalize(35),
backgroundColor: '#FFFFFF',
borderColor: '#F48C2D',
borderWidth: 1,
width: '70%',
},
icon: {
width: normalize(34),
height: normalize(34),
},
});
I also already tried using react-native-keyboard-aware-scrollview but it didn't help as well.
Appreciate if someone could help.
I got the same issue.
Try this workaround.
You need to position your component on the top of the keyboard,
but it will depend on the size of device keyboard
import { Keyboard, Animated } from 'react-native'
...
useEffect(() => {
Keyboard.addListener('keyboardWillShow', _keyboardWillShow);
Keyboard.addListener('keyboardWillHide', _keyboardWillHide);
return () => {
Keyboard.removeListener('keyboardWillShow', _keyboardWillShow);
Keyboard.removeListener('keyboardWillHide', _keyboardWillHide);
}
}, []);
const _keyboardWillShow = (event) => {
const height = event.endCoordinates.height;
posComponent(height);
};
const _keyboardWillHide = (event) => {
posComponent(0);
};
const animateButton = (value) => {
Animated.spring(your_variable, {
toValue: value,
tension: 50,
friction: 10,
}).start();
}
then on your view component chatbar
<Animated.View style={{
...styles.chatBar,
...(Platform.OS === 'ios' && { bottom: your_variable })}>
...
</Animated.View>
So I want to use a Modal to disable all interactions on a screen but I still want everything on the screen to be visible. It's odd because it was working just fine for me earlier, then I tried to make the Modal its own component, but as soon as I did that, it stopped working properly. I then went back to what I originally did but still having the same issue. I should've committed it when it worked.
Any idea where I went wrong?
Here's my code:
import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';
constructor(props) {
super(props);
this.state = {
modalVisible: true,
};
}
openModal() {
this.setState({modalVisible: true});
}
closeModal() {
this.setState({modalVisible: false});
}
render() {
return (
<View style={styles.container}>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this.closeModal()}
>
<TouchableHighlight
style={styles.modalContainer}
onPress={() => this.closeModal()}
>
<Text>"Words n stuff"</Text>
</TouchableHighlight>
</Modal>
<View
style={styles.upperContainer}
/>
<View
style={styles.lowerContainer}
/>
</View>
);
}
}
}
Styles:
modalContainer: {
flexGrow: 1,
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'transparent',
},
container: {
flexGrow: 1,
justifyContent: 'space-around',
flexDirection: 'column',
alignItems: 'center',
},
upperContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 18,
width: screenWidth,
marginTop: -140,
},
lowerContainer: {
flexGrow: 2,
alignItems: 'center',
justifyContent: 'space-around',
width: screenWidth,
},
Try to add transparentproperty to your Modal.
Example:
<Modal
transparent
...>
...
</Modal>
Doc: https://facebook.github.io/react-native/docs/modal.html#transparent
Try transparent={true} on <Modal />