How to check FlatList if its null or not - reactjs

Question

How can I check the FlatList if it's null or not and if null I will display something like No Available Booking's? I have tried the code below using short hand operator but it's not working.
{bookings == null ?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>No Availabe Booking's Yet!</Text>
</View>
:
<FlatList
data={bookings}
renderItem={flatListItem}
refreshing={refresh}
onRefresh={refreshSummary}
keyExtractor={item => item._id}
/>
}

Answer 1

Instead of making checks on the data and conditionally rendering the FlatList and the empty list view, you can use the existing prop provided by the FlatList i.e. ListEmptyComponent. You can read more about the FlatList and its other props in the official documentation of the React-Native here.
A typical usage of the ListEmptyComponent could be:
import React, { PureComponent } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
export default class BookingsList extends PureComponent {
state = {
bookings: [
// {
// _id: 1,
// title: 'I am a booking'
// }
],
refreshing: false
};
keyExtractor = (item) => String(item._id);
refreshSummary = () => {};
renderBookings = ({ item }) => (
<View style={styles.bookingCard}>
<Text style={styles.title}>{item.title}</Text>
</View>
);
renderItemSeparatorComponent = () => <View style={styles.separator} />;
//render the empty list component in case the data array for the FlatList is empty
renderListEmptyComponent = () => (
<View style={styles.emptyListContainer}>
<Text style={styles.noBookingsFound}>
No Availabe Booking's Yet!
</Text>
</View>
);
render() {
const { bookings, refreshing } = this.state;
return (
<FlatList
data={bookings}
refreshing={refreshing}
renderItem={this.renderBookings}
onRefresh={this.refreshSummary}
ListEmptyComponent={this.renderListEmptyComponent} //<==== here
ItemSeparatorComponent={this.renderItemSeparatorComponent}
contentContainerStyle={styles.list}
keyExtractor={this.keyExtractor}
/>
);
}
}
const styles = StyleSheet.create({
bookingCard: {
backgroundColor: 'white',
padding: 10,
marginTop: 2,
borderBottomWidth: 0.5
},
title: {
fontSize: 16,
fontWeight: 'bold'
},
emptyListContainer: {
alignItems: 'center',
justifyContent: 'center',
},
noBookingsFound: {
fontSize: 16,
},
separator: {
height: 15
},
list: {
paddingHorizontal: 15,
paddingBottom: 40
}
});

Answer 2

Would booking not be an Array for a flatlist ?
return (
{bookings !== undefined && bookings.length > 0 ?
<View>
<FlatList
data={bookings}
renderItem={flatListItem}
refreshing={refresh}
onRefresh={refreshSummary}
keyExtractor={item => item._id}
/>
</View>
:
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>No Availabe Booking's Yet!</Text>
</View>
}
);
** Edited as I think I missed your point!
You can return a conditional view in React Native as follows
return (
<View>
{state.someVar == null ?
(<ACOMPONENT />)
:
(<ADIFFCOMPONENT />)
}
</View>
);
Hopefully that's a better response.

Answer 3

u can use listemptycomponent
Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element.
https://reactnative.dev/docs/flatlist#listemptycomponent
<FlatList
data={bookings}
renderItem={flatListItem}
refreshing={refresh}
onRefresh={refreshSummary}
keyExtractor={item => item._id}
ListEmptyComponent={<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>No Availabe Booking's Yet!</Text>
</View>}
/>

Answer 4

{ bookings && Array.isArray(bookings) ? (
<FlatList
data={bookings}
renderItem={flatListItem}
refreshing={refresh}
onRefresh={refreshSummary}
keyExtractor={item => item._id}
/>
) : (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.title}>No Availabe Booking's Yet!</Text>
</View>
)
}