Trying to replicate the below design but not able to. Will appreciate any help with this.
Code that I tried from my end is as below but the line overwrites the text.
<View>
<View style={{ alignSelf:'center', borderBottomColor:'black', borderBottomWidth:1,height:'50%', width:'90%' }}/>
<Text style={{ alignSelf:'center', paddingHorizontal:5 }}>Your class</Text>
</View>
Made it works this way:
<View style={{flexDirection: 'row'}}>
<View style={{backgroundColor: 'black', height: 2, flex: 1, alignSelf: 'center'}} />
<Text style={{ alignSelf:'center', paddingHorizontal:5, fontSize: 24 }}>Your class</Text>
<View style={{backgroundColor: 'black', height: 2, flex: 1, alignSelf: 'center'}} />
</View>
Related
I am working on a responsive design using flex on react-native
<View
style={{
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 10
}}>
<View style={{ flex: 0, backgroundColor: 'red'}}>
<Text style={{ fontSize: 22 }}>
{ moment().format('LL') }
</Text>
</View>
<View style={{flex: 0, backgroundColor: 'blue'}}>
<Text style={{ fontSize: 22,flex: 1, alignSelf: 'flex-end'}}>
# 123123123123123
</Text>
</View>
</View>
This is working properly on a normal scale font.
The output is like this
Then, when the device uses a larger scale of font.
The output is like this
The blue component overflows on the container.
But, when I removed the alignItems: center from the style.
It is working fine.
Any other solution or work around for this?
I think you should design it like this
Working Example Here
<View style={{ width: '100%', flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text
style={{ fontSize: 22 }}
adjustsFontSizeToFit={true}
numberOfLines={1}>
June 23, 2021
</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
<Text
style={{ fontSize: 22 }}
adjustsFontSizeToFit={true}
numberOfLines={1}>
# 123123123123123
</Text>
</View>
</View>
I have a problem where the two materialicons / touchables in the view can't be clicked. (refer to the code section with the View and zIndex.
I may just be nesting the views wrongly.
When i add a zIndex, it fixes for IOS, but dosen't work for Android.
When i remove the ZIndex, it fixes for Android but dosen't work for IOS.
When i remove the whole it works on both, but i lose the
ability to do the space-between as i want to put the icons on the
opposite end of the row.
Would love some advice on why this is the case. Thank you.
<Modal
visible={props.showFilter}
backdropOpacity={0.3}
transparent={true}
animationType={'slide'}
>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center'}}>
<View style={{
backgroundColor:'white',
width: wp('100%'),
height: hp('80%')}}>
>>> <View style={{zIndex:10, flexDirection: 'row', justifyContent: 'space-between'}}>
<TouchableOpacity
onPress={()=> props.close()}
style={{ zIndex:10, paddingHorizontal: 10,top: hp('5%') }} >
<MaterialIcon
name="close"
size={30}
color="#828282"
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=> props.showHelp(true)}
style={{ zIndex:10, paddingHorizontal: 10,top: hp('5%') }} >
<MaterialIcon
name="help"
size={30}
color="#828282"
/>
</TouchableOpacity>
</View>
<View style={{flex:1, alignItems: 'center', paddingTop: 40,}}>
<Text style ={{ fontSize:wp('3.5%'),
fontFamily: 'Gilroy-Bold',
color: '#4F4F4F',
marginBottom: hp("2%"),}}>Filter</Text>
</View>
</View>
</View>
</Modal>
I took a crash course on flex and solved it using good flex skills then relying on Z-Index
https://medium.com/#ManningBooks/in-depth-styling-with-react-native-and-flexbox-ee1bda2c5b24
<View style={{flex:1}}>
<View style ={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<TouchableOpacity
onPress={()=> props.show(false)}
style={{ flex:1, paddingHorizontal: 10,top: hp('5%') }} >
<MaterialIcon
name="close"
size={30}
color="#828282"
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=> console.log("onpress")}
style={{ flex:0, paddingHorizontal: 10,top: hp('5%') }} >
<Text
style ={{
color: "#828282",
fontFamily: 'Gilroy-Regular',
textDecorationLine: 'underline',
fontSize:wp('3.5%')}}> Refresh </Text>
</TouchableOpacity>
</View>
<View style ={{flex:8, alignItems: 'center'}}>
<Text style ={{ fontSize:wp('3.5%'),
fontFamily: 'Gilroy-Bold',
color: '#4F4F4F',
marginBottom: hp("2%"),}}>Filter Tags</Text>
<Text style={{
marginBottom: hp("2%"),
color: "#828282",
fontFamily: 'Gilroy-Regular',
fontSize:wp('3.5%'),
width: '80%'
}}>
text
</Text>
</View>
</View>
I've had a problem with my ScrollView for a few days, it doesn't want to scroll all the way down. However when I remove the View above the ScrollView, there is no more problem, but that is not what I am trying to do. Using a paddingBottom in the contentContainerStyle doesn't seem like the best solution in my opinion. Do you know how to fix this? And also, the flex: 1 bottom everything disappears.
This is a base on my component
Demo: https://gyazo.com/9e1425b3ebf582112813b02b02750192
<View style={{}}>
<View style={{
paddingBottom: 23,
backgroundColor: '#b61414',
}}>
<SafeAreaView>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', marginLeft: 20, marginRight: 20 }}>
<View>
<View style={{ marginRight: 15 }}></View>
</View>
<View>
<Text maxFontSizeMultiplier={1} style={{ color: '#fff', fontWeight: '500', fontSize: 18 }}>{this.props.loggedIn.pseudonyme}</Text>
</View>
<View>
<TouchableOpacity style={{ paddingBottom: 10, marginTop: 12 }} onPress={() => this._actionProfile()}>
<Icon maxFontSizeMultiplier={1} color="#fff" type="ionicon" name="ios-more" />
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
</View>
<ScrollView>
</ScrollView>
</View>
Thank !
I'm using native base as my app template and I've been trying to position two button elements above the footer using only flex. Here is how the buttons are positioned currently.
I tried doing justifyContent: flex-end / space-between but the buttons remains far away from the footer.
<Container>
<Header>
<MainHeader />
</Header>
<Content>
<View style={{flex: 1, justifyContent: 'center'}} >
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, height: 50 }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, alignSelf: 'center' }}>
<Text>Name</Text>
</View>
<View style={{ flex: 1, alignSelf: 'center' }}>
<Text>Sales</Text>
</View>
<View style={{ flex: 1, alignSelf: 'center' }}>
<Text>Commission</Text>
</View>
<View style={{ flex: 1, alignSelf: 'center' }}>
<Text>Payout</Text>
</View>
<View style={{ flex: 1, alignSelf: 'center' }}>
<Text>Profit</Text>
</View>
</View>
</View>
{this.renderRow()}
<View style={{ flexDirection: 'column', justifyContent: 'space-between' }} >
<View style={{ flexDirection: 'row', alignSelf: 'stretch', height: 50, justifyContent: 'space-between' }} >
<View style={{flex:1, alignSelf: 'center'}}>
<Button onPress={() => this.share(this.state.response)} title="Share"></Button>
</View>
<View style={{flex:1, alignSelf: 'center'}}>
<Button onPress={() => this.share(this.state.response)} title="Share"></Button>
</View>
</View>
</View>
</View>
</Content>
<Footer>
<MainFooter />
</Footer>
</Container>
I want the share buttons to be at the bottom of the page above the footer.
The reason is basically because everything is inside content which is basically a scrollview. You can't send something to the end of scrollview as it is parent.
You can access the prop of contentContainerStyle of content from native base and then give it style of justifyConent & alignItens -> flex-end.
I hope it'll work.
This will help you.
I'm trying to make a top menu and colorize it, but backgroudColor property doesn't work.
How the app looks now
<View>
<View style={{
flex: 1,
height: 50,
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'skyblue'
}}>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>H</Text></View>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>Plugins</Text></View>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>Remote</Text></View>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>P</Text></View>
</View>
</View>
Solved
Thanks a lot, your answers both are very useful!
Give prop flex:1 to the parent view style.
<View style={{flex:1}}>
.....Child Views
</View>
use the code below,
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
height: 50,
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: "#87ceeb",
maxHeight: 20
}}
>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>H</Text>
</View>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>Plugins</Text>
</View>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>Remote</Text>
</View>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>P</Text>
</View>
</View>
</View>
to get the required header height use the maxHeight to change it