So I'm rendering a View that will display a number of components. Everything looks the way it should when I'm not using the nestedContainer. Each component is spaced out the way it should and it's aligned properly. Now if I add the View with the nestedContainer style, it no longer applies space-around to the HandRolledIcon and UserName component. How do I work around this and make sure those components within the nested View uses the styles I want?
(This question is related to my other question which contains more details)
<View style={styles.container}>
<View style={styles.nestedContainer>
<HandRolledIcon style={styles.hrIcon} />
<UserName style={styles.userName} />
</View>
</View>
container: {
flex: 1,
justifyContent: 'space-around',
flexDirection: 'column',
alignItems: 'center',
},
nestedContainer: {
alignItems: 'center',
justifyContent: 'space-around',
},
hrIcon: {
alignItems: 'center',
},
userName: {
alignItems: 'center',
}
I actually don't know what you're trying to achieve, But I feel u must brush up your flex-box knowledge.
Check out these links it might help you
https://tympanus.net/codrops/css_reference/flexbox/
https://facebook.github.io/yoga/docs/getting-started/
One way of achieving your result is giving flexGrow:1 (flex: 1 kind of works the same in react-native) to your nested container, which will make your nested container view to occupy all the extra space.
nestedContainer: {
flexGrow: 1,
alignItems: 'center', // <--- This can be removed based on your requirements since its already given to the parent view
justifyContent: 'space-around',
},
NOTE: This is just one way, other ways might be possible just go through the flex-box docs thoroughly.
Related
I want to do a line like this one, but I don't know how (btw the text on the image is in spanish, but it does not matter).
You can draw a separator with flexbox properties even with a text or view or anything you want in the center of the line.
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
<View>
<Text style={{textAlign: 'center', paddingHorizontal:8}}>Hello</Text>
</View>
<View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>
Pls, take a look at this link.
Hope it will help.
Draw horizontal rule in React Native
It can be done easily by installing packages.
https://daisyui.com/components/divider/
It can be done easily without adding any library. Here's an exmaple -
https://snack.expo.dev/#arjunshukla97/divider
In my app keyboard covers only bottom part of the text input. I have tried several ways to solve this by changing styles by adding padding or margin, and also KeyboardAvoidingView didn't help.
Another problem is that keyboard shifts the whole screen and header becomes invisible as it goes above.
Edit: It works fine on IOS devices.
How can I fix these problems?
Thanks
Code:
<>
<CustomHeader title={item.title}
leftChild={<SvgImageComp name={MENU_ICON}/>}
centerChild={
<TextComp text={'Title'} style={compStyle.title}/>
}
/>
<View style={{
flex: 1,
justifyContent: 'flex-end'
}}>
<KeyboardAvoidingView
behavior={"height"}
>
<TextInputComp fontFamily={NUNITO_SANS_REGULAR}
fontSize={15}
lineHeight={20}
autoFocus={true}
style={{
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 1,
borderColor: '#000',
borderRadius: 200,
}}
/>
</KeyboardAvoidingView>
</View>
</>
For Android you don't need to pass behavior to KeyboardAvoidingView. For IOS you need to pass behavior="position" and keyboardVerticalOffset=[height of your input].
<KeyboardAvoidingView
{...(Platform.OS === 'ios'
? {
behavior: 'position' ,
keyboardVerticalOffset: [inputHeight], // calculate height using onLayout callback method
}
: {})}>
I avoid this issue by wrapping the screen in <ScrollView contentContainerStyle={flexGrow: 1}><ScrollView> This will make the whole screen turn into a scroll view once the keyboard opens. Allowing the box to be out of the way of the keyboard. This also has the added benefit of allowing you to scroll to other sections of the screen for reference while the keyboard stays open.
I made a custom Image swiper withe ScrollView in React Native, but it looks bad when images with rounded corners move. Is there any way to round the corners of the ScrollView?
Those are my ScrollView styles:
style={{
flexDirection: 'row', alignSelf: 'center',
width: this.state.imageWidth,
borderRadius: 20,
}}
ScrollView also inherits styles from ViewStyles so you can pass borderRadius: 20 to it.
So I'm new to React (and JavaScript too for that matter). I'm creating an App using react native and currently trying to style my popup menu. (which looks like this: Popup menu image)
I want to change the style of the options (make the font size bigger and space them out and change the font color too). My code looks something like this:
<MenuProvider>
<Menu >
<MenuTrigger>
<Image
style={styles.menucontainer}
resizeMode="contain"
source={require('../assets/icon_more.png')}>
</Image>
</MenuTrigger>
<MenuOptions optionsContainerStyle={styles.optionsstyle}>
<MenuOption text= 'About' />
<MenuOption text= 'Help & Feedback'/>
<MenuOption text= 'Sign Out'/>
</MenuOptions>
</Menu>
</MenuProvider>
After checking
https://github.com/instea/react-native-popup-menu/blob/master/src/MenuOption.js
I found a prop customStyles. Just like I passed a styling object for MenuOptions as prop optionContainerStyle, I tried passing customStyles for MenuOption but that produced an error:
In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.
Here is my styles code:
const styles = StyleSheet.create({
optionsstyle:{
marginTop: height*32/dev_dimension.h,
marginLeft: width*184/dev_dimension.w,
backgroundColor: '#fafafa',
width: width*168/dev_dimension.w,
height: height*160/dev_dimension.h,
flexDirection: 'row',
flex: 1,
justifyContent: 'space-between',
},
});
Can anyone tell what I'm doing wrong?
According to documentation the optionsContainerStyle are deprecated and I am not sure if they work properly. Try to use customStyles props instead as seen in StylingExample where you can find full example.
The thing is that customStyles is map of styles for different parts. Something like
<MenuOptions customStyles={{optionWrapper: { padding: 5}, optionText: styles.text}}>
I use the keyboardAvoidingView, to display inputs and used next focus. But, when i click in first input ( print label 1623 - Acidez ), this is hidden. How make show this?
<ReactNative.View key={this.state.selectedTabIndex}>
<ReactNative.ScrollView style={{ height: this.props.styles.height - 40 }}>
<ReactNative.KeyboardAvoidingView
keyboardVerticalOffset={0}
behavior="position"
contentContainerStyle={{ paddingTop: this.state.size }}
>
{this.tabs[this.state.selectedTabIndex].render()}
</ReactNative.KeyboardAvoidingView>
</ReactNative.ScrollView>
</ReactNative.View>
if you increase 'keyboardVerticalOffset' to bigger value like '100' of KeyboardAvoidingView to some bigger amount it would scroll up from keyboard thus avoiding it.I also spent much time in finding the right solution on internet but finally figure it out myself for 'react-native' version '0.50.4'.I got it working like this
<View style={…..}>
<ScrollView>
<KeyboardAvoidingView style={{ flex: 1 }}
keyboardVerticalOffset={100} behavior={"position"}>
</KeyboardAvoidingView>
</ScrollView>
</View>
keyboardVerticalOffset should be the distance between the top of the screen and the top of the KeyboardAvoidingView. If you're using flex, that number is going to be different depending on the size of the device you're viewing the app on.
The simplest approach I have found is to simply wrap the whole page with KeyboardAvoidingView. By making it your top-level wrapper, you will never have to worry about the keyboardVerticalOffset.
Experiment with the three behavior options from there until you get something that works.
What works today for me - on android - was..
<KeyboardAvoidingView
key={2}
keyboardVerticalOffset={0}
behavior={"padding"}
style={{
flex: 1,
overflow: "hidden",
height: "100%",
paddingTop: 0,
marginTop: 0,
borderTopWidth: 0,
}}
windowSize={1}
enabled
>
(...)
</KeyboardAvoidingView>