Example 1: how to use flatlist keyextractor
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
renderItem={
({item}) => <Text>{item.name}</Text>
}
keyExtractor={(item, index) => index.toString()}
/>
Example 2: react native flatlist
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
Example 3: react native stacknavigator
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Example 4: make a fixed list in react native
export default function App() {
const [enteredGoal,setEnteredGoal] = useState('');
const [courseGoals, setCourseGoals] = useState([]);
const goalInputHandler = (enteredText) => {
setEnteredGoal(enteredText);
}
const addGoalHandler = () => {
setCourseGoals(currentGoals =>
[...currentGoals,enteredGoal]
)
}
return (
<View style={styles.screen}>
<View>
<View style={styles.otherview}>
<TextInput
placeholder='A goal'
style={styles.textinput}
onChangeText={goalInputHandler}
value={enteredGoal}/>
<Button title='Add' onPress={addGoalHandler}/>
</View>
</View>
<ScrollView>
{courseGoals.map((goal) =>
<View key={goal} style={styles.listItem}>
<Text>{goal}</Text>
</View>)
}
</ScrollView>
</View>
Example 5: flatlist onrefresh react native
const [isFetching, setIsFetching] = useState(false);
const fetchData = () => {
dispatch(getAllDataAction(userParamData));
setIsFetching(false);
};
const onRefresh = () => {
setIsFetching(true);
fetchData();
};
<FlatList
data={topics}
keyExtractor={(item) => item.id.toString()}
renderItem={renderItem}
onRefresh={onRefresh}
refreshing={isFetching}
progressViewOffset={100}
ListEmptyComponent={<Empty message="No data found." />}
/>;
Example 6: flatlist react native horizontal
<FlatList
data={this.state.newsFeed}
refreshing={this.state.refreshing}
horizontal={this.state.isHorizontal}
ref={ref => { this.newsFeedListRef = ref; }}
renderItem={this.renderNewsFeedRow.bind(this)}
keyExtractor={(item, index) => `feed_${index}`}
onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />