Huge gap between TouchableOpacity after FlatList - react-native

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.

Related

ScrollView with FlatList inside not working?

This is the code I have for the ScrollView
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled>
<View style={{ maxHeight: 280 }}>
<FlatList
style={{ backgroundColor: '#eee' }}
data={suppliers}
keyExtractor={supplier => supplier}
renderItem={({ item, index }) => {
const style = index % 2 === 0 ? { backgroundColor: '#fff' } : null;
return (
<TouchableOpacity
style={{
...style,
height: height / 14,
borderColor: '#333',
borderWidth: 0.5,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Text style={{ fontSize: 14 }}>{item}</Text>
<Feather name="chevron-right" size={21} />
</TouchableOpacity>
);
}}
/>
</View>
</ScrollView>
The content of the FlatList is dynamic meaning that the length of the supplier array can change at anytime so I have a maxHeight and want it to simply be a list you can scroll through if the content extends the maxHeight. I have tried messing around with a lot of different things but nothing seems to work. You can see the outcome here
I get a list that is not scrollable.

In your first line remove the contentContainerStyle with flex-grow
your code
<ScrollView contentContainerStyle={{ flexGrow: 1 }} scrollEnabled>
change to
<ScrollView contentContainerStyle={{ }} scrollEnabled>
if you need flex then wrap the components with another view tag
For example
<ScrollView scrollEnabled>
<View style={{flexGrow: 1}}>
<FlatList/>
</View>
</ScrollView>
It worked for me.

ScrollView don't scroll all the way down - React Native

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 !

Adapt Webview height depending on the content inside

I am using Webview component in React Native to render HTML content. The problem I am facing is that I cannot make the height variable so it can adapt to any content it has.
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'white',
borderBottomColor: '#dee0e2',
borderBottomWidth: 1
}}
centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
leftComponent={
<TouchableHighlight onPress={() => navigate('homeScreen')}>
<Text style={{color: '#4289f4'}}>Atrás</Text>
</TouchableHighlight>
}
/>
<ScrollView style={{padding: 5}}>
<View style={{flexDirection: 'column'}}>
<Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
<Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />
<View style={{height: 200, backgroundColor: 'red'}}>
<WebView
source={{html: noticia[0].articulo}}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
</View>
</View>
</ScrollView>
</View>
);
If I don't give the <View>' that contents ' <Webview>' a height it does show me nothing. Tried already withflex: 1` but nothing changes.

In your parent view (root view directly under return()) style it as
height: '100%',
width: '100%'
It will adopt to any size screen.

ScrollView not showing everything and is cut off

I need this screen to show all the contents that is inside the scrollview, I've tried everything setting ScrollView's flexGrow to 1, parent view's flex to 100. The scrollview is scrolling down until iteration of Bark Central Dog Park & Cafe but it is cut off to half and can't scroll any further, also I noticed that the text HELP ME can not be found too. Thank you so much, as this problem has been bothering me and my progress in react native.
Please tell me what I should do and where I have gone wrong. Thank you again!
NotificationScreen.js
export default class NotificationScreen extends Component
{
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
const {} = state;
return {
header: null,
};
}
render() {
return (
<View style={styles.parentContainer}>
<View style={{flexDirection: 'row', marginLeft: '5%', marginTop: '5%'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('JobFeedScreen')}>
<Entypo name="chevron-thin-left" color={Colors.red} size={30} />
</TouchableOpacity>
<View style={{marginLeft: 80,}}>
<Text style={{ fontFamily: 'CoreSansD65Heavy',color: Colors.semiGray, fontSize: 25,}}> Ty, Next</Text>
</View>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('LaunchScreenStack')} style={{marginLeft: 87,marginRight: '5%',}}>
<SimpleLineIcons name='bubbles' color={Colors.red} size={30} />
</TouchableOpacity>
</View>
<View style={{marginLeft: '5%'}}>
<Text style={styles.notificationHeader}> Notifications</Text>
</View>
<ScrollView horizontal={false} overScrollMode={'auto'}>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Anteriore, Inc.</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>The Palace Manila</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Boozy.ph</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Pet warehouse PH</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Pet warehouse PH</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.notifPlace}>
<View style={styles.notifTextPlace}>
</View>
<Text style ={styles.text}>Bark Central Dog Park & Cafe</Text>
</TouchableOpacity>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
<Text> PLEASE HELP ME </Text>
</ScrollView>
</View>
);
}
NotificationScreenStyles.js
import { StyleSheet } from 'react-native'
import { Metrics, ApplicationStyles, Colors } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
container: {
paddingBottom: Metrics.baseMargin
},
logo: {
marginTop: Metrics.doubleSection,
height: Metrics.images.logo,
width: Metrics.images.logo,
resizeMode: 'contain'
},
centered: {
alignItems: 'center'
},
parentContainer: {
flex:1,
backgroundColor: Colors.white
},
notificationHeader: {
justifyContent: 'flex-start',
fontFamily: 'CoreSansD45Medium',
marginTop: 40,
marginBottom: 20,
fontSize: 20,
color: Colors.gray,
textAlign: 'left',
},
notifPlace: {
flexGrow: 0,
flexDirection: 'row',
backgroundColor: Colors.white,
width: '100%',
height: '12%',
borderWidth: 0.5,
borderColor: Colors.buttonGray,
},
notifTextPlace: {
width:60,
height:60,
borderRadius: 60/2,
backgroundColor:Colors.buttonGray ,
alignSelf: 'center',
justifyContent: 'flex-start',
marginLeft: '5%',
marginRight: 10,
marginBottom: 20,
marginTop: 20,
},
text: {
fontFamily: 'CoreSansD45Medium',
fontSize: 15,
alignSelf: 'center',
color: Colors.gray,
marginBottom: 10,
},
text2: {
alignSelf: 'center',
fontFamily: 'CoreSansD35Regular',
fontSize: 15,
marginBottom: 10,
},
})
Screenshot 1:
SC1
Screenshot 2: ( it only scrolls up to here )
SC2

This is a known issue in scroll view of react native, use a paddingBottom : 100 in the styles of the scroll view.
The 100 can be set to any value according the content you have

Please provide your StyleSheet and screenshot of what you are seeing.
Test to add
height = Dimensions.get('window').height
to your parentContainer
Also try paddingBottom to your scrollview StyleSheet

Just ran into this problem and what finally fixed it for me was making sure my scrollview wasn't the last component in my layout. So I added an invisible component (with a set height to offset the amount of scrollview content I couldn't see) right after my scrollview.

In my case, I have added a height to the wrapped component of the ScrollView.It worked for me
eg:-
<View style={{ height: hp(500) }}>
<ScrollView showsVerticalScrollIndicator={false}>
{filteredItems.map((item) => <Text style={styles.listItemText}>{item.title}</Text>)}
</ScrollView>
</View>

What fixed it for me was adding contentContainerStyle={{flexGrow: 1,paddingRight:100}} to my scrollview.
Hope it helps someone too!!

just add like this :
<ScrollView contentContainerStyle={{ width:'100%',height:'500%'}}>

position absolute in react native

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 >