How do I pass strings from one component to another component? - react-native

Question

Login component:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
TextInput,
Image
} from 'react-native';
var DisplayData = require('./DisplayData');
export default class Login extends Component{
constructor(props){
super(props)
this.state = {
Latitude: '',
Longitude: '',
}
}
onPressDisplayData() {
this.props.navigator.push({
name: 'DisplayView',
component: DisplayData
});
}
render() {
return (
<View style = {styles.container}>
<Image source={require('./logo.png')}/>
<TextInput
style = {styles.input}
placeholder = 'Latitude'
autoCapitalize = 'none'
onChangeText={(text) => this.setState({Latitude:text})}
/>
<TextInput
style = {styles.input}
placeholder = 'Longitude'
autoCapitalize = 'none'
onChangeText={(text) => this.setState({Longitude:text})}
/>
<TouchableHighlight
style = {styles.submit}
onPress = {() => this.onPressDisplayData()
}
>
<Text>
Submit
</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
justifyContent:'center',
paddingBottom: 40
},
input: {
margin: 15,
height: 40,
borderColor: 'grey',
borderWidth: 1
},
submit: {
backgroundColor: '#FFDD03',
padding: 10
}
})
module.exports = Login;
DisplayData component:
import React, {
Component,
} from 'react';
import {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
} from 'react-native';
var REQUEST_URL = 'http://api.geonames.org/earthquakesJSON?north='+4+'&south='+-9.9+'&east='+-22.4+'&west='+55.2+'&username=afdsanfd'
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class DisplayData extends Component {
constructor(props){
super(props)
this.state = {
earthquakes: ds.cloneWithRows([])
};
}
componentDidMount() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => this.setState({ earthquakes: ds.cloneWithRows(responseData.earthquakes) }))
.catch(function(error) {
console.warn(error);
});
}
render() {
return (
<View>
<ListView
dataSource = {this.state.earthquakes}
renderRow={(rowData) => (
<View style={{flex: 1, paddingTop: 10, paddingBottom: 10, borderWidth: 0.5, paddingLeft: 10, borderColor: '#D3D3D3'}}>
<Text style={{fontSize: 25}}>{rowData.src}</Text>
<Text>DateTime: {rowData.datetime}</Text>
<Text>Magnitude: {rowData.magnitude}</Text>
<Text>EqID: {rowData.eqid}</Text>
<Text>Depth: {rowData.depth}</Text>
</View>
)}
/>
</View>
);
}
}
module.exports = DisplayData;
So what I am trying to accomplish through this app is having someone enter latitude and longitude such that an API call (REQUEST_URL) that'd return earthquake info. However, i'm struggling really hard with passing the entered latitude and longitude into the DisplayData component. I've tried things such as creating a global latitude and longitude but none have been working.