Array JSON with ListView in React-Native - json

Question

I have an issue, I'm trying to make a little database offline inside a JSON, like this:
[
{
title: "Carros",
carros: [
{
nome: "Ferrari"
}
]
},
{
title: "Motos",
carros: [
{
nome: "Suzuki"
}
]
}
];
From now, my HomeScreen lists the categories as "Carros" and "Motos", but when I want to enter in subtopic like "carros", but I can't.
Currently using a ListView
{ list.map((item, i) => (
<View>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Listagem", {
itemName: item.title
})
}
>
<ListItem key={item.title} title={item.title} />
</TouchableOpacity>
</View>
))
}
How to get child items?

Answer 1

Carros -> carros
Motos -> carros ???
Motos -> motos
If you only have "carros", there are no "motos". Hope you get my point.

Answer 2

In order to get the carros Object inside the Listagem screen you need to pass it as an prop.
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Listagem", {
itemName: item.title,
childItems: item.carros
})
}
>
In you Listagem screen you will get these properties.
constructor() {
super();
const { navigation } = this.props;
const itemName = navigation.getParam('itemName', 'defaultName');
const childItems = navigation.getParam('childItems', []);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(childItems),
};
}
render(){
return(
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData.nome}</Text>}
/>
)
}

Answer 3

You can do this in your home screen:
import React, { Component } from 'react';
import {FlatList, ScrollView} from 'react-native';
import { List, ListItem } from 'react-native-elements'; //this is not necessary. You may use it for aesthetic purposes only.
const cars = [
{
title: "Carros",
carros: [
{
nome: "Ferrari"
}
]
},
{
title: "Motos",
carros: [
{
nome: "Suzuki"
}
]
}
];
export default class Home extends Component {
renderCars() {
return (
<List
containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}
>
<FlatList
data={cars}
keyExtractor={item => item.title}
renderItem={({ item }) => (
<ListItem
titleStyle={yourstyles.title}
hideChevron
title={item.title}
onPress={() => this.props.navigation.navigate(
'ChildPage',
{
cars: item //pass the entire item as a prop. This way you will have all its subtopics in your child page
}
)}
/>
)}
/>
</List>
)
}
render() {
return (
<ScrollView>
{this.renderCars()}
</ScrollView>
)
}
}
In your child page where you want to list the subtopics of 'carros' for example. Remember you passed the entire item as a prop, so that prop will be available for you in the child page.
So now you can do this in your child page:
//ChildPage
import React, { Component } from 'react';
import {FlatList, ScrollView, View, Text} from 'react-native';
import { List, ListItem } from 'react-native-elements'; //this is not necessary. You may use it for aesthetic purposes only.
export default class ChildPage extends Component {
renderSubtopics() {
const { cars } = this.props.navigation.state.params; // remember the entire item you passed down from Home, we will use it here
return (
<List
containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}
>
<FlatList
data={cars.carros}
keyExtractor={item => item.nome}
renderItem={({ item }) => (
<ListItem
titleStyle={yourstyles.title}
hideChevron
title={item.nome}
onPress={() => //do whatever )}
/>
)}
/>
</List>
)
}
render() {
return (
<ScrollView>
<View>
<Text>
{this.props.navigation.state.params.cars.title}
<Text>
</View>
{this.renderSubtopics()}
</ScrollView>
)
}
}