I am using FlatList to view list of people, however, I have noticed that the last item is always a little off:
See item Amy Butts, I have to drag to top in order to see it. This screen is within a stackNavigator that has a header. Would that be the issue? how to solve it?
I tried marginBottom: 40 on the FlatList but it did not change anything.
Code:
let renderRow = ({item}) => {
return (
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<TouchableOpacity style={{ flexDirection: "row", justifyContent: "flex-start", marginLeft: 10}} onPress={this.myFunction.bind(this, item)} >
<View style={{}}>
<Image style={styles.Image} source={{uri: item.Image}} />
</View>
<View style={{ marginTop: 15, marginLeft: 10}}>
<Text >{item.name}</Text>
</View>
</TouchableOpacity>
</View>
);
}
return(
<FlatList style={{marginTop: 10, backgroundColor: "white"}}
keyExtractor={(item, index) => item.id}
data={this.state.result}
renderItem={renderRow.bind(this)}
ItemSeparatorComponent={renderSeparator.bind(this)}
/>
)
With paddingBottom (or top), now the last two items will not be shown:
You need to add paddingBottom or marginBottom to the FlatList with a suitable value to your design.
// Some padding amount that is suitable for your design
<FlatList style={{marginTop: 10, backgroundColor: "white", paddingBottom: 40}}
keyExtractor={(item, index) => item.id}
data={this.state.result}
renderItem={renderRow.bind(this)}
ItemSeparatorComponent={renderSeparator.bind(this)}
/>
Related
I have a FlatList that I wnat to use to display some items. But when a row is not completely filled with items, that item is displayed in the center of the row. I want it to align with the items above it from left to right. How would I do that?
const renderItem = ({ item }) => {
return <Image source={require("../assets/temp.png")} />;
};
return (
<View style={styles.container}>
<View style={styles.header}>
<Text>Header</Text>
</View>
<FlatList
columnWrapperStyle={styles.flatList}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id}
numColumns={4}
/>
<View style={styles.tableContainer}></View>
</View>
);
Styles
flatList: {
justifyContent: "space-evenly",
width: "95%",
marginLeft: "auto",
marginRight: "auto",
borderWidth: 1,
},
Ok nevermind, I just put each item in a container/View with a view of 25% and removed justifyContent: "space-evenly"
I am quite new to react native. I have created a FlatList for rendering this list of items, however, it is not scrolling. I've googled it for hours and tried nearly everything suggested in stack overflow threads - removed flex, added flex, wrapped it in a view, but nothing seems to work.
Here is my code (the issue is in the second FlatList) -
return(
<View style = {{ height: '100%' }}>
<View style = {{ width: '100%' }}>
<AppHeader />
</View>
<View style = {{ width: '100%'}}>
<View style = {{ width: '70%', alignSelf: 'center', flex: 1 }}>
<View>
<FlatList
data = {this.getTodayDay()}
renderItem = {this.renderItemDays}
keyExtractor = {this.keyExtractor}
/>
</View>
<FlatList
data = {this.getVisibleHours()}
renderItem = {this.renderItem}
keyExtractor = {this.keyExtractor}
scrollEnabled = {true}
/>
</View>
</View>
</View>
this.renderItem -
renderItem = () => {
// irrelevant code
if( isClass === true ){
return(
<ListItem bottomDivider = {true} style = {styles.renderItemActiveClass}>
<ListItem.Content>
<TouchableOpacity
onPress = {()=>{
this.props.navigation.navigate('ClassDetailsScreen', { "data": classData })
}}>
<ListItem.Title>{ definiteClassTime }</ListItem.Title>
<ListItem.Subtitle>{ classData.class_name }</ListItem.Subtitle>
</TouchableOpacity>
</ListItem.Content>
</ListItem>
)
}
else{
return(
<ListItem bottomDivider = {true} style = {styles.renderItemClass}
containerStyle = {styles.renderItemContent}>
<ListItem.Content>
<ListItem.Title>{item}:00</ListItem.Title>
<ListItem.Subtitle>No Class</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
)
}
}
the StyleSheet -
renderItemClass: {
borderColor: 'purple',
borderWidth: 2
},
renderItemActiveClass: {
borderColor: 'green',
borderWidth: 2
},
renderItemContent: {
},
Could somebody please tell me what I'm doing wrong?
Add a height to both the flatlist. And also wrap your second flatlist within a seperate view. Here is an example:
return (
<View style={{ height: "100%" }}>
<View style={{ width: "100%" }}>
<AppHeader />
</View>
<View style={{ width: "100%" }}>
<View style={{ width: "70%", alignSelf: "center", flex: 1 }}>
<View style={{ height: 60, alignSelf: "center" }}>
<FlatList
data={this.getTodayDay()}
renderItem={this.renderItemDays}
keyExtractor={this.keyExtractor}
/>
</View>
<View style={{ height: 60, alignSelf: "center" }}>
<FlatList
data={this.getVisibleHours()}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
scrollEnabled={true}
/>
</View>
</View>
</View>
</View>
);
I have a problem like picture below:
Text
As you guy can see I have info on every item: name and stock. Now I want to update stock on single item by type a number to text Input But when I type 3 into 1 Text Input, it fills 3 in all the remaining Text Input. This is my render Item:
renderItem = ({item}) => {
return (
<View style={styles.card}>
<TouchableOpacity
onPress={() => {
setCreateAt(item.WarehouseProduct.createdAt);
setNote(item.note);
setShowModal(true);
}}>
<Image
style={styles.tinyLogo}
source={require('../assets/images/fish.jpg')}
/>
</TouchableOpacity>
<View
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 5,
height: 75,
width: 160,
}}>
<Text numberOfLines={2} style={styles.text}>
{item.name}
</Text>
<Text style={styles.text}>
{item.WarehouseProduct.stock.toString()}
</Text>
</View>
<View style={styles.iconcontainer}>
<Button title="clear" onPress={() => console.log(text)} />
</View>
<View
style={{
alignSelf: 'center',
marginLeft: 20,
borderWidth: 1,
borderRadius: 10,
}}>
<TextInput
style={{height: 40, width: 50}}
keyboardType="numeric"
onChangeText={(income) => setText(income)}
value={text}
/>
</View>
</View>
);
};
Can anyone help me solve this problem? Just give me an idea. Thanks all!
anything you put in renderitem will be rendered as much as your data in flatlist
<Flatlist
data={containtmultipledata}
renderItem={
....
<TextInput
style={{height: 40, width: 50}}
keyboardType="numeric"
onChangeText={(income) => setText(income)}
value={text}
/>
....
}
>
but you asign it to single value
you can change data you put in flatlist directly by index in item
<TextInput
style={{height: 40, width: 50}}
keyboardType="numeric"
onChangeText={(txt) => containMultipledata[index].yourObjectName = txt}
value={item.yourObjectName}
/>
Try this way
const [data, setData] = useState([... flat list data here default]);
const onTextChanged = (index, value) => {
const data = [...data];
data[index].availableStock = value; <-- "availableStock" is example key for showing way out of this -->
setData(data);
}
renderItem = ({item, index}) => {
return (
<View style={styles.card}>
......
<TextInput
...
onChangeText={(income) => onTextChanged(index, income)}
value={item.availableStock || 0}
/>
</View>
);
};
Good evening!
I have been trying to create a modal with a scrollable FlatList inside, but such FlatList should have its height size reduced. The modal is going to search a wide list of airports, so basically a lot data might be shown, hence why FlatList is the best tool for this occasion. Basically, the modal screen would look like this picture below:
However, I can't make the scroll inside FlatList work no matter what. Here is the code, with the FlatList that is somewhat functional, but it has a warning:
const styles = StyleSheet.create({
modalContainer: {
backgroundColor: 'rgba(50,50,50,0.6)',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalActivityContainer: {
backgroundColor: colors.colorWhite,
borderColor: colors.colorLightBlack,
borderWidth: 2,
borderRadius: 20,
padding: props.padding ? Number(props.padding) : 10,
maxWidth: '85%',
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'center',
},
headerAirportModal: {
backgroundColor: colors.colorGrey,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingHorizontal: 5,
paddingVertical: 10,
width: '100%',
justifyContent: 'center',
},
searchAirportBarContainer: {
backgroundColor: colors.colorWhite,
height: 40,
},
...
<Modal
onRequestClose={() => props.onRequestClose()}
animationType="fade"
transparent
visible={props.showModal}>
<TouchableWithoutFeedback
onPress={() => {
props.onRequestClose();
}}>
<View style={styles.modalContainer}>
<TouchableWithoutFeedback>
<View style={styles.modalActivityContainer}>
<View style={styles.modalHeader}>
<View style={styles.headerAirportModal}>
<Item style={styles.searchAirportBarContainer} rounded>
<Icon
style={styles.iconSearchAirport}
type="FontAwesome5"
name="search"
/>
<Input
style={styles.searchAirportBarText}
placeholderTextColor={colors.colorLightBlack}
placeholder="Search by Airport, Country or City"
/>
</Item>
</View>
</View>
<View>
<View style={styles.modalHeader}>
<Grid style={styles.headerAirportModalBackground}>
<Text style={styles.headerAirportModalText}>Latest Searches</Text>
<TouchableOpacity style={styles.clearButtonLatestContainer}>
<View>
<Text style={styles.clearButtonAirport}>Clear</Text>
</View>
</TouchableOpacity>
</Grid>
</View>
</View>
<View style={{maxHeight: 250}}>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
<FlatList
data={airportElements}
renderItem={renderAirportItem}
keyExtractor={(item) => item.id}
/>
</View>
</ScrollView>
</View>
<Button
backgroundColor={colors.colorRed}
alignSelf="stretch"
buttonStyle={styles.finishButton}
onPress={() => {
setModalSelectAirport(false);
}}>
Cancel
</Button>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
If I use the FlatList inside the ScrollView like shown above, the code works as intended. However, I got this warning:
VirtualizedLists should never be nested inside plain ScrollViews
with the same orientation - use another VirtualizedList-backed
container instead.
Because of that, I can't use FlatList properly. Also, I have managed to make it work with .map, but it was advised to not use it as I am going to load a list with a lot of elements and that might cause lag.
I have managed to implement FlatList in another way like this:
<View
style={styles.airportLatestSearchListContainer}>
<FlatList
contentContainerStyle={styles.airportLatestSearchlist}
data={airportElements}
renderItem={renderAirportItem}
keyExtractor={(item) => item.id}
/>
</View>
This, however, prevents the user to scroll. The list remains static and the user can't scroll at all.
I have tried using {flex: 1, flexGrow: 1} in the parent View and FlatList itself, both don't work at all, even inside the FlatList container or the style.
Can someone please help me with this one? I really appreciate the time and effort! Thanks!
I've the following layout, and it need scroll when data is greater of screen:
Image:
Code:
export default () => (
<Container hasNavBar={false}>
<View style={{flex: 1}}>
<View style={Styles.container}>
<View style={{
flex: 1, backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 1</Text>
</View>
<View style={{
flex: 2, backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 2</Text>
</View>
</View>
</View>
</Container>
);
Following the documentation of react-native for add scroll I need create a wraper of my layout using ScrollView component, but when added scrollView component my layout broke:
Image:
Code:
export default () => (
<Container hasNavBar={false}>
<ScrollView style={{flex: 1}}>
<View style={Styles.container}>
<View style={{
flex: 1, backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 1</Text>
</View>
<View style={{
flex: 2, backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Area 2</Text>
</View>
</View>
</ScrollView>
</Container>
);
Container Component
<View style={flex: 1}>
{this.props.children}
<DropdownAlert
closeInterval={10000}
updateStatusBar={false}
ref={(ref) => this.dropdown = ref}
onClose={() => null}/>
</View>
How i solve it ?
After re-reading the question with better understanding of your complete code it became obvious that the quickest fix would be to define minHeight on Area 1 and Area 2's views. We can calculate it from window's Dimensions. This allows you to obtain the 33%/66% ratio with minimal content and expand either Area as needed with additional content.
Place this at the top of render():
const { height } = Dimensions.get('window');
Add to Area 1's style
minHeight: height / 3
And to Area 2's style
minHeight: (height / 3) * 2