{

  "Observer":

{

  "Category_2":

[{

  "row1" : "Reading_1",

  "row2" : "Reading_2",

  "row3" : "Reading_3",

  "row4" : "Reading_4"

}]

}

}

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

}

});