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 !
Related
I am trying to create a TouchableOpacity after a FlatList in react native. Although it's coming under the view but there is a huge gap between the list and the button.
Following is the corresponding code :
<FlatList keyExtractor={(payment) => payment.iconFont} style={{ alignSelf: "center" }} data={payments} renderItem={({ item }) => {
return <View style={{ width: '100%', marginTop: 32 }}>
<View style={{ flexDirection: "row" }}>
<View>
<FontAwesome5 name={item.iconFont} size={32} />
</View>
<View>
<Text style={{ fontSize: 18, marginLeft: 16 }}>{item.mainText}</Text>
<Text style={{ fontSize: 12, marginLeft: 12 }}>{item.SubText}</Text>
</View>
</View>
</View>
}} />
<TouchableOpacity style={styles.button}>
<Text style={{ color: "#FFF", fontWeight: "500", fontSize: 20 }}>PAY</Text>
</TouchableOpacity>
I am doing something wrong over here ?
P.S. => Although FlatList is working fine
the corresponding styles :
button: {
backgroundColor: "#000000",
height: 40,
alignItems: "center",
justifyContent: "center",
borderRadius: 20
}
Move the Touchable Opacity into Flatlist's listfootercomponent prop. Like this:
<FlatList
ListFooterComponent={<TouchableOpacity> .... </TouchableOpacity>}
/>
This should solve the spacing problem. And place the TouchableOpacity component always at the bottom of the FlatList.
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>
click to see design
I'm having a problem positioning the white floating button on top of the blue header. The button is a TouchableOpacity inside a View which has Header and a ScrollView. How do I position the button on top of the blue header and scrollview?
<View style={{ flex: 1 }}>
<Header headerText={'Events'} />
<TouchableOpacity
style={styles.addButtonContainerStyle}
onPress={ () => {Actions.addEventMain()} }
>
<Text style={styles.addButtonTextStyle}>+</Text>
</TouchableOpacity>
<EventList />
</View>
Below code would help. Absolute position of views sometimes becomes hard to maintain when code grows. You need to customise below code as per your need.
<View style={{ backgroundColor: "blue", flexDirection: "row-reverse" }}>
<TouchableOpacity style={{ alignSelf: "flex-end" }}>
<Text style={{ justifyContent: "center", fontSize: 20, textAlign: 'center' }}>
+
</Text>
</TouchableOpacity >
<View style={{ flex: 1 }}>
<Text style={{ alignSelf: "center", fontSize: 20, textAlign: 'center' }}>
Event
</Text>
</View>
</View >
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>
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 }}>