I'm new to react-native and I want to do a page that basically has 2 Views and between them has a rounded Image (like in the image) , i know how to do 2 Views but I don't know how to put the Image there correctly.
This should work:
<View style={{flex: 1}}>
<View style={{height: 200, backgroundColor: 'grey'}}></View>
<View style={{flexGrow: 1, backgroundColor: 'black', alignItems: 'center'}}>
<Image
source={require('./icon.png')}
style={{
position: 'absolute',
top: -40,
height: 80,
width: 80}}
/>
</View>
</View>
Related
I am a iOS Developer trying to learn React Native. Currently I am trying to figure out how to create a layout like this with FlexBox:
I am not sure how to use relative values for with in react native. When I am trying to implement it I am getting this:
As you can see, the view in the middle cutting the views on the left and right at there center. Any ideas? Here's my code:
<View style={{flexDirection: 'row', flex: 1}}>
<SafeAreaView>
<TouchableOpacity style={{left: 20, top: 24, height: 44, width: 44}}>
<Image
source={require('../../assets/images/backButton.png')}
style={{height: '100%', width: '100%'}}
/>
</TouchableOpacity>
</SafeAreaView>
<View style={{flex: 2, backgroundColor: '#FF2F2F'}}></View>
<SafeAreaView>
<Text
style={{
right: 20,
top: 24,
height: 44,
fontSize: 14,
}}>
1 / 6
</Text>
</SafeAreaView>
</View>
The issue here is that you have incorrectly ordered the classes(View, SafeView, etc) which are causing the layout to overlap and preventing you from getting the desired result.
Check my solution proposed below:
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flexDirection: 'row', flex: 1, height: "100%"}}>
<TouchableOpacity style={{height: 44, width: 44, margin: 10}}>
<Image
source={require('../../assets/images/backButton.png')}
style={{height: '100%', width: '100%'}}
/>
</TouchableOpacity>
<View style={{flex: 1, backgroundColor: '#FF2F2F'}}></View>
<Text
style={{
padding: 14,
fontSize: 14,
}}>
1 / 6
</Text>
</View>
</SafeAreaView>
);
Running example for the solution on expo Snack
Feel free to explore and edit it!
I'm reading the Flex layout in React Native but I'm still unable to make the Middle (white box) to take what ever available left (without fixed width, since different device will have different width). Also struggling to make the green box always go to the end.
How would I layout this?
This can be solve by adding:
flexGrow:1
you can take references:
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
You can do that by using flex
<View style={{flexDirection: 'row', height: 300, alignItems: 'center'}}>
<View style={{width: 40, backgroundColor: 'blue'}} />
<View style={{flex: 1, backgroundColor: 'white'}} />
<View style={{width: 30, backgroundColor: 'green'}} />
</View>
<View style={{flexDirection: 'row', width: '100%', height: 100}}>
<View style={{backgroundColor: 'blue', width: 40}}></View>
<View style={{backgroundColor: 'white', flexGrow: 1}}></View>
<View style={{backgroundColor: 'green', width: 30}}></View>
</View>
Setting flexGrow: 1 works for me.
html:
But in react-native, this is my code, the margin doesn't work:
(Allow me to put a picture because I am not very skilled at operating this code editor)
My other attempt:
<View style={{flexDirection: 'row', flex: 1, flexWrap: 'wrap'}}>
<Text>12444444444444442222222222222222222222222222222</Text>
<Image source={{uri: url}} style={{width:20,height:20}} />
<Text>1244444444444444222222222222222222222222222222222222222222222222222222222222222222222</Text>
</View>
But it works very badly
Is this yellow image what you want to do?
You can use it in view
<Text> Your text
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginLeft: 5,
marginRight: 5
}}>
<Image source={{uri: url}} style={{width: 20, height: 20,}}/>
</View>
Your text
</Text>
without View use space in same line
<Text>asdasdad {space}<Image source={{uri: url}} style={{width: 20, height: 20,}}/>{space}hasgdjhasd</Text>
Change the rectangular view into quadrilateral view through style
I need to have the quadrilateral background in the view. If it can be done through style, it will be great. Otherwise I've use the image as its background. I dont want to do it however since it wil increase app size as well.
<View>
<Image source={{uri: 'https://previews.123rf.com/images/jaboy/jaboy1706/jaboy170600065/79609763-new-green-light-scenery-background.jpg'}}
style={{width:200, height: 70 }} />
<View style={{ backgroundColor: 'red', padding: 10, paddingTop: 25 }}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
</View>
how it looks now
how I want it to look like
You can achieve this by using 2 views.
<View>
<View
style={{
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 200,
borderTopWidth: 30,
borderLeftColor: 'red',
borderTopColor: 'transparent',
}}
/>
<View style={{ height: 70, width: 200, backgroundColor: 'red' }}>
<Text>A</Text>
</View>
</View>
Within a parent view, I would like to vertically center align one piece of text and have another at the bottom of the view.Whenever I add the bottom text, it shifts the position of the vertical centered view upwards (to make it the vertical center of the remaining space).
How do I keep the text vertically centered align relative to the parent view?
Update: I understand I can do this using {position: 'absolute',
bottom:0}, but want to understand the flex-box solution.
<View style={{height: 300, borderColor: "black", borderWidth: 1}}>
<View style={{ justifyContent: "center", flex: 1 }}>
<Text>Vert Middle</Text>
</View>
<View>
<Text>Vert Bottom</Text>
</View>
</View>
Just try below code
<View style={{height: 300, borderColor: "balck", borderWidth: 1}}>
<View style={{ backgroundColor: 'red', justifyContent: "center", flex: 1 }}>
<Text>Vert Middle</Text>
</View>
<View style={{position: 'absolute', bottom: 0}}> // Here is your updations
<Text>Vert Bottom</Text>
</View>
</View>
This is going to work for you. Also #Nitish answer is going to work too.
render() {
return (
<View style={{
height: 300,
borderColor: "black",
borderWidth: 1
}}>
<View style={{
justifyContent: "center",
flex: 1
}}>
<Text>Vert Middle</Text>
</View>
<View style={{
height:0, //Here...
justifyContent: "flex-end",
}}>
<Text>Vert Bottom</Text>
</View>
</View>
);
}