Section list using local json react native

Question

I have a local json file called Observer.json

    {
      "Observer": {
       "Category_2":[{
         "row1" : "Reading_1",
         "row2" : "Reading_2",
         "row3" : "Reading_3",
         "row4" : "Reading_4"
       }]
      }
    }

I want to display this data using a section list in react native. There will be one section with title Category_2 and 4 rows ie. Reading_1 etc. Please help I am unable to view any data.

Here is the code

    import React, { Component } from 'react';
    import { AppRegistry, View, Text,TouchableOpacity, ListView, StyleSheet,SectionList } from 'react-native';
    import { createStackNavigator,createAppContainer } from "react-navigation";

    const data_Custom = require('./Observer.json');

    class RenderList extends Component {

      static navigationOptions = {
        title: 'List Items'
      };

      constructor() {
      super();
      var ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
        sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
      });

      this.state = {
      dataSource: ds.cloneWithRowsAndSections({dataBlob: data_Custom}, {sectionIdentities:["Category_2"]}, {rowIdentities:["row1","row2","row3","row4"]} ),
      };
    }

     renderRow(custom){
      return (
       <View >
         <Text style = { styles.container2 }>
          {custom.rowIdentities}
         </Text>
       </View>
      );
     }

     renderSectionHeader(custom_s) {
      return (
        <Text style = { styles.container2 }>
         {custom_s.sectionIdentities}
        </Text>
      )
     }

     render() {
      return (
        <ListView
         dataSource={this.state.dataSource}
         renderRow={this.renderRow.bind(this)}
         renderSectionHeader={this.renderSectionHeader}
        />
      );
     }
    }

    const App = createStackNavigator({
      List: { screen: RenderList },
    });

    export default createAppContainer(App);

    const styles = StyleSheet.create({
      container1:{
       flex: 1
      },
      container2:{
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       paddingHorizontal: 15,
       fontSize: 18
      },
      item:{
       padding: 15
      },
      text:{
       fontSize: 18
      },
      separator:{
       height: 2,
       backgroundColor: 'rgba(0,0,0,0.5)'
      }
    });

Answer 1

Can you try the following?

First change the json file as the follow,

 [
   {
      "title":"Observer",
      "data":[
         {"row" : "Reading_1"},
         {"row" : "Reading_2"},
         {"row" : "Reading_3"},
         {"row" : "Reading_4"}
       ]
    }
  ...
 ]

Then use SectionList instead of ListView because ListView is deprecated.

import React, { Component } from 'react';
    import { AppRegistry, View, Text,TouchableOpacity, StyleSheet,SectionList } from 'react-native';
    import { createStackNavigator,createAppContainer } from "react-navigation";

    const data_Custom = require('./Observer.json');

    class RenderList extends Component {

     static navigationOptions = {
       title: 'List Items'
     };

     constructor() {
      super();
     this.state = {
      dataSource: data_Custom,
     };
    }

     renderRow(item){
      return (
       <View>
         <Text style = { styles.container2 }>
          {item.row}
         </Text>
       </View>
      );
     }

     renderSectionHeader(title) {
      return (
        <Text style = { styles.container2 }>
         {title}
        </Text>
      )
     }

     render() {
      return (
        <SectionList
         renderItem={({item, index, section}) => this.renderRow(item)}
         renderSectionHeader={({section: {title}}) => this.renderSectionHeader(title)}
         sections={this.state.dataSource}
         keyExtractor={(item, index) => item + index}
        />
      );
     }
    }

    const App = createStackNavigator({
      List: { screen: RenderList },
    });

    export default createAppContainer(App);

    const styles = StyleSheet.create({
      container1:{
       flex: 1
      },
      container2:{
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       paddingHorizontal: 15,
       fontSize: 18
      },
      item:{
       padding: 15
      },
      text:{
       fontSize: 18
      },
      separator:{
       height: 2,
       backgroundColor: 'rgba(0,0,0,0.5)'
      }
    });