Basically I want to render a component like float left behavior in HTML. So the component will rendered horizontally (make a row) until there is no enough space and render it under the previous row.
const {card,insideCard} = styles;
return(
<View style={card}>
<View style={insideCard}/>
<View style={insideCard}/>
<View style={insideCard}/>
<View style={insideCard}/>
</View>
);
and the style
card:{
flex:1,
backgroundColor:'#0000ff',
margin:5,
flexDirection:'row',
},
insideCard:{
height: 80,
width: 80,
backgroundColor:'#000000',
margin:10
}
when I render it the forth View tag will be cut in half.
Is there a way to render it like HTML? So the forth view will render downside automatically?
Thanks a lot :)
apply flexWrap: 'wrap' to your card style. If you want to deal with alignment, play around with justifyContent: 'center'
Yes, you can set flexWrap property to card view:
card:{
flex:1,
flexWrap:'wrap',
backgroundColor:'#0000ff',
margin:5,
flexDirection:'row',
},
Related
Until typing everything is ok. However after starting typing page scrolls down(shifting). I am not able to solve this whatever i do...
<ImageBackground
source={bgSrc}
style={styles.background}
resizeMode="cover">
<StatusBar hidden={true} />
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
enableOnAndroid
>
{screenToShow}
</KeyboardAwareScrollView>
</ImageBackground>
const styles = StyleSheet.create({
container: {
width: '100%',
height: height,
backgroundColor: '#555',
},
background: {
flex: 1,
width: null,
height: null,
justifyContent: 'center',
alignItems: 'center'
}
});
before typing, it's looking perfect
After typing in the password field page moves down as u see:
after typing, it scroll down
This library is always a bit janky. Try a configuration like this:
<KeyboardAwareScrollView
style={{ backgroundColor:
themeColors.boxPrimaryBackground, flexGrow: 1 }}
contentContainerStyle={{ width: '100%', margin: 0 }}
scrollEnabled={true}
extraScrollHeight={-125}
extraHeight={10}
keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps={'handled'}
>
// add scroll content here
</ KeyboardAwareScrollView>
The thing you really need to add is the keyboardOpeningTime={Number.MAX_SAFE_INTEGER}. It has something to do with the animation inside the library. Good luck hope this helps.
I have seen your question on github as well, and its been a long time since that is in open state there.
I have the above problem resolved using KeyboardAvoidingView from react-native
import {KeyboardAvoidingView} from 'react-native'
I have replaced KeyboardAwareScrollView with KeyboardAvoidingView and this is working as needed.
Here is an app link that does this. You can download and see it's login page.
I'm getting a white background and the parent view is not filling the whole screen.
here's my render function. I'm totally baffled. This usually just works. This is very simple. I just want a view with a background color and some text and a button. The button renders but the formatting for the parent view component isn't working. Feedback is appreciated.
render(){
return(
<View style={stylesAM.container}>
<View style={stylesAM.textContainer}>
<Text style={stylesAM.title}>You're all signed up!</Text>
<Text style={stylesAM.body}>Please check your email to verify your account.</Text>
</View>
<View style={stylesAM.buttonContainer}>
<AuthButton type='Back'/>
</View>
</View>
)
}
}
stylesAM=StyleSheet.create({
containter:{
flex: 1,
backgroundColor:'#323AB3',
alignItems:'center',
paddingTop:44
},
textContainer:{
paddingLeft:35,
paddingRight:35,
alignItems:'center',
paddingTop:100
},
title:{
fontFamily:'GlacialIndifference',
fontSize:20,
color:'black'
},
body:{
fontFamily:'GlacialIndifference',
fontSize:15,
color:'black'
},
buttonContainer:{
flex:1,
paddingBottom:40,
justifyContent:'flex-end'
}
})
You have typo in your style name :)
double check it again.
There is a typo mistake in style
containter:{
flex: 1,
backgroundColor:'#323AB3',
alignItems:'center',
paddingTop:44
},
It should be container.
I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks
return(
<TouchableOpacity style = {styles.food_wrapper}
onPress = {()=> this.userAction()}
>
<Text style = {styles.foodname}>
{this.name}
</Text>
<Text style = {styles.foodprice}>
Rs: {this.price}
</Text>
</TouchableOpacity>
);
food_wrapper:{
flex: 1,
flexDirection :'row',
justifyContent:'space-between',
alignItems:'flex-start',
width: '100%',//Dimensions.get('window').width,
minHeight: 50,
marginVertical: '1%',
padding: '2%',
backgroundColor: 'rgb(155,200,200)'
},
You need to understand what is the basic difference from 100% and the width you get using dimension.get('window')
100% means you want to get the container 100% width which mean if your parent container is 50px then 100% will return 50px.
the width from dimension give you a static width of your device width
so be careful to choose what to use to your component
if you want to follow the parent container then it is easier to use 100% then width from dimension but for responsive reasons without any parent container or it is the parent itself then width from dimension will work better
You need to add a wrapper view with flexDirection: 'row', then style the child view (or Touchable or whatever) with flex: 1
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>
Or you could use alignSelf: 'stretch' inside a few with flexDirection: 'column' (which is the default for all views)
Hang in there. Learning flexbox takes some practice. Your first thought when you get stuck should be "do I need to add a wrapper view?"
I would like to create Views with dynamic content that should have some kind of footer that should normally (if there is enough space) look like they are sticked to the bottom.
Before I introduced ScrollViews my code looked like this:
<View style={{flex: 1, justifyContent: 'space-between'}}>
<View>{content}</View>
<View>{stickyFooter}</View>
</View>
After introducing the ScrollView I had to remove flex: 1 because otherwise the ScrollView is not scrollable at all. After that justifyContent became useless because the height of the flex-container is not set to 100%. Therefore both Views just appear next to each other.
To make clear what my view should look like in general:
The button should not be sticked to the bottom, but it should appear at the bottom (if possible).
This is an old question now, but for the benefit of those who end up here from a google search like I did, I paste the solution that worked for me below.
Markup
render = () => {
return (
<View>
<ScrollView style={styles.container}>
...
</ScrollView>
<TouchableOpacity style={styles.floatingActionButton}>
<RkButton
rkType='stretch'>
<RkText>Do stuff</RkText>
</RkButton>
</TouchableOpacity>
</View>
)
}
Styles
const styles = StyleSheet.create(theme => ({
floatingActionButton: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
bottom: 10,
left: 10,
right: 10,
borderRadius: 10,
}
}));
I use the Navigator.NavigationBar component to make a navbar, but the text not vertical centering.
Like this:
How can I solve this?
I just ran into this issue too. The solution:
<Navigator.NavigationBar
routeMapper={{
Title: (route, navigator, index, navState) =>
{
return (
<View style={{
justifyContent: 'center',
flex: 1
}}>
<Text style={{color: 'white'}}>Candidates</Text>
</View>
);
},
}}
/>
So basically make sure there's a parent wrap on your navbar elements filling the navbars height (the flex: 1 rule) and vertically center its contents with justifyContent: 'center'.
I've done the styles inline for this example, but of course it'd be more efficient to get those from a StyleSheet object.