0

Does anyone has any example of List View that leads to another listview so for e.g if I have the listview that has following things:

Single Family Home


Mulitplex


Duplex


4 bedroom Home

if someone selects single 4 Bedroom Home, I want the user to lead to another List view that shows the places where the 4 bedroom home is available. How can I do this:

Circle Road


Orange


River Road


Ring Road

I am using two JSON file to achieve what I am trying o do:

[

{
     "id":0,
      "House_Type": "2 Bedroom"
},
  {
    "id":1,
    "House_Type": "3 Bedroom"
  },

  {
    "id":2,
     "House_Type": "Condo"
  },
  {
    "id":3,
    "House_Type": "4 Bedroom"
  },
    {
     "id":4,
    "House_Type": "Duplex"
  },
    {
    "id":5,
    "House_Type": "Multiplex"
  }
]

Second JSON file

[
  {
     "id": 0,
      "PID" : 0,
      "Address": "123 Test Drive",
      "Location": "Orange",
      "Zip": 123456"
 },

  {

    "id": 1,
    "PID" : 0,
     "Address" : "234 Test Drive2",
     "Location": "Ring Road",
     "Zip": "226106"
},

{
     "id": 2,
    "PID" : 0,
     "Address" : "111 Test Drive2",
     "Location": "Bell Road",
     "Zip": "226172"
},

{
     "id": 3,
    "PID" : 0,
     "Address" : "111 Test Drive2",
     "Location": "Bell Road",
     "Zip": "226172"
},
{
     "id": 1,
    "PID" : 1,
     "Address" : "111 Test Drive2",
     "Location": "Bell Road100",
     "Zip": "226172"
},
{
     "id": 4,
    "PID" : 1,
     "Address" : "222 Test Drive3",
     "Location": "Ring Road",
     "Zip": "226173"
},
{
     "id": 5,
    "PID" : 1,
     "Address" : "333 Test Drive3",
     "Location": "Ring100 Road",
     "Zip": "221112"
},
{
     "id": 6,
    "PID" : 1,
     "Address" : "333 Test Drive3",
     "Location": "Ring100 Road",
     "Zip": "221113"
},
 {
     "id": 7,
    "PID" : 2,
     "Address" : "444 Test Drive3",
     "Location": "Shepard Road",
     "Zip": "221113"
},  
{
     "id": 8,
    "PID" : 2,
     "Address" : "555 Test Drive3",
     "Location": "Shepard1000 Road",
     "Zip": "221141"
},   

I want something like this:

First List View:

2 Bedroom


3 Bedroom


Condo


4 Bedroom


Duplex


Multiplex


when user selects 2 Bedroom then he/she will be redirected to another list View like below:

123 Test Drive
  Orange, 123456
____________________

 234 Test Drive2
  Ring Road, 226106
_____________________

111 Test Drive2
Bell Road, 226172
__________________

All the above has the Parent ID (PID) of 0 that matches the ID of first JSON file.

if user selects 3 Bedroom then he/she will be redirected to another list View like below:

111 Test Drive2
Bell Road100, 226172
_______________________________

222 Test Drive3
Ring Road, 226173
_____________________________

333 Test Drive3
Ring100 Road, 221112
________________________

In the above case the parent(PID) is 1 that matches the ID of first JSON file.

I have around 100 records in my first JSON file and around 300 records in my second JSON file. I gave some sample data above.

Below is the code and the error description. I am getting an error in the code:

import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import  initialData  from './src/screens/houses';
import  houseDetails  from './src/screens/houseDetails';

export default class Information extends Component {

  constructor(props) {
      super(props);
      this.state = {
          initialDtata: initialData(),
          subObjects: [],
          selected_topic_id: -1,
      }
   }

  listView(){
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var tabsData = ds.cloneWithRows(this.state.initialDtata)

        return(
            <View>
                <ListView
                    style={{marginVertical: 5}}
                    enableEmptySections={true}
                    dataSource={tabsData}
                    renderRow={(rowData, sectionID, rowID) => 
                      this.displayHome(rowData, rowID)}
                    />
            </View>
        )
  }

  displayHome(rowData, rowID) {
      return(
          <View style={{flex:1}}>
              <TouchableOpacity onPress={() => this.onHomeSelection(rowID)}>
                  <View style={{marginVertical: 15, marginHorizontal:30, justifyContent: 'space-between', flexDirection: 'row',alignItems: 'center'}}>
                      <Text style={{fontSize: 10, fontWeight: 'bold'}}>{rowData.House_Type}</Text>
                  </View>
              </TouchableOpacity>
              {this.state.selected_topic_id === Number(rowID) ? this.renderQuestionList(rowData.id) : null}
          </View>
      );
   }

   onHomeSelection(rowID) {
       let selected_topic_id = this.state.selected_topic_id === Number(rowID) ? -1 : Number(rowID);
        this.setState({ 
            subObjects: houseDetails(), 
            selected_topic_id: selected_topic_id, 
        })
    }

    renderQuestionList(rowID) {
        let selected_array = [];
        this.state.subObjects.map((i) => { if(i.PID === rowID) return selected_array.push(i)})

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        let tabsData = ds.cloneWithRows(selected_array)
        return(
            <View>
                <ListView
                    style={{marginVertical: 5}} 
                    enableEmptySections={true}
                    dataSource={tabsData}
                    renderRow={(rowData, sectionID, rowID) => 
                       this.renderQuestion(selected_array, rowID)} 
                />
             </View>
         )
     }

     renderQuestion(rowData, rowID) {
         let address = rowData.map((i) => {return i.Address})
         return(
             <View style={{flex:1}}>
                 <TouchableOpacity>
                     <View style={{marginVertical: 5, marginLeft:35, marginRight: 35}}>
                         <Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>{address}</Text>
                     </View>
                 </TouchableOpacity>
              </View>
         );
     }

     render() {
         return (
             <View style={{ flex:1, backgroundColor: 'white' }}>
                 {this.listView()}
             </View>
         );
     }
  }






module.exports = {
initialData: function() {
    return (
        initialDtata = [
            {
                "id":0,
                "House_Type": "2 Bedroom"
            },
            {
                "id":1,
                "House_Type": "3 Bedroom"
            },

            {
                "id":2,
                "House_Type": "Condo"
            },
            {
                "id":3,
                "House_Type": "4 Bedroom"
            },
                {
                "id":4,
                "House_Type": "Duplex"
            },
                {
                "id":5,
                "House_Type": "Multiplex"
            }
            ]
      );
   }
}


module.exports = {
houseDetails: function() {
    return(
        subObjects =  [
            {
              "id": 1,
              "PID" : 0,
              "Address" : "234 Test Drive2",
              "Location": "Ring Road",
              "Zip": "226106"
            },

            {
              "id": 2,
              "PID" : 0,
              "Address" : "111 Test Drive2",
              "Location": "Bell Road",
              "Zip": "226172"
          },
          {
              "id": 3,
              "PID" : 0,
              "Address" : "111 Test Drive2",
              "Location": "Bell Road",
              "Zip": "226172"
          },
          {
              "id": 1,
              "PID" : 1,
              "Address" : "111 Test Drive2",
              "Location": "Bell Road100",
              "Zip": "226172"
          },
          {
              "id": 4,
              "PID" : 1,
              "Address" : "222 Test Drive3",
              "Location": "Ring Road",
              "Zip": "226173"
          }] 
     );
   }
 }

Below is the error description:

Invariant Violation: Element type is invalid: 
   expected a string (for built-in components)
   or a class/function(for composite components) but got: object.

   This error is located at:

      in RCTView (At View.js:60)
      in View(at appContainer.js:102)
      in RCTView (at View.js:60)
      in View (at Appcontainer.js:122)
      in AppContainer (at renderApplication.js:32)

any help will be appreciated.

user54967
  • 25
  • 2
  • 8

1 Answers1

0

you can try this:

import { initialData } from 'src/screens/houses';
import { houseDetails } from 'src/screens/housesDetails';

export default class Information extends Component {

  constructor(props: Object) {
      super(props);
      this.state = {
          initialDtata: initialData(),
          subObjects: [],
          selected_topic_id: -1,
      }
   }

  listView(){
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var tabsData = ds.cloneWithRows(this.state.initialDtata)

        return(
            <View>
                <ListView
                    style={{marginVertical: 5}}
                    enableEmptySections={true}
                    dataSource={tabsData}
                    renderRow={(rowData, sectionID, rowID) => 
                      this.displayHome(rowData, rowID)}
                    />
            </View>
        )
  }

  displayHome(rowData: Object, rowID: number) {
      return(
          <View style={{flex:1}}>
              <TouchableOpacity onPress={() => this.onHomeSelection(rowID)}>
                  <View style={{marginVertical: 15, marginHorizontal:30, justifyContent: 'space-between', flexDirection: 'row',alignItems: 'center'}}>
                      <Text style={{fontSize: 10, fontWeight: 'bold'}}>{rowData.House_Type}</Text>
                  </View>
              </TouchableOpacity>
              {this.state.selected_topic_id === Number(rowID) ? this.renderQuestionList(rowData.id) : null}
          </View>
      );
   }

   onHomeSelection(rowID) {
       let selected_topic_id = this.state.selected_topic_id === Number(rowID) ? -1 : Number(rowID);
        this.setState({ 
            subObjects: houseDetails(), 
            selected_topic_id: selected_topic_id, 
        })
    }

    renderQuestionList(rowID) {
        let selected_array = [];
        this.state.subObjects.map((i) => { if(i.PID === rowID) return selected_array.push(i)})

        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        let tabsData = ds.cloneWithRows(selected_array)
        return(
            <View>
                <ListView
                    style={{marginVertical: 5}} 
                    enableEmptySections={true}
                    dataSource={tabsData}
                    renderRow={(rowData, sectionID, rowID) => 
                       this.renderQuestion(selected_array, rowID)} 
                />
             </View>
         )
     }

     renderQuestion(rowData: Object, rowID: number) {
         let address = rowData.map((i) => {return i.Address})
         return(
             <View style={{flex:1}}>
                 <TouchableOpacity>
                     <View style={{marginVertical: 5, marginLeft:35, marginRight: 35}}>
                         <Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>{address}</Text>
                     </View>
                 </TouchableOpacity>
              </View>
         );
     }

     render() {
         return (
             <View style={{ flex:1, backgroundColor: 'white' }}>
                 {this.listView()}
             </View>
         );
     }
  }




you can do import { initialData } from 'src/screens/houses';

module.exports = {
initialData: function() {
    return (
        initialDtata = [
            {
                "id":0,
                "House_Type": "2 Bedroom"
            },
            {
                "id":1,
                "House_Type": "3 Bedroom"
            },

            {
                "id":2,
                "House_Type": "Condo"
            },
            {
                "id":3,
                "House_Type": "4 Bedroom"
            },
                {
                "id":4,
                "House_Type": "Duplex"
            },
                {
                "id":5,
                "House_Type": "Multiplex"
            }
            ]
      );
   }
}


and import { houseDetails } from 'src/screens/housesDetails';

module.exports = {
houseDetails: function() {
    return(
        subObjects =  [
            {
              "id": 1,
              "PID" : 0,
              "Address" : "234 Test Drive2",
              "Location": "Ring Road",
              "Zip": "226106"
            },

            {
              "id": 2,
              "PID" : 0,
              "Address" : "111 Test Drive2",
              "Location": "Bell Road",
              "Zip": "226172"
          },
          {
              "id": 3,
              "PID" : 0,
              "Address" : "111 Test Drive2",
              "Location": "Bell Road",
              "Zip": "226172"
          },
          {
              "id": 1,
              "PID" : 1,
              "Address" : "111 Test Drive2",
              "Location": "Bell Road100",
              "Zip": "226172"
          },
          {
              "id": 4,
              "PID" : 1,
              "Address" : "222 Test Drive3",
              "Location": "Ring Road",
              "Zip": "226173"
          }] 
     );
   }
 }

hey @user54967 sorry for the delay

Sathvik Nasani
  • 227
  • 1
  • 6
  • My selection will change when user selects Single family home. How will I change the data in this.setState({initialDtata. Also, this data is coming from JSON file. Above data that I gave you is just and example. My JSON file is huge. How will I change the intitialData based on users selection. – user54967 Jun 07 '18 at 11:19
  • hi @user54967 can u please provide the JSON format so that i can write in that way – Sathvik Nasani Jun 07 '18 at 11:54
  • I have added two JSON file for master and detail and also sample data. Please let me know if you need any additional information. – user54967 Jun 07 '18 at 15:58
  • if id of 1st JSON file matches the PID of 2nd JSON file then you need to display all related objects? and these JSON files you will get it from api ryt? – Sathvik Nasani Jun 08 '18 at 05:55
  • Yes, when the id of ist JSON file matches the PID of 2nd JSON file then I need to display the related objects. No, I am not getting them from api. I have them on my computer. I am importing them using this statement "import houses from './houses' and 'import houseDetails from './houseDetails' – user54967 Jun 10 '18 at 02:23
  • Please let me know if anyone needs any additional information, I really need help with this. Any help will be really appreciated. – user54967 Jun 10 '18 at 03:29
  • Thank you Sathvik. I will try the code and will let you know. Thank you again! I have been struggling with this for a while – user54967 Jun 15 '18 at 01:36
  • Hi Sathvik, I am new to React Native. Just one quick question . After putting this statement, import { initialData } from 'src/screens/houses';), in my code, I don't need to do this module.exports = { initialData: function() right? I am not sure what module.exports = { initialData: function() is for? – user54967 Jun 15 '18 at 01:50
  • hi @user54967 it is functional based component you have to export that function in order to use that function. – Sathvik Nasani Jun 15 '18 at 05:15
  • Hi Sathvik, I am getting an error. I posted the error description in my original post along with the code that you gave me. Any help will be appreciated. – user54967 Jun 15 '18 at 17:51
  • hi @user54967 It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version? AND you need to import import { initialData } from 'src/screens/houses'; import { houseDetails } from 'src/screens/housesDetails'; – Sathvik Nasani Jun 18 '18 at 05:53
  • Hi Sathvik, I did this under the test project I created : C:\VisualStudioMobileApplication\parentchile>react-native -v react-native-cli: 2.0.1 react-native: 0.55.4 . It seems 0.55.4 is later version than 53.0 – user54967 Jun 18 '18 at 15:15