Array JSON with ListView in React-Native

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>
        )
    }
}