Can I pass an array to a React Native ScrollView? - react-native

Question

I'm trying to create a scrollable view using React Native's ScrollView with code below
import React from 'react';
import { Image, ScrollView, Text, StyleSheet, View, Dimensions } from 'react-native';
const styles = StyleSheet.create({
scrollView: {
height: '100%',
width: '100%',
flexDirection: 'column',
},
item: {
height: '20%',
width: '100%',
},
});
const data = [];
for (let i = 0; i < 30; i++) {
const datum = (
<View style={styles.item}>
<Text style={{ fontSize: 30 }}>{i.toString()}</Text>
</View>
);
data.push(datum);
}
const App = () => (
<ScrollView style={styles.scrollView}>
{data}
</ScrollView>
);
export default App;
Snack URL: https://snack.expo.io/rp6!W!HZm
When I run this code in Snack, seems like I cannot scroll down to the second page. I've checked the official documentation of ScrollView and it is passing ReactElement individually into the view.
RN official doc: https://reactnative.dev/docs/using-a-scrollview
Does this mean I cannot pass an array of elements as the children of a ScrollView? Is there anything I'm missing here?

Answer 1

This should do exactly what you're asking for!
The main thing happening here is the data mapping in the line
{data.map((item, index) => {
return (<View/>)
}}
where you are defining what is inside the scrollview... also your styling was a tad off so I touched it up.
Hope this helps!
import React from 'react';
import { ScrollView, Text, StyleSheet, View, Dimensions, SafeAreaView, TouchableOpacity } from 'react-native';
const { height } = Dimensions.get('screen');
function App() {
const data = [];
for (let i = 0; i < 30; i++) {
data.push('arbitrary datam #' + (i + 1));
}
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView style={styles.scrollView}>
{data.map((item, index) => {
return (
<View key={index} style={styles.item}>
<Text style={{ fontSize: 30 }}>{item}</Text>
</View>
);
})}
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
scrollView: {
height: height,
},
item: {
height: height * 0.2,
width: '100%',
},
});
export default App;

Answer 2

Use flat list:
import React, {Component} from 'react';
import{AsyncStorage, View, ScrollView, FlatList} from 'react-native';
import {Text, List} from 'native-base';
class Notes extends Component {
constructor(props) {
super(props);
this.state = {
data: []
}
}
render () {
return (
<ScrollView>
<View style={{margin: 5, marginTop: 5}}>
<List>
<FlatList
data={this.state.data}
renderItem={({item, index}) =>
<View style={styles.item}>
<Text style={{ fontSize: 30 }}>{item.toString()}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</List>
</View>
</ScrollView>
)
}
}
export default Notes;