I searched how to set footer using React Native.
and I found a solution
https://stackoverflow.com/a/31249011/8226957
I followed and put style={{flex: 1}} to root View, but it does not work.
<View style={{flex: 1}}>
<ScrollView>
<FlatList
data={this.state.datas}
renderItem={({item}) =>
<TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}>
<Text style={styles.item}>
{item.value}
</Text>
</TouchableOpacity>
}
/>
</ScrollView>
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TouchableOpacity onPress={this._onAddButton}>
<View style={{
height: 50,
backgroundColor: 'steelblue',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{textAlign: 'auto'}}>ADD</Text>
</View>
</TouchableOpacity>
</View>
</View>
when I follow that, I see disappeared List.
Try to add justifyContent : 'space-between' and add flexDirection: 'column' that should be fix your problem
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
Try to wrap the <ScrollView> in a <View style={{ flex: 1 }}>
If that does not work, try to set a fixed height too your footer: <View style={{ height: 90 }}>
Related
hello I am new to react native I am facing an abnormal behavior on navigation which happens between two modal screens first modal screen as shown in the picture on navigate it goes into next screen works fine
here is second modal picture on navigate
problem comes when I press on div upload cnic picture front and back then screens getting merged both are different component , previous screen modal appear as you seen in photo I marked in the screen with two modal screens
here is my CNIC upload screen code
<TouchableWithoutFeedback
onPress={() => {
displayModal(!modalVisible);
}}>
<View style={styles.container}>
<Modal
onBackdropPress={() => setModalVisible(false)}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['down']}
useNativeDriverForBackdrop
style={{margin: 0}}
isVisible={modalVisible}>
<View
style={{
flex: 1,
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
marginTop:
steper === 'step' ? deviceHeight * 0.1 : deviceHeight * 0.2,
backgroundColor: 'white',
alignItems: 'center',
}}>
<View
style={{
width: '100%',
height: '100%',
// alignItems: 'center',
marginTop: 3,
justifyContent: 'space-evenly',
}}>
<View style={{width: '100%', alignItems: 'center'}}>
<PopupBorder />
</View>
{/* first half */}
<View
style={{
width: '100%',
alignItems: 'center',
height: '18%',
justifyContent: 'flex-end',
}}>
<View style={styles.subContainer}>
<Image
style={{width: '40%', height: '50%', resizeMode: 'contain'}}
source={require('../assests/finger-print.png')}
/>
<Text style={{fontSize: 18}}>Verify your account </Text>
<SubTitle
amount
color="#636363"
title="We require CNIC and Selfie for the verification"
/>
</View>
</View>
{/* steper */}
<View
style={{
height: '10%',
justifyContent: 'center',
}}>
<DocumentSteper step={steper} />
</View>
{/* steper */}
{/* second half */}
<View
style={{
width: '100%',
height: '70%',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={styles.subContainer}>
<TouchableOpacity
style={{
width: '100%',
height: '80%',
alignItems: 'center',
}}>
{steper === 'step' ? (
<>
<TouchableOpacity
activeOpacity={0.6}
onPress={takeFrontPhotoFromCamera}
style={styles.imageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={
frontImage === null ? null : {uri: frontImage}
}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
onPress={takeBackFrontPhotoFromCamera}
style={styles.imageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={
backImage === null ? null : {uri: backImage}
}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
</>
) : (
<TouchableOpacity
onPress={takeSelfie}
style={styles.singleimageContainer}>
<ImageBackground
style={styles.uploadStyle}
// resizeMode="contain"
source={selfie === null ? null : {uri: selfie}}>
<Image source={require('../assests/upload.png')} />
<View style={{paddingTop: 5}}>
<SubTitle
title="CNIC FRONT"
font
color="#06B2BC"
fontSize={14}
amount
/>
</View>
</ImageBackground>
</TouchableOpacity>
)}
</TouchableOpacity>
<View
style={{
width: '100%',
height: '20%',
justifyContent: 'flex-end',
}}>
<Button
click={verify}
title={
steper === 'step' ? ' Verify CNIC' : 'Verify SELFIE'
}
backgroundColor="white"
marginBottom={15}
color="#06B2BC"
/>
</View>
</View>
</View>
</View>
</View>
</Modal>
<TouchableWithoutFeedback onPress={() => !modalVisible}>
<TouchableOpacity style={styles.map}>
<Image source={require('../assests/map.png')} />
</TouchableOpacity>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
We can't see from your code sample where you are calling the second step "upload cnic picture". It seems that you are calling another modal on top of the first one.
If you have planned to have a full process within this modal, it is probably best to integrate a proper navigator rather than "navigate" between modals.
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.
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>