This is the code but I cant write 1 to 100 like that so I need a loop but there are some errors about which I don't know anything I don't know how to resolve this issue. Help me to get through this...
<ScrollView
vertical={true}
style={styles.scroller}
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}>
<Text style={styles.welcome}> 1</Text>
<Text style={styles.welcome}> 2</Text>
<Text style={styles.welcome}> 3</Text>
<Text style={styles.welcome}> 4</Text>
<Text style={styles.welcome}> 5</Text>
<Text style={styles.welcome}> 6</Text>
<Text style={styles.welcome}> 7</Text>
<Text style={styles.welcome}> 8</Text>
<Text style={styles.welcome}> 9</Text>
<Text style={styles.welcome}> 10</Text>
</ScrollView>
The above code is working but, If I use for loop instead of this 'Text' thing I get the error.
for (let i = 0; i < 100; i++) {
<Text>{i}</Text>
Error on the number '100' it says: Identifier expected.
For a larger data set it is advised to use a FlatList in react-native. This is done relatively easy by introducing a state that holds the data.
Here is a minimal example.
const FlatListExample = (props) => {
// prefill the state with 100 objects
const [data, setData] = useState(Array(100).fill().map((_, i) => i+1))
return (
<FlatList
data={data}
keyExtractor={(item) => item.toString()}
renderItem={({item, index}) => {
return <Text style={styles.welcome}>{item}</Text>
}}
/>
)
}
A FlatList is a convenient wrapper around ScrollView and is generally speaking the better choice for larger data sets when it comes to performance.
If you still want to use a ScrollView, then you can just use the map function as follows.
const data = useMemo(() => Array(100).fill().map((_, i) => i+1), [])
<ScrollView
style={styles.scroller}>
{
data.map(i => <Text style={styles.welcome}>{i}</Text>)
}
</ScrollView>