im new to react native so i just can storing data from input text to firebase and making a login form. i want to make an apps for survey, there a form input for survey data then passing the id survey to the next form ( user form). I can do that on CI or wordpress, but i cant do that on react native
the flow like this
Survey form --- send the id inserted firebase ---> User form --> Save Final Data
Edited for show my code Survey Form
import React, { Component } from 'react';
import {
Button,
StyleSheet,
TextInput,
ScrollView,
ActivityIndicator,
View,
Text,
SafeAreaView,
TouchableOpacity
} from 'react-native';
import {Ionicons} from "@expo/vector-icons"
import firebase from 'firebase';
export default class PostScreen extends Component {
constructor() {
super();
this.dbRef = firebase.firestore().collection('surveys');
this.state = {
usia: '',
kab: '',
kec: '',
desa: '',
rw: '',
rt: '',
jekel: '',
tps: '',
isLoading: false
};
}
inputValueUpdate = (val, prop) => {
const state = this.state;
state[prop] = val;
this.setState(state);
}
storesurveys() {
if(this.state.usia === ''){
alert('Masukan usia anda!')
}else {
this.setState({
isLoading: true,
});
this.dbRef.doc(this.state.usia).set({
usia: this.state.usia,
kab: this.state.kab,
kec: this.state.kec,
desa: this.state.desa,
rw: this.state.rw,
rt: this.state.rt,
jekel: this.state.jekel,
tps: this.state.tps,
}).then((res) => {
this.setState({
usia: '',
kab: '',
kec: '',
desa: '',
rw: '',
rt: '',
jekel: '',
tps: '',
isLoading: false,
});
this.props.navigation.navigate('Dummy')
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});
}
}
render() {
if(this.state.isLoading){
return(
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={()=> this.props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
</TouchableOpacity>
<TouchableOpacity>
<Text style={{fontWeight:"500"}}>Formulir surveys</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.inputForm}>
<View style={styles.inputGroup}>
<TextInput
placeholder={'usia'}
value={this.state.usia}
onChangeText={(val) => this.inputValueUpdate(val, 'usia')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'kab'}
value={this.state.kab}
onChangeText={(val) => this.inputValueUpdate(val, 'kab')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'kec'}
value={this.state.kec}
onChangeText={(val) => this.inputValueUpdate(val, 'kec')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'desa'}
value={this.state.desa}
onChangeText={(val) => this.inputValueUpdate(val, 'desa')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'rw'}
value={this.state.rw}
onChangeText={(val) => this.inputValueUpdate(val, 'rw')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'rt'}
value={this.state.rt}
onChangeText={(val) => this.inputValueUpdate(val, 'rt')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'jekel'}
value={this.state.jekel}
onChangeText={(val) => this.inputValueUpdate(val, 'jekel')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'tps'}
value={this.state.tps}
onChangeText={(val) => this.inputValueUpdate(val, 'tps')}
/>
</View>
<View style={styles.button}>
<Button
title='Add Survey'
onPress={() => this.storesurveys()}
color="#19AC52"
/>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
User Form NB : i need pass the survey form to my user form with the id inserted from survey
import React, { Component } from 'react';
import {
Button,
StyleSheet,
TextInput,
ScrollView,
ActivityIndicator,
View,
Text,
SafeAreaView,
TouchableOpacity
} from 'react-native';
import {Ionicons} from "@expo/vector-icons"
import firebase from 'firebase';
export default class PostScreen extends Component {
constructor() {
super();
this.dbRef = firebase.firestore().collection('penduduk');
this.state = {
nik: '',
nama: '',
tgl_lahir: '',
usia: '',
jekel: '',
survey: '',
isLoading: false
};
}
inputValueUpdate = (val, prop) => {
const state = this.state;
state[prop] = val;
this.setState(state);
}
storePenduduk() {
if(this.state.nik === ''){
alert('Masukan NIK anda!')
}else if(this.state.nama === ''){
alert('Masukan Nama anda!')
}else {
this.setState({
isLoading: true,
});
this.dbRef.doc(this.state.nik).set({
nik: this.state.nik,
nama: this.state.nama,
tgl_lahir: this.state.tgl_lahir,
usia: this.state.usia,
jekel: this.state.jekel,
survey : this.state.survey,
}).then((res) => {
this.setState({
nik: nik,
nama: '',
tgl_lahir: '',
usia: '',
jekel: '',
survey: '',
isLoading: false,
});
this.props.navigation.navigate('Dummy')
})
.catch((err) => {
console.error("Error found: ", err);
this.setState({
isLoading: false,
});
});
}
}
render() {
if(this.state.isLoading){
return(
<View style={styles.preloader}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={()=> this.props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
</TouchableOpacity>
<TouchableOpacity>
<Text style={{fontWeight:"500"}}>Formulir Penduduk</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.inputForm}>
<View style={styles.inputGroup}>
<TextInput
placeholder={'nik'}
value={this.state.nik}
onChangeText={(val) => this.inputValueUpdate(val, 'nik')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'nama'}
value={this.state.nama}
onChangeText={(val) => this.inputValueUpdate(val, 'nama')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'tgl_lahir'}
value={this.state.tgl_lahir}
onChangeText={(val) => this.inputValueUpdate(val, 'tgl_lahir')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'usia'}
value={this.state.usia}
onChangeText={(val) => this.inputValueUpdate(val, 'usia')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'jekel'}
value={this.state.jekel}
onChangeText={(val) => this.inputValueUpdate(val, 'jekel')}
/>
</View>
<View style={styles.inputGroup}>
<TextInput
placeholder={'survey'}
value={this.state.survey}
onChangeText={(val) => this.inputValueUpdate(val, 'survey')}
/>
</View>
<View style={styles.button}>
<Button
title='Add User'
onPress={() => this.storePenduduk()}
color="#19AC52"
/>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
Can someone giving me an example/source code/ documentation to do that? thank you