I have 5 items in FlatList.
I want my items render evenly in fullscreen(Top image to Bottom image).
If I change height or flex, It will shows 5 items in current backgroundImage space.
what should I change..?
<View
style={{
flex: 1,
flexDirection: 'column',
backgroundColor: 'black',
}}
>
<FlatList
style={{ flex: 1 }}
data={emotions}
renderItem={({ item }) => (
<ImageBackground
source={item.img}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
margin: 2,
alignContent: 'stretch',
}}
>
<Text
style={{
fontSize: 20,
textAlign: 'center',
color: 'white',
}}
onPress={() => this.handlePress(`${item.title}`)}
>
{item.title}
</Text>
</ImageBackground>
)}
keyExtractor={item => item.title}
numColumns={1}
></FlatList>
</View>
In render item can you try this
Please replace this
height: '100%'
with
flex:1
Related
Im creating a contact list.
To do that I have put the contact data into a scroll view.
When the user typed a letter to the search contact and tried to go to the last contact in the list, it won't be shown( it will show a little and it will bounce back up.)
return (
<SafeAreaView>
<ScrollView style={{flexGrow: 1}} bounces={false} >
<View style={{ flex: 1, flexDirection: 'row', borderTopWidth: 0.5, borderTopColor: 'grey'}}>
<View style={{ flex: 1 }}>
<Text onPress={() => setChecked(true)} style={{ fontSize: 20, marginHorizontal: 10 }}>
{item.name + ' '}
</Text>
<Text style={{ fontSize: 17, marginHorizontal: 10, marginTop: 5, color: 'grey' }}>
{item.phoneNumbers && item.phoneNumbers[0] && phone && item.phoneNumbers[0].digits}
</Text>
</View>
<TouchableOpacity
onPress={() => {
onChangeValue(item);
}}
>
<CheckBox
style={{ width: 15, height: 15, paddingTop: 8 }}
right={true}
checked={!!selectedContacts[phoneNumber]}
onPress={() => {
onChangeValue({ item });
}}
/>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
I did some research and they said to use flexGrow 1 on the scrollView or to make a parent view with flex 1 but none of that was a solution.
How can I show the user the bottom contacts when the user scrolls to the bottom?
please use flex:1 in the scrollView like this.
<View style={{flexDirection: 'column', flex: 1, width: wp(100)}}>
<WaterfallList
data={FinalArray}
bounces={false}
onMomentumScrollBegin={onScrollStart}
onMomentumScrollEnd={onScrollEnd}
heightForItem={item => Dimensions.get('screen').width * 0.6}
numColumns={2}
allLoaded={true}
onLoading={() => console.log('dsd')}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
contentStyle={{flexGrow: 1}}
style={{
flex: 1,
paddingHorizontal: Dimensions.get('screen').width * 0.03,
backgroundColor: 'transparent',
}}
renderItem={ContactItemServer}
/>
</View>
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 am trying to create a flat list in react native that displays an image as many times as the length of an array called "bools" (later, I will also display contents of bools in the flatlist). While I am able to create and display the flatlist, there is a lot of space between each item and above & below the first and last items, respectively. I can’t remove top and bottom margins completely because I want to add other elements above and below the flatlist. Other than this, I have tried every possible thing I could find online, but nothing is working.
Flat List:
<View style={{ marginTop: "10%", marginBottom: "20%" }}>
<FlatList
// contentContainerStyle={{ paddingBottom: "40%", paddingTop: "5%" }}
style={{ paddingBottom: "3%" }}
data={bools}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<SafeAreaView style={styles.itemContainer}>
<View style={styles.iconStyle}>
<Image
source={someImage}
style={{ aspectRatio: 1, height: "8%" }}
/>
</View>
</SafeAreaView>
);
}}
/>
</View>
Styles:
styles = StyleSheet.create({
itemContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
height: "30%",
marginVertical: "3%",
//paddingTop: "1%",
//paddingBottom: "1%"
},
iconStyle: {
borderWidth: 1,
padding: 10,
borderRadius: 50,
borderColor: "#555",
marginRight: "5%",
resizeMode: "contain",
},
});
})
Thank you!
You can use SafeAreaView out rather then wrapping with all items And you can give style safearea as per your requirement.
<SafeAreaView>
<View style={{ marginTop: "10%", marginBottom: "20%" }}>
<FlatList
// contentContainerStyle={{ paddingBottom: "40%", paddingTop: "5%" }}
style={{ paddingBottom: "3%" }}
data={bools}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<View style={styles.itemContainer}>
<View style={styles.iconStyle}>
<Image
source={someImage}
style={{ aspectRatio: 1, height: "8%" }}
/>
</View>
</View>
);
}}
/>
</View>
</SafeAreaView>
You have the spacing between your elements because of your styling properties.
In your FlatList just remove these properties and the space of above & below the first and last items will be gone. You have to remove these lines.
contentContainerStyle={{
paddingBottom: "40%",
paddingTop: "5%"
}}
style={{paddingBottom: '3%'}}
Similary the space between the items are due to the margin in the itemContainer of Styles Object. just remove this line and then spacing between the items will be gone as well
marginVertical: "3%"
Your Final Code should be something like this
<View>
<FlatList
data={bools}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
return (
<SafeAreaView style={styles.itemContainer}>
<View style={styles.iconStyle}>
<Image style={{aspectRatio: 1, height: '8%'}} />
</View>
</SafeAreaView>
);
}}
/>
</View>
const styles = StyleSheet.create({
itemContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: '30%',
backgroundColor: 'red',
//paddingTop: "1%",
//paddingBottom: "1%"
},
iconStyle: {
borderWidth: 1,
padding: 10,
borderRadius: 50,
borderColor: '#555',
marginRight: '5%',
resizeMode: 'contain',
backgroundColor: 'blue',
},
});
I have added searchview then another row below that and then i have added flatlist in my view below the horizontal listview and i want to show it in full remaining height but it is not showing, there is also not any error in the code and also it doesn't show any error in console, here is a code :
<View style={styles.mainContainer}>
<View style={styles.searchView}>
<TextInput
style={styles.searchInput}
onChangeText={text => this.SearchFilterFunction(text)}
value={this.state.searchText}
underlineColorAndroid="transparent"
placeholder="Search Services"
placeholderTextColor={theme.colors.app_blue_light}
/>
<Image source={Images.search} style={styles.searchImage} />
</View>
{/* MapView */}
<View style={styles.MapToggleContainer}>
<Text style={styles.titleShop}>Select your shop</Text>
<Text style={styles.titleToggle}
onPress={this.toggleView}>List View</Text>
</View>
<View style={styles.shopListView}>
<FlatList
horizontal
style={styles.shopsList}
data={this.state.data}
renderItem={({ item: rowData }) => {
return (
<View style={styles.shopListItem}>
<Image source={require('./logo.png')} style={styles.shopImage} />
</View>
);
}}
keyExtractor={(item, index) => index}
/>
</View>
<MapboxGL.MapView>
<MapboxGL.Camera centerCoordinate={this.state.coordinates[0]} zoomLevel={14} />
<MapboxGL.MarkerView id='marker1' coordinate={this.state.coordinates[0]}>
<ImageBackground source={require('./chat.png')}
style={{ borderColor: 'black', borderWidth: 0, width: 80, height: 80, alignContent: 'center' }}>
<TouchableOpacity style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}
onPress={() => {
this.setState({ toolTipVisible: true })
}}>
<Tooltip
animated
isVisible={this.state.toolTipVisible}
content={<View style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row' }}>
<Image source={require('./chat.png')} />
<View style={{ flexDirection: 'column' }}>
<Text style={{ marginHorizontal: 10, marginTop: 10 }}>123, Main st,</Text>
<Text style={{ marginHorizontal: 10, marginBottom: 10 }}>Chicago, IL 6061</Text>
</View>
</View>
<TouchableOpacity
style={{ backgroundColor: 'orange', margin: 10, alignItems: 'center' }}
onPress={() => { }}
>
<Text style={{ margin: 10, color: 'white' }}>Select Shop</Text>
</TouchableOpacity>
</View>}
placement="top"
onClose={() => this.setState({ toolTipVisible: false })} >
<Text style={{ color: 'white', fontWeight: 'bold', fontSize: 20 }} >$50.00</Text>
</Tooltip>
</TouchableOpacity>
</ImageBackground>
</MapboxGL.MarkerView>
</MapboxGL.MapView>
</View>
Styles
mainContainer: {
flex: 1,
backgroundColor: theme.colors.white
},
toggleContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '20#ms',
marginBottom:'10#ms',
marginHorizontal: '15#ms',
},
titleShop: {
fontFamily: 'Muli-Bold',
fontSize: '16#ms',
color: theme.colors.gray4
},
titleToggle: {
fontFamily: 'Muli-Bold',
fontSize: '11#ms',
color: theme.colors.gray4,
textDecorationLine: 'underline',
alignSelf:'center'
},
MapToggleContainer:{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '10#ms',
marginBottom:'15#ms',
marginHorizontal: '15#ms',
},
shopListView:{
height:'60#ms'
},
shopsList:{
marginLeft:'5#ms',
marginRight:'15#ms',
},
shopListItem:{
elevation:5,
backgroundColor:'white',
marginLeft:'10#ms',
height:'50#ms',
width:'50#ms',
alignItems:'center',
justifyContent:'center',
borderRadius:'5#ms'
},
shopImage:{
width:'30#ms',
height:'30#ms',
},
And here is a result, as you can see the mapview below list is not visible
give height and width style to MapboxGL.MapView
<MapboxGL.MapView style={{width:Dimensions.get("window").width,height:400}}>
<FlatList
data={this.state.bankDetail}
renderItem={({ item, index }) => this.bankImgView(item, index)}
keyExtractor={(item, index) => index}
horizontal={false}
numColumns={4}
/>
bankImgView(item, index) {
return (
<TouchableOpacity onPress={() => this.selectBank(item.image, item.text, index)}>
<View ref={"img"+index} style={{ backgroundColor: "white", marginTop: 2.5, justifyContent: "center", marginLeft: 6, alignItems: "center", flex: 1, marginBottom: 2.5 }}>
<View style={{ width: width / 4 - 8, height: 90, justifyContent: "center", alignItems: "center" }}>
<Image source={{ uri:item.image }} style={{ height: 60, width: 60 }} />
</View>
</View>
</TouchableOpacity>
)
}
selectBank(bankImage,bankName,index) {
this.refs["img"+index].setNativeProps({ backgroundColor: "red" });
}
I wanted to change the background color of a view using setNativeProps which is in flatList but it not changed , the error encounters "setNativeProps of undefined".So Please provide me the correct way for doing this.
Change selectBank function to
selectBank = (bankImage,bankName,index) => {
this.refs["img"+index].setNativeProps({ backgroundColor: "red" });
}
You are accessing references in a function where this is changed and this.refs["img"+index] is undefined.
So change it accordingly to es6 so that this is bind automatically.