We Keep Coding

React Native FlatList: render conditional style with dynamic data

I am new to React native and implementing FlatList where I am facing some issues with dynamic data. I have a list of total seats and booked seats.
this.state = {
seats: props.route.params.seats,
reservedSeats: props.route.params.Reserved,
date: new Date()
}
Following is the FlatList i have implemented
<FlatList style={styles.flatListArea1}
contentContainerStyle={{margin:0}}
data={this.state.seats}
numColumns={4}
showsHorizontalScrollIndicator={false}
renderItem={({item}) =>
<View style={styles.containerIcons} key={item}>
<TouchableOpacity style={this.state.selectedItem === item ? styles.menuSelected : styles.menuTop } onPress={ () => this.selectSeat(item)}>
<View style={styles.buttons}>
<Text style={styles.HallsText} key={item.key}>{item.Id}</Text>
</View>
</TouchableOpacity>
</View>}
/>
On Click event, I am able to change the color. I appreciate if someone can help to understand, How we can re-render FlatList based on dynamic data presented in reserved state. For example. for today, out of 5 seats 3 are booked. Those should be gray and others should be red.
I appreciate your help on this.
Regards,

You firstly need a method that tells if a seat is available or not.
isReserved = (item) => {
return this.state.reservedSeats.filter(seat => seat.Id ==item.Id).length > 0;
}
Then you change the appearance of your list like this
<FlatList
style={styles.flatListArea1}
contentContainerStyle={{ margin: 0 }}
data={this.state.seats}
numColumns={4}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
<View style={[styles.containerIcons, { backgroundColor: isReserved(item) ? "#FAFAFA" : "white" }]} key={index}>
<TouchableOpacity
style={this.state.selectedItem === item ? styles.menuSelected : styles.menuTop}
onPress={() => this.selectSeat(item)}
disabled={isReserved(item)}
>
<View style={styles.buttons}>
<Text
style={[styles.HallsText, { backgroundColor: isReserved(item) ? "#CCC" : "white" }]}
key={item.key}
>
{item.Id}
</Text>
</View>
</TouchableOpacity>
</View>
)}
/>;
Pay attention to the key attribute

How to add a popup modal when selecting a list item react native and show their details

As title says, I need to create a modal popup for every list item for the selected sizes to be displayed. I'm using the react-native-popup-dialog but without results. Could you help me? Here's my code:
step1 = () => {
return (
<View style={{ flex: 8}}>
<Text h3 style={{ ...styles.title, marginVertical: 10.0 }}>{this.state.user=="User"?"Size":"CargoSize"}</Text>
<ScrollView>
<View style={{ marginHorizontal: 16.0 }}>{
this.state.size.map((l, i) => (
<ListItem key={i} onPress={() => this.setState({sizeSelected: i, sizeName: l.title, sizeId: l.id})} underlayColor='transparent'
containerStyle={{backgroundColor: this.state.sizeSelected==i?'#F76858':'white', borderWidth: 1.0,
borderColor: '#707070', marginBottom: 10.0, paddingVertical: 5.0, paddingHorizontal: 40.0}}>
<ListItem.Content>
<View style={{
flexDirection: 'row', alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={styles.textSize}>{l.title}</Text>
<Text style={{ fontSize: 16 }}>{l.example}</Text>
</View>
</ListItem.Content>
</ListItem>
))
}</View>
</ScrollView>
</View>
);
}

I believe you can declare a single modal in your list component and show or hide the modal when the user presses the listItem. Also, make the pressed item active and pass the item to your modal so that the modal can show the details of the active item.
App.js
export default function App() {
const [modalVisible, setModalVisible] = React.useState(false);
const [activeItem, setActiveItem] = React.useState(null);
const onPress = (item) => {
setActiveItem(item)
setModalVisible(true)
}
const renderItem = ({ item }) => (
<TouchableOpacity onPress={()=>onPress(item)}>
<Item title={item.title} />
</TouchableOpacity>
);
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
<Popup modalVisible={modalVisible} setModalVisible={setModalVisible} activeItem={activeItem} />
</View>
);
}
Modal.js
export default function Popup({modalVisible, setModalVisible, activeItem}) {
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>{activeItem?.title}</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
onPress={() => {
setModalVisible(!modalVisible);
}}>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</View>
);
}
Here is a working demo for you.

