Here is my parent modal:
import React, { useState, useEffect, setState } from 'react';
import { View, Text, StyleSheet, Modal } from 'react-native';
import { MaterialIcons } from "@expo/vector-icons"
import AddReportForm from "./AddReportForm";
import * as Location from 'expo-location';
import { LOCATION } from 'expo-permissions';
export default function AddReportModal() {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
const [modalOpen, setModalOpen] = useState(false)
state = { location: {} }
useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();
});
let latitude = 'Waiting..';
let longitude = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
latitude = JSON.stringify(location.coords.latitude);
longitude = JSON.stringify(location.coords.longitude);
// console.log(location.coords.latitude)
setState({ location: location })
}
return (
<View>
<MaterialIcons
name='add'
size={34}
onPress={() => setModalOpen(true)}
style={styles.modalToggle}
/>
<Modal visible={modalOpen} animationType='slide' dataFromParent={this.state.location}>
<View style={styles.modalContent}>
<MaterialIcons
name='close'
size={34}
onPress={() => setModalOpen(false)}
style={{ ...styles.modalToggle, ...styles.modalClose }}
/>
<Text style={styles.modalText}>{latitude}</Text>
<Text style={styles.modalText}>{longitude}</Text>
<AddReportForm />
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
modalToggle: {
marginBottom: 10,
borderWidth: 1,
borderColor: '#f2f2f2',
padding: 10,
borderRadius: 10,
alignSelf: 'center'
},
modalClose: {
marginTop: 20,
marginBottom: 0
},
modalContent: {
flex: 1
},
modalText: {
color: '#999'
}
})
Here is my child form inside my modal:
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button, TextInput, Platform } from 'react-native';
import { Formik } from 'formik';
export default class AddReportForm extends React.Component {
constructor(props) {
super(props);
state = {
location: {},
errorMessage: ''
}
}
render() {
return (
<View style={styles.container}>
<Formik
initialValues={{ name: '', latitude: '', longitude: '', read: false, saved: false }}
onSubmit={(values) => {
console.log(values)
}}
>
{(props) => (
<View>
<TextInput
multiline
style={styles.input}
placeholder='Name'
onChangeText={props.handleChange('name')}
value={props.values.name}
/>
<TextInput
style={styles.input}
placeholder='Latitude'
onChangeText={props.handleChange('latitude')}
value={props.values.latitude}
/>
<TextInput
style={styles.input}
placeholder='Longitude'
onChangeText={props.handleChange('longitude')}
value={props.values.longitude}
/>
<Button
title='Submit' color='maroon' onPress={props.handleSubmit}
/>
<Text>{this.props.dataFromParent}</Text>
</View>
)}
</Formik>
<Text>{JSON.stringify(this.state.location)}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
fontSize: 18,
borderRadius: 6
}
})
Now I’m getting a problem where I am trying to setState in my parent component