Problem positioning element to the bottom - react-native

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.

Related

How to justify items to left and right using flexbox

How do I align the 2 touchableOpacity components to the right and left respectively? Here is how it currently looks like:
Here is how my code looks like:
<View style={{ flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingLeft: 30}}>
//Other components are here
<View style={{flexDirection: 'row', justifyContent:'space-between'}}>
<TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}>
<View>
<Text style={{color: 'white'}}>Submit</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center'}}>
<View>
<Text style={{color: 'white'}}>Cancel</Text>
</View>
</TouchableOpacity>
</View>
</View>
Add a width to your view (since the flex-start is messing it up) might do the trick:
<View style={{flexDirection: 'row', justifyContent:'space-between', width:"100%"}}>
Give flex 1 in second view
<View style={{flex: 1, flexDirection: 'row', justifyContent:'space-between'

Unable to click on icons in React Native Modal even with zIndex

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>

React Native Flex Two Rows having ununsual spaces

I'm trying to do some setup for flex with a flexDirection: row
But not able to get the successful outcome.
Basically it needs to be two rows without a gap. 1st row with a text label. 2nd row has 2 components (text / switch)
<View style={{
flex: 1, flexDirection:'row',
}}>
<View>
<Text style={codeModalStyles.onlyYouCanText}>
{...}
</Text>
</View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-around', padding: 14}}>
<Text style={codeModalStyles.onlyYouCanText}>
{..}
</Text>
<Switch
value={props.switchValue}
style={{transform: [{scaleX: 1.5}, {scaleY: 1.5}]}}
onValueChange={.. }
/>
</View>
</View>
But it appears like this
I tried something else like this (removing flex direction on the main container view). But i got a big space.
<View style ={{flex:1}}>
<Text style={codeModalStyles.onlyYouCanText}>
{..}
</Text>
</View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-around', padding: 14}}>
<Text style={codeModalStyles.onlyYouCanText}>
{..}
</Text>
<Switch
value={props.switchValue}
style={{transform: [{scaleX: 1.5}, {scaleY: 1.5}]}}
onValueChange={.. }
/>
</View>
</View>
Do you want like this ?
<View
style={{
flex: 1,
flexDirection: "column"
}}
>
<View>
<Text>Auto set reminders?</Text>
</View>
<View
style={{
width: "100%",
flexDirection: "row",
justifyContent: "flex-start"
//padding: 14
}}
>
<Text
style={{
width: "50%",
flexDirection: "row",
justifyContent: "space-around"
//padding: 14
}}
>
Do students need to do a new post? A reminder will be sent daily fro
3 days until they post and tag your task during posting.
</Text>
<View
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
>
<Switch
style={{ transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }] }}
onValueChange={this.toggleSwitch}
value={this.state.isEnabled}
/>
</View>
</View>
</View>
sandbox

Why backgroundColor doesn't work with View in React Native?

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

Setting `backgroundColor` in style hides `View` component

I have the following render() function in my component, it is replicating the look and feel of a table, but using flex in react-native.
<View>
<View key={ 'test' } style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col1</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col2</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col3</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col4</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col5</Text>
</View>
</View>
</View>
Which renders perfectly fine and as expected. However if I add backgroundColor: 'green' into the style of the top-most-level view, above, then the whole view is just gone. Can't even see it in the react-native inspector anymore.
Any idea why this is happening? Am I missing some gotcha, to do with not using background colors on nested View or something?
Edit: It is because there was a being wrapped around my component from the parent component, which also had to have flex: 1 explicitly set. Not sure why only adding backgroundColor causes this but there we go.
You have to set the style of the first view to flex: 1
<View style={{flex: 1}}>
<View key={ 'test' } style={{ flex: 1, flexDirection: 'row', backgroundColor: 'green' }}>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col1</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col2</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col3</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col4</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col5</Text>
</View>
</View>
</View>
You can try this, I think by setting the height and width to your parent view solve the problem
<View key={ 'test' } style={{ height: 500, width:500, flexDirection: 'row' }}>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col1</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col2</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col3</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col4</Text>
</View>
<View style={{ flex: 1, alignSelf: 'stretch' }}>
<Text>Col5</Text>
</View>
</View>