I have an image container that wraps dynamic number of circular image components as shown below:
<View style={styles.imageContainer}>
{imageList.map(item=> <Image .../>)}
</View>
container has the following style:
imageContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
flexWrap: 'wrap',
width: '100%',
borderWidth: 1,
paddingVertical: 20,
},
As you can see, since justifyContent is flex-start, it leaves more space on the right than on the left side of the container. I tried doing justifyContent: 'center', but it leaves with the following:
now the left and right spaces are equal, but problem is that the images on the second row are centered, which is not what I want. I want them to align to left just like the first screen shot (but left/right space of the container being equal).
How would I solve the problem?
Thanks!
Related
I try to add a video element horizontally centered in react native.
But somehow the style cant be applied to the video tag itself but it is applied to a div around the video tag. The video itself seems to have a postion:absolute.
The template code:
<View style={styles.container}>
<Video
ref={video}
style={styles.video}/>
</View>
Here the styling:
container: {
flex: 1,
display: 'flex',
backgroundColor: '#25292e',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
video:{
flex: 1,
alignSelf: 'center',
border: '1px solid black',
}
I am a react (native) newcomer.
How can I achieve it, that the video is always horizontally centered?
And why are there always extra div's around the elements?
How do I create a responsive layout similar to the Top Up Value shown in the image above?
What I have now is this:
How do i create a box that won't stretch its height? And how can I make sure that the boxes would wrap to next line like in the pic below
This is my code:
topUpOptionsContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
marginVertical: 15,
flexWrap: 'wrap',
},
topUpOptions: {
padding: 10,
borderColor: '#d1d7dc',
borderWidth: 1,
borderRadius: 10,
alignItems: 'center',
width: wp('25%')
},
Nevermind, the code is working. Turns out the actual text has a flex: 1 which causes it to stretch.
I am working on a React Native App . The components are vertically center as I desire but are all aligned on the bottom and can't get them move up towards the top of the screen.
Please take a look at the layout screen (attached here).
How can I get them to move up top?
Please Note : The yellow color in the screen is to figure out how far the component's view stretches.
I could not figure out to adjust the 'yellow' view. The 'yellow' view is only suppose to consist the donut/menu button .
<View style={styles.container}>
<TouchableOpacity style={styles.drawerButton} onPress={() => this.props.navigation.openDrawer()} >
<Image
source={menu}
style={{width: 25, height: 25, marginLeft: 5}}
/>
</TouchableOpacity>
<TextInput style={styles.addText} placeholder="Add New Item"/>
<Button style = {styles.submitButton} title = "Add" />
<TouchableOpacity style = {styles.pictureButton} onPress = {this.setCameraWindow}>
<Text style={{fontSize:14}}> Take Picture </Text>
</TouchableOpacity>
{this.state.isCameraVisible ? this.takePicture() : null }
</View>
);
}
}
const styles = StyleSheet.create ({
container:{
flex:1,
flexDirection: 'column',
alignItems:'center',
flexGrow: 1,
justifyContent: 'center',
backgroundColor: 'blue'
},
drawerButton:{
flex:1,
flexDirection:'row',
alignSelf:'flex-start',
backgroundColor:'yellow'
},
menuButton: {
height:50,
flex:1,
flexDirection:'column',
alignSelf:'flex-start',
backgroundColor:'yellow',
},
addText:{
flex:1,
flexDirection:'column',
justifyContent:'center',
backgroundColor:'white',
borderBottomColor: 'black',
borderBottomWidth: 2,
alignSelf:'center',
maxHeight:50,
},
submitButton:{
justifyContent:'center'
},
pictureButton:{
backgroundColor:'white',
justifyContent: 'center',
},
});
Thank you
You have given flex:1 inside the style={styles.drawerButton}, thats why its taking up the entire space and other things are pushed to the end of the screen, please remove flex:1 from that, and also remove justifyContent: 'center' from container style. Then all the content will be moved to the top
These styles are what you need. Specifically:
overflow: hidden: Hides the yellow bit when the menu is collapsed.
position: absolute on the menu. This means the menu will appear in the same position regardless of the other content. Use top: 10px; left: 10px to control the actual positioning of the menu.
position: relative on the menu's parent (TouchableOpacity) element. This means the position: absolute of the menu will be relative to the parent element.
You may have to get rid of some of the other styles, at least temporarily, so you can see what is happening.
I have an image where i try to center some text on it.
For that i use ImageBackground to have child elements of the image.
However the image is being scaled down on small devices, and full size if possible
When i center my text, it gets centered after the whole image ratio ( on a big screen where you can see the whole image, its centered - on small screens its offset because some of the image is cropped to fit.
<ImageBackground style={{ width: wp('50%'),
height: hp('50%'),
resizeMode: 'cover',
justifyContent: 'center',
alignItems: 'center' }}
source={require('../assets/images/12.jpg')}>
// if the full image is showing - it's centered, otherwise not!
<Text style={{ color: "red" }}>Centered text</Text>
</ImageBackground>
you need to add an extra view to wrap the ImageBackground and add style property
justifyContent and alignItems to center and I think this will erase your problem.
<View style={{ flex:1 , justifyContent: 'center', alignItems: 'center' }}>
<ImageBackground
style={{ width: wp('50%'), height: hp('50%'), resizeMode: 'cover', justifyContent: 'center', alignItems: 'center' }}
source={require('../assets/images/12.jpg')}>
// if the full image is showing - it's centered, otherwise not!
<Text style={{ color: "red" }}>Centered text</Text>
</ImageBackground>
</View>
I'm trying to build a layout in React-Native using Flexbox and I'm having trouble when the text is long. I want the layout to look like this:
However, when the blue text gets long, it pushes the date off of the right side of the screen like this:
I'm intentionally making the text stay on 1 line. What I want is for the blue text to expand as much as possible without making the text shrink. I'm new to RN and my work with CSS is very limited so I don't have much experience doing things like this. Here is my stylesheet code:
const styles = StyleSheet.create({
textContainer: {
flex: 1
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
title: {
fontSize: 25,
fontWeight: 'bold',
color: '#48BBEC'
},
subtitle: {
fontSize: 20,
color: '#656565'
},
dateContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end'
},
rowContainer: {
flexDirection: 'row',
padding: 10
}
});
And, finally, my layout code:
<TouchableHighlight
underlayColor='#dddddd'>
<View style={styles.rowContainer}>
<View cstyle={styles.textContainer}>
<Text numberOfLines={1} style={styles.title}>{rowData.name}</Text>
<Text style={styles.subtitle}>{rowData.teacher}</Text>
</View>
<View style={styles.dateContainer}>
<Text style={styles.subtitle}>{result}</Text>
</View>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
Remove flex: 1 from dateContainer and add flexWrap: 'wrap' to textContainer.
textContainer: {
flex: 1,
flexWrap: 'wrap'
},
dateContainer: {
justifyContent: 'center',
alignItems: 'flex-end'
},
You'll have to set a width on the text component you wish to truncate (even if it's 100% of it's container which is the flexbox child I imagine), and also set numberOfLines prop to 1 (or however many lines you want to allow). See docs here on ellipsize mode and number of lines.
https://facebook.github.io/react-native/docs/text.html#ellipsizemode
Code example of what I explain above:
<View style={{display: 'flex', flexDirection: 'row', overflow: 'hidden'}}>
<View>
<Text
numberOfLines={1}
style={{width: '100%'}}>Text here that I want to truncate</Text>
<Text
numberOfLines={1}
style={{width:'100%'}}>Another line of text</Text>
</View>
<View style={{width: 120}}>
<Text>01/01/2017</Text>
</View>
</View>
If you're still having issues, it's possible you'll need to also use overflow: hidden in your text component style.
To solve your problem, remove the flex: 1 from the dateContainer and it won't go off the screen.
dateContainer: {
//flex: 1, line removed
justifyContent: 'center',
alignItems: 'flex-end'
},
Add the flex: 1 to your rowContainer as follows:
rowContainer: {
flex: 1, //Line added
flexDirection: 'row',
padding: 10
}
The solution to this is adding flexGrow: 0 to the element that is pushing others away.
I ended up solving this by measuring the parent view's width (with the onLayout callback) and then setting the width of the text's parent to the remainder.
This means having some state in the component, but it could be turned in to a general component with a left-side dynamic-sized component and a right-side static component.