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>
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!
Hi am working on screens which involves bottom tab bar. For that I have implemented material bottom tab bar from react-navigation-material-bottom-tabs. Problem is my screen is going behind the bottom tab like below
The yellow border was given to see how UI would look like. The bottomline of screen is expected to be just above the bottom bar not behind it.
<SafeAreaView style={{backgroundColor: '#f3f3f5'}}>
<View
style={{
borderWidth: 3,
borderColor: 'yellow',
width: width,
height: height,
flexDirection: 'column-reverse',
}}>
<Header data={headerData} />
<LabelledView
rectanglebarfunc={() => this.rectanglebarfunc()}
height={height * 0.07}
rectanglebarbuttontext={'List Item 01'}
width={width}
color="white"
icolor="#ff007C"
textColr="#120F3F"
fontSize={16}
rectanglebarfunc={() => {}}
/>
<View
style={{
width: '100%',
height: 0.5,
backgroundColor: 'transparent',
}}
/>
<LabelledView
rectanglebarfunc={() => this.rectanglebarfunc()}
height={height * 0.07}
rectanglebarbuttontext={'List Item 00'}
width={width}
color="white"
icolor="#ff007C"
textColr="#120F3F"
fontSize={16}
rectanglebarfunc={() => {}}
/>
{/* <View
style={{
width: '90%',
height: '70%',
backgroundColor: 'red',
alignSelf: 'center',
marginVertical: 5,
}}></View> */}
</View>
</SafeAreaView>
Try adding marginBottom to safeAreaView and View :
<SafeAreaView style={{backgroundColor: '#f3f3f5' ,marginBottom:100}}>
<View
style={{
borderWidth: 3,
borderColor: 'yellow',
width: width,
height: height,
flexDirection: 'column-reverse',
marginBottom:100
}}>
try adjusting your marginBottom to check
Hope it helps. feel free for doubts
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>
);
}
Trying to use put space-between and stretch out the buttons that appear in the overlay pop-up screen using flexbox. This is a child view of the main view of the screen. Nothing but alignItems: 'center' seems to be working to align these buttons.
Any help to get the other flexbox properties to work on this child view would be much appreciated
<View style={{ flex: 1 }}>
<ImageBackground
style={{ width: Dimensions.get("window").width, height: 300 }}
source={require("../../resources/img/image.jpeg")}
/>
<View style={{ marginTop: -20, paddingLeft: 20, paddingRight: 20 }}>
<MainButton onPress={this.openOverlay} size={MainButtonSize.medium}>
{this.bookButton}
</MainButton>
</View>
<Overlay
visible={this.state.modalVisible}
onClose={this.onClose}
closeOnTouchOutside
animationType="zoomIn"
containerStyle={{ backgroundColor: "rgba(255, 255, 255, 0.78)" }}
childrenWrapperStyle={{ backgroundColor: "red" }}
animationDuration={350}
>
{(hideModal, overlayState) => (
<View style={{ alignItems: "center" }}>. <== THIS VIEW
<MainButton size={MainButtonSize.large} onPress={this.onStaffPress}>
{this.staffButton}
</MainButton>
<MainButton size={MainButtonSize.large} onPress={this.onServicesPress}>
{this.serviceButton}
</MainButton>
<MainButton size={MainButtonSize.small} onPress={this.onClose}>
{this.closeButton}
</MainButton>
</View>
)}
</Overlay>
</View>
Please try to set flex: 1 in the View tag
I have been struggling to align two items in the following positions: the first one should be on the left side of the row and the second element needs to be in the center of the row.
The following code below does not fully center my second element:
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{paddingRight: 10 }}>
<Text>
CENTER
</Text>
</View>
{/* Empty view so that space-between works? */}
<View
style={{paddingRight: 10 }}>
</View>
</View>
This was the closest I could get to the result I wanted. However, it does not do the trick. Could anyone know the best way to implement this successfully?
You need to add flex: 1 to parent View and children Views (all children will have flex: 1 if you want them all to be of equal size, otherwise define width/flex for each child View individually).
Try this:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ flex: 1, paddingRight: 10 }}>
<Text style={{ textAlign:'center' }}>CENTER</Text>
</View>
<View
style={{ flex: 1, paddingRight: 10 }}>
</View>
</View>
Added style={{ textAlign:'center' }} to Text in center View child to give you an idea of its centered position. You can modify/remove it.
When I learned Android, I was told not to use too many 'layers' of components. In that philosophy, I decided to use 'absolute' property to the left element to achieve a simpler result. In this scheme, the 'left' item is almost stick to the left wall.
<View
style={{
height: 50,
flexDirection: 'row', // a must
alignItems: 'center', // to make items center vertically.
justifyContent: 'center' // to make the second item center horizontally.
}}
>
<MaterialIcons
style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
name='arrow-back'
onPress={() => {
navigation.goBack();
}}
/>
<Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: 50, height: 50}}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ width: 50, height: 50}}>
<Text>CENTER</Text>
</View>
<View style={{ width: 50, height: 50}}/>
</View>