FlatList inside Tab ScrollView - react-native

Question

I'm trying to create a FlatList using the highScores' keys and values put them inside my ScrollView, but is not rendering... What is wrong?
import React from 'react';
import {
Platform,
ScrollView,
StyleSheet,
Text,
View,
FlatList,
Row
} from 'react-native';
export default function HomeScreen() {
const highScores = { '1': 'a', '2': 'b' };
return (
<View style={styles.container}>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}>
<View>
<FlatList
data={highScores}
renderItem={
({ item, index }) =>
<Row highScore={item} index={index} key={index} />
}
/>
</View>
);
}
As you can see I've created one View to render his items. I not getting any error but it doesn't works. Somebody may help me please? Thanks!

Answer 1

Actually, there is a lack of explanation in your question. Though, I answer the relative problems you are facing.
First, Flatlist is also a scrollable component, so using flat list inside the scroll view that doesn't make logic. If you are trying to implement nested scroll view, then you can proceed with it.
Second, No tags were closed in the code. It's incomplete.
Last, you have given JSON object to the Flatlist data props, flatlist can't iterate the object. So you should give an array to make items in the array to be rendered.
The right way to give data props:
const highScores = [
{ '1': 'a' },
{ '2': 'b' },
{ '3': 'c' }
];
Solution to your problem:
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import Constants from 'expo-constants';
const highScores = [{ '1': 'a'}, {'2': 'b' }];
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView>
<View style={{ width: '100%', height: '100%' }}>
<FlatList
data={highScores}
renderItem={({ item, index }) => <Text>{JSON.stringify(item)}</Text>}
/>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Cleared ?? If yes, upvote pls