I have two JSON files. I want that if user swipes on one listView, the data for that is coming from 1st JSON file, he/she will be redirected to another ListView, the data for that is coming from 2nd JSON File. Below is the structure of my JSON file called Car_Types
[
{
"id":0,
"Car_Type": "BMW"
},
{
"id":1,
"Car_Type": "Mercedes Benz"
},
{
"id":2,
"Car_Type": "Fiat"
},
{
"id":3,
"Car_Type": "Volkswagon"
},
{
"id":4,
"Car_Type": "Honda"
},
{
"id":5,
"Car_Type": "Lexus"
}
]
My another JSON file is like this (CarDetails.json)
[
{
"id": 0,
"FK" : 0,
"carType": "2018 BMW X5",
"Dealership Addr": "North Point"
},
{
"id": 1,
"FK" : 0,
"carType": "2018 BMW X6",
"Dealership Addr": "North Point2"
},
{
"id": 2,
"FK" : 0,
"carType": "2019 BMW X3",
"Dealership Addr": "North Point3"
},
{
"id": 3,
"FK" : 0,
"carType": "2018 BMW X1",
"Dealership Addr": "North Point4"
},
{
"id": 1,
"FK" : 1,
"carType": "C-Class Sedan",
"Dealership Addr": "Test Point4"
},
{
"id": 1,
"FK" : 1,
"carType": "E-Class Sedan",
"Dealership Addr": "Test Point1"
},
{
"id": 5,
"FK" : 1,
"carType": "S-Class Sedan",
"Dealership Addr": "Test Point2"
},
{
"id": 6,
"FK" : 1,
"carType": "S-Class Maybach",
"Dealership Addr": "Test Point56"
},
{
"id": 7,
"FK" : 2,
"carType": "Fiat Multipla",
"Dealership Addr": "Test Point66"
},
{
"id": 8,
"PID" : 2,
"carType": "Fiat 500",
"Dealership Addr": "Test Point66"
}
]
My First ListView should look like this:
BMW
mercedes benz
Fiat
Volkswagon
Honda
Lexus
when someone swipes on BMW then I should be redirected to another listView and it should show below ListView
2018 BMW X5 North Point
2018 BMW X6 North Point2
2018 BMW X3 North Point 3
2018 BMW X1 North Point4
It will only display those four items because id of BMW is 0 in my first JSON list and fk(foreignKey) is 0 in my second JSON list. In other words when the id=fk then it should display the Listview on my second screen.
Here is what I have in the code. My first screen code works, but when I go to the second screen, I cannot filter the list in my listview based on the ID that is passed from first screen. Also, I am having trouble read the id that is passed from firstscreen
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, ActivityIndicator, TextInput, TouchableOpacity } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';
import TestActivity from './TestActivity';
import { StackNavigator } from 'react-navigation';
import ServiceListDetails from './ServiceListDetails' ;
class AutoCompActivity extends Component {
constructor(props) {
super(props);
this.state = {
// Default Value of this State.
Loading_Activity_Indicator: true,
text:'',
selected_topic_id: -1,
}
this.arrayholder=[];
}
componentDidMount() {
const data = require('../reducers/services.json')
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
Loading_Activity_Indicator: false,
dataSource: ds.cloneWithRows(data),
}, function() {
// In this block you can do something with new state.
this.arrayholder = data ;
});
}
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.ser.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
/*Navigate_To_Second_Activity=(car_Type)=>
{
//Sending the JSON ListView Selected Item Value On Next Activity.
this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: car_Type});
}*/
clickedItemText( clickedItem )
{
this.props.navigation.navigate('Item', { item: clickedItem });
}
static navigationOptions =
{
title: 'MainActivity',
};
render()
{
if (this.state.Loading_Activity_Indicator) {
return (
<View style={styles.ActivityIndicator_Style}>
<ActivityIndicator size = "large" color="#009688"/>
</View>
);
}
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid='transparent'
placeholder="Search Here"
/>
<ListView
dataSource={this.state.dataSource}
renderRow = {( rowData ) =>
<TouchableOpacity style = { styles.item } activeOpacity = { 0.4 } onPress = { this.clickedItemText.bind( this, rowData ) }>
<Text style = { styles.text }>{ rowData.car_Type }</Text>
</TouchableOpacity>
}
renderSeparator = {() =>
<View style = { styles.separator }/>
}
enableEmptySections = { true }
/>
</View>
);
}
}
export default MyNewProject= StackNavigator(
{
First: {screen: AutoCompActivity},
Item: {screen: ServiceListDetails}
}
);
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: 'center',
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: 'center',
color: '#000',
},
rowViewContainer:
{
fontSize: 17,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
ActivityIndicator_Style:
{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
TextInputStyleClass:{
textAlign: 'center',
height: 40,
borderWidth: 1,
borderColor: '#009688',
borderRadius: 7 ,
backgroundColor : "#FFFFFF"
},
separator:
{
height: 2,
backgroundColor: 'rgba(0,0,0,0.5)'
},
item:
{
padding: 15
},
text:
{
fontSize: 18
},
});
I am going to second screen ServiceListDetails when the user swipes on first screen AutoCompActivity.
when I got to the second screen, I am not sure how to filter the second JSON file based on the id that is passed from first ListView. I can change my entire code if I am doing something wrong.
Any help in the regards will be highly appreciated.
