How to put a lot of numbers in an array and than use them in flatlist? - react-native

Question

I got this bunch of buttnos and i need to make a horizontal flatlist in react native and i always get some error so can someone help me how to do that? I need to put these buttons in an array so i can put tham in that flatlist i need to make but i am stuck here :D i am new to reactnative so if someone can help me thanks <3
<View style={{flexDirection: 'row', paddingHorizontal: 10, paddingTop: 5}}>
<View style={{width: '15%', paddingRight: 5}}>
<TouchableOpacity
style={[styles.buttonText]}
activeOpacity = {.5}
onPress={ ()=>this.setState({...this.state, location: 'details'}) }>
<Text style={styles.buttonText}>Details</Text>
</TouchableOpacity>
</View>
<View style={{width: '15%', paddingRight: 5}}>
<TouchableOpacity
style={[styles.buttonText]}
activeOpacity = {.5}
onPress={ ()=>this.setState({...this.state, location: 'users'}) }>
<Text style={styles.buttonText}>Users</Text>
</TouchableOpacity>
</View>
<View style={{width: '15%', paddingRight: 5}}>
<TouchableOpacity
style={[styles.buttonText]}
activeOpacity = {.5}
onPress={ ()=>this.setState({...this.state, location: 'assets'}) }>
<Text style={styles.buttonText}>Assets</Text>
</TouchableOpacity>
</View>
<View style={{width: '15%', paddingRight: 5}}>
<TouchableOpacity
style={[styles.buttonText]}
activeOpacity = {.5}
onPress={ ()=>this.setState({...this.state, location: 'sites'}) }>
<Text style={styles.buttonText}>Sites</Text>
</TouchableOpacity>
</View>
<View style={{width: '15%', paddingRight: 5}}>
<TouchableOpacity
style={[styles.buttonText]}
activeOpacity = {.5}
onPress={ ()=>this.setState({...this.state, location: 'cards'}) }>
<Text style={styles.buttonText}>Cards</Text>
</TouchableOpacity>
</View>
</View>

Answer 1

I didn't make the full array, but this should give you the idea:
const buttons = [{title: "Users", location: "users"},{title: "Details", location: "details"}]
<View style={styles.container}>
<FlatList
horizontal
data={buttons}
keyExtractor={(item) => item.location}
renderItem={({item}) =>
<TouchableOpacity
style={[styles.buttonText]}
activeOpacity = {.5}
onPress={ ()=>this.setState({...this.state, location: item.location}) }>
<Text style={styles.buttonText}>{item.title}</Text>
</TouchableOpacity>
}
/>
</View>
If you titles and locations were always just capitalized versions of each other, you could simplify the array even further.

Answer 2

The exact code example is available directly on first load, on the flatlist documentation page.
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;
You just need to add the props horizontal in the Flatlist component to make it horizontal.