My objective here is that I have 2 screens and I want to show the output whenever I click using TouchableOpacity. For example, the first screen will show a Flatlist of the title from my data First,Second and Third. So what I want it to do is if I press First, it will move me to another screen and show the output FlatList a,b,c. If I press Second, it will move me to another screen and show 1,2,3. So I am not sure how to move to another screen using TouchableOpacity
This is my data
const Clusdata =
[
{ title: 'First',
example:
[
{name: 'a'},
{name: 'b'},
{name: 'c'},
],
},
{ title: 'Second',
example:
[
{name: '1'},
{name: '2'},
{name: '3'},
],
},
{ title: 'Third',
example:
[
{name: '4'},
{name: '5'},
{name: '6'},
],
}
]
This is my Flatlist for the first screen that I can show
export default class Cluster1 extends Component{
render() {
return (
<View>
<FlatList
data={ClusData}
renderItem={({ item, index }) => {
return <FlatListItem item={item} index={index} />;
}}
/>
</View>
);
}
}
class FlatListItem extends Component {
render() {
return (
<View>
<View>
<TouchableOpacity>
<Text>{this.props.item.title}</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
I created another class but I don't know what to store inside so I left it blank
class FlatlistExample extends Component {
}