I made something similar in my react-native project and do this:
Made with {useState} the variables i need in my modal, example, the name of my component
Wrap the ListItem component in a Pressable component
Put the onPress={() => {//Put your code here}} function, inside you will put the SetVariable of the variable you want in the modal
The Pressable will update the variable with the wich you want in the modal

Why is React.memo not working as expected?

Right so I have a sports app and im just displaying the fixtures for each team like so:
export const Fixtures = ({ fixtures }) => {
console.log('rendering again')
return (
<View>
<Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', marginBottom: 10 }}>
Gameweek Fixtures
</Text>
<View style={styles.container}>
<View>
{fixtures.map((match: any) => (
<View key={match.home} style={styles.match}>
// displaying fixtures here
</View>
))}
</View>
</View>
</View>
)
}
I'm displaying the images for the logo for each team above and I was noticing a flicker and when ever this component renders. and it renders in a top nav view. i.e. I click on the fixtures in the navbar and it shows this component.
I don't like the flicker so I'm trying to make it more performant and decided to use react.memo
I wrapped the above in React.memo like so:
export const Fixtures = React.memo(({ fixtures }) => {
console.log('rendering again')
return (
<View>
<Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', marginBottom: 10 }}>
Gameweek Fixtures
</Text>
<View style={styles.container}>
<View>
{fixtures.map((match: any) => (
<View key={match.home} style={styles.match}>
// displaying fixtures here
</View>
))}
</View>
</View>
</View>
)
},
(prevProps, nextProps) => {
console.log(prevProps, nextProps, 'the propss')
return true // props are not equal -> update the component)
})
but for some reason it is not logging the console.log when the component renders but it does log the line at the top that says: console.log('rendering again').
why is it not logging? and what can i do to prevent this flicker on every render? I just want to display the fixtures, instead it flashes, flickers then shows them (might be ok on first render for this but not on every subsequent one)

React Native touchable opacity pressing after 2 to 5 seconds inside a FlatList

Good day,
I'm working on a small react native project, I'm getting data from an API, but I noticed that every time I populate the state with data from the API, the mobile app becomes slow, and when I press the Touchable Opacity inside a child element of that Flatlist it takes around 5 seconds to respond.
//Don't worry it's all wrapped in a parent container
<View style={globalStyles.searchContainer}>
<TextInput style={globalStyles.textInput} placeholder="Who are you looking for? (e.g. Plumber)" onChangeText={setJob}/>
<TouchableOpacity style={globalStyles.searchButton} onPress={handleSearch}>
<Text style={globalStyles.text}>Search</Text></TouchableOpacity>
</View>
<FlatList
data={workers}
keyboardShouldPersistTaps="handled"
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<View style={globalStyles.workerCard}>
<Image
style={globalStyles.thumbnail}
source={{uri: globalConfig.api_url + item.profile_picture}}
/>
<View style={globalStyles.workerDetails}>
<Text style={globalStyles.textDetails}>Name: {`${item.first_name} ${item.surname}`}</Text>
<Text style={globalStyles.textDetails}>Gender: {item.gender}</Text>
<Text style={globalStyles.textDetails}>Job: {item.job}</Text>
<Text style={globalStyles.textDetails}>Price: {`R${item.price}`}</Text>
<Text style={globalStyles.textDetails}>Transport fee: {`R${item.transport}`}</Text>
<Text style={globalStyles.textDetails}>Other Job: {(item.service1) ? item.service1 : ""} </Text>
<Text style={globalStyles.textDetails}>Other Job: {(item.service2) ? item.service2 : ""} </Text>
<Text style={globalStyles.textDetails}>Online: {(item.available) ? "Yes" : "No"} </Text>
<TouchableOpacity style={globalStyles.searchButton} onPress={() => bookWorker(item)}>
<Text style={globalStyles.text}>Book</Text>
</TouchableOpacity>
</View>
</View>
)}
/>

Add an "extraData" property to your flatList. This will tell your flatList to re-render on data changes. (https://reactnative.dev/docs/flatlist#extradata)
<FlatList
data={workers}
keyboardShouldPersistTaps="handled"
keyExtractor={(item, index) => index.toString()}
extraData = {this.state.refreshing}
renderItem={({ item }) => ...
Here "this.state.refreshing" could be a boolean or an incremented integer that is updated each time you call the api.
Alternatively, and most recommended, you could add a onRefresh property and move your api calls there. (https://reactnative.dev/docs/flatlist#onrefresh). This would handle all the flatList changes for you once you update your "workers" array.

I figured it out, there was a function that was being called somewhere in the component, I removed it and now it's working just fine.

Show Empty list message only after Loader get ended in React Native using Flat list

I have a flat list, which gets its data source as a state. Actually, this data is from firebase, and i have been using redux. So, the data is fetched in the actions, and using callback i get the data to state.
What i want to achieve is, when there is no data found from the api, An empty list message should be show in the view. Actually , i achieved this using "ListEmptyComponent". But whats happening is the screen starts with empty message, and the spinner loads below it, and then if data found the message goes away as well as spinner.
But, what i wanted is, when the view gets rendered the first thing everyone should see is the spinner, and then if data empty spinner hides then empty list message displays.
How to achieve this ?
My Action :
export const fetchOrderHistory = (phone, callback) => {
return (dispatch) => {
dispatch({ type: START_SPINNER_ACTION_FOR_ORDER_HISTORY })
firebase.database().ref('orders/'+phone)
.on('value', snapshot => {
const snapShotValue = snapshot.val();
callback(snapShotValue);
dispatch ({ type: ORDER_HISTORY_FETCHED , payload: snapshot.val()});
dispatch({ type: STOP_SPINNER_ACTION_FRO_ORDER_HISTORY })
});
};
};
My Flat List & spinner:
<FlatList
data={this.state.historyOfOrders}
keyExtractor={item => item.uid}
ListEmptyComponent={this.onListEmpty()}
renderItem={({ item }) => (
<Card
containerStyle={{ borderRadius: 5 }}
>
<View style={styles.topContainerStyle}>
<View>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('ViewOrderScreen', {itemsOfOrder: item}) }
>
<View style={styles.viewOrderContainer}>
<View style={styles.viewOrderTextContainer}>
<Text style={styles.viewOrderTextStyle}>View Order</Text>
</View>
<Icon
name='ios-arrow-forward'
type='ionicon'
color='#ff7675'
/>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</Card>
)}
/>
{this.props.isSpinnerLoading &&
<View style={styles.loading}>
<ActivityIndicator size="large" color="#03A9F4"/>
</View> }
My Call back at componentWillMount which set state:
componentWillMount() {
this.props.fetchOrderHistory((this.props.phone), (snapShotValue)=> {
const userOrderHistory = _.map(snapShotValue, (val,uid) => ({uid, ...val}))
this.setState({ historyOfOrders: userOrderHistory })
});
}
My EmptyList Message:
onListEmpty = () => {
return <View style={{ alignSelf: 'center' }}>
<Text style={{ fontWeight: 'bold', fontSize: 25 }}>No Data</Text>
</View>
}
My State:
state = { historyOfOrders: "" }
I am getting the spinner values from the reducers, using mapStateToProps.
Kindly Guide me, through

you have to do two things for that.
First, show Flatlist only if the loader is stopped. Second, set default value of this.state.historyOfOrders is null and check if this.state.historyOfOrders not null then only show Flatlist.
Here is a code:
{(!this.props.isSpinnerLoading && this.state.historyOfOrders != null) ?
(
<FlatList
data={this.state.historyOfOrders}
keyExtractor={item => item.uid}
ListEmptyComponent={this.onListEmpty()}
renderItem={({ item }) => (
<Card containerStyle={{ borderRadius: 5 }}>
<View style={styles.topContainerStyle}>
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('ViewOrderScreen', {itemsOfOrder: item}) }>
<View style={styles.viewOrderContainer}>
<View style={styles.viewOrderTextContainer}>
<Text style={styles.viewOrderTextStyle}>View Order</Text>
</View>
<Icon
name='ios-arrow-forward'
type='ionicon'
color='#ff7675'
/>
</View>
</TouchableOpacity>
</View>
</View>
</Card>
)}
/>
) : null
}
With this condition, even if you want loader above Flatlist you can do that.

The path you should take is rendering only the spinner when the loading flag is set and rendering the list when loading flag is false.
Your render method should be like below
render()
{
if(this.props.isSpinnerLoading)
{
return (<View style={styles.loading}>
<ActivityIndicator size="large" color="#03A9F4"/>
</View> );
}
return (/** Actual List code here **/);
}