Error in Navigating Screen using Button props in React Native - react-native

Question

I've been trying some codes for the navigation in react native, I want to navigate from Listlab screen to FormScreen for updating which mean I want to navigate the screen and pass the value to new screen and its textfield. But when I tried, it shown me an error that I already tried to solve it for many times. Can you help me to solve this error, thank you :D
Here's The Error Message:
And Here's my Listlab Code:
import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform, StatusBar} from 'react-native';
import PropTypes from 'prop-types';
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
import { CardItem } from 'native-base';
import { ScrollView } from 'react-native-gesture-handler';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator } from 'react-navigation-stack';
import Button from 'react-native-button';
import { withNavigation } from 'react-navigation';
class ListLab extends Component {
_OnButtonPress(no_pengajuan) {
Alert.alert(no_pengajuan.toString());
}
handleDelete(id){
let url = "http://URL:8000/api/pinjams/"+id ;
// let data = this.state;
fetch(url,{
method:'DELETE',
headers:{
"Content-Type" : "application/json",
"Accept" : "application/json"
},
})
.then((result) => {
result.json().then((resp) => {
console.warn("resp", resp)
alert("Data is Removed")
})
})
}
render() {
this._OnButtonPress = this._OnButtonPress.bind(this);
return (
<View style={styles.pinjamList}>
<StatusBar hidden />
{this.props.pinjams.map((pinjam) => {
return (
<View key={pinjam.id}>
{/* Baru nambah data */}
<Card>
<CardImage
source={{uri: 'http://www.rset.edu.in/pages/uploads/images/computerLab-img1.jpg'}}
title={pinjam.lab }
/>
<CardTitle
title={ pinjam.ketua_kegiatan }
subtitle={ pinjam.keperluan }
/>
<CardContent><Text>{ pinjam.tanggal_mulai} - {pinjam.tanggal_selesai }</Text></CardContent>
<CardContent><Text>{ pinjam.jam_mulai } - {pinjam.jam_selesai }</Text></CardContent>
</Card>
<Button
style={{fontSize:20, color:'red'}}
styleDisabled={{color:'grey'}}
onPress ={()=>{this.handleDelete(pinjam.id)}}
> {"\n"} Delete
</Button>
<Button
style={{fontSize:20, color:'green'}}
styleDisabled={{color:'grey'}}
onPress ={()=>{this.props.navigation.navigate('FormScreen')}}
> {"\n"} Update
</Button>
</View>
)
})}
</View>
);
}
}
const styles = StyleSheet.create({
pinjamList: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
},
pinjamtext: {
fontSize: 14,
fontWeight: 'bold',
textAlign: 'center',
}
});
export default withNavigation(ListLab);
And This one is my FormScreen Code:
import React , { Component } from 'react';
import {
ScrollView,
View,
Text,
StyleSheet,
StatusBar
} from 'react-native';
import { Header, Left, Right, Icon, Footer, Label} from 'native-base';
import Button from 'react-native-button';
import t from 'tcomb-form-native';
import { Dropdown } from 'react-native-material-dropdown';
import { TextField } from 'react-native-material-textfield';
import DatePicker from 'react-native-datepicker';
import moment from 'moment';
class FormScreens extends Component {
static navigationOptions = {
drawerIcon : ({tintColor})=>(
<Icon name="paper" style={{ fontSize: 24, color: tintColor }}/>
)
}
constructor(){
super();
this.state = {
ketua_kegiatan: '',
lab: '',
level: '',
tanggal_mulai: '',
tanggal_selesai: '',
jam_mulai: '',
jam_selesai: '',
daftar_nama: '',
keperluan: '',
kontak_ketua:'',
dosen_pembina: '',
app_laboran: '',
app_kalab: '',
app_kajur: '',
app_pudir: '',
}
}
submit(id){
let url = "http://URL:8000/api/pinjams"+id;
let data = this.state;
fetch(url,{
method:'PUT',
headers:{
"Content-Type" : "application/json",
"Accept" : "application/json"
},
body: JSON.stringify(data)
})
.then((result) => {
result.json().then((resp) => {
console.warn("resp", resp)
alert("Data is Updated")
})
})
}
render() {
let lab = [{
value: '313',
}, {
value: '316',
}, {
value: '317',
}, {
value: '318',
}, {
value: '319',
}, {
value: '320',
}, {
value: '324',
}, {
value: '325',
}, {
value: '329',
}, {
value: '330',
}, {
value: '234',
}, {
value: '283',
}, {
value: '218',
}, {
value: '224',
}, {
value: '225',
}, {
value: '230',
}, {
value: '233',
}, {
value: '135',
}, {
value: '136',
}, {
value: '137',
}, {
value: 'Workshop',
}, {
value: 'Lab Bahasa',
}];
let level = [{
value: 1,
}, {
value: 2,
}, {
value: 3,
}];
return (
//08-08-2019 (Ubah view menjadi ScrollView)
<ScrollView style={styles.container}>
<StatusBar hidden />
<Header style={{backgroundColor:'orange', flex:0.8}}>
<Left style={{justifyContent:"flex-start",flex:1,marginTop:5}}>
<Icon name="menu" onPress={()=>this.props.navigation.openDrawer()} />
</Left>
</Header>
<View style={{padding:20}}>
<Text style={{fontSize:20,textAlign: 'center',paddingLeft:20,fontWeight: 'bold'}}>{"\n"}Halaman Pengajuan</Text>
<TextField
label = 'ketua_kegiatan'
// value = {ketua_kegiatan}
onChangeText={ (ketua_kegiatan) => this.setState({ ketua_kegiatan }) }
// onChange={(data) => { this.setState({ketua_kegiatan:data.target.value}) }}
value = {this.state.ketua_kegiatan}
/>
<Dropdown
label='Laboratorium'
data={lab}
onChangeText={ (lab) => this.setState({ lab }) }
/>
<Dropdown
label='Level'
data={level}
onChangeText={ (level) => this.setState({ level }) }
/>
<TextField
label = 'Tanggal Mulai'
// value = {tanggal_mulai}
onChangeText={ (tanggal_mulai) => this.setState({ tanggal_mulai }) }
// onChange={(data) => { this.setState({tanggal_mulai:data.target.value}) }}
value = {this.state.tanggal_mulai}
/>
<TextField
label = 'Tanggal Selesai'
// value = {tanggal_selesai}
onChangeText={ (tanggal_selesai) => this.setState({ tanggal_selesai }) }
// onChange={(data) => { this.setState({tanggal_selesai:data.target.value}) }}
value = {this.state.tanggal_selesai}
/>
<TextField
label = 'Jam Mulai'
// value = {jam_mulai}
onChangeText={ (jam_mulai) => this.setState({ jam_mulai }) }
// onChange={(data) => { this.setState({jam_mulai:data.target.value}) }}
value = {this.state.jam_mulai}
/>
<TextField
label = 'Jam Selesai'
// value = {jam_selesai}
onChangeText={ (jam_selesai) => this.setState({ jam_selesai }) }
// onChange={(data) => { this.setState({jam_selesai:data.target.value}) }}
value = {this.state.jam_selesai}
/>
<TextField
label = 'Keperluan'
// value = {keperluan}
onChangeText={ (keperluan) => this.setState({ keperluan }) }
// onChange={(data) => { this.setState({keperluan:data.target.value}) }}
value = {this.state.keperluan}
/>
<TextField
label = 'Daftar Nama'
// value = {daftar_nama}
onChangeText={ (daftar_nama) => this.setState({ daftar_nama }) }
// onChange={(data) => { this.setState({daftar_nama:data.target.value}) }}
value = {this.state.daftar_nama}
/>
<TextField
label = 'kontak_ketua'
// value = {kontak_ketua}
onChangeText={ (kontak_ketua) => this.setState({ kontak_ketua }) }
// onChange={(data) => { this.setState({kontak_ketua:data.target.value}) }}
value = {this.state.kontak_ketua}
/>
<TextField
label = 'Dosen Pembina'
// value = {dosen_pembina}
onChangeText={ (dosen_pembina) => this.setState({ dosen_pembina }) }
// onChange={(data) => { this.setState({dosen_pembina:data.target.value}) }}
value = {this.state.dosen_pembina}
/>
<TextField
label = 'app_laboran'
// value = {app_laboran}
onChangeText={ (app_laboran) => this.setState({ app_laboran }) }
// onChange={(data) => { this.setState({app_laboran:data.target.value}) }}
value = {this.state.app_laboran}
/>
<Button
style={{fontSize:20, color:'orange'}}
styleDisabled={{color:'grey'}}
onPress ={()=>{this.submit(pinjam.id)}}
> {"\n"} Submit
</Button>
</View>
{/* <Form type={Pengajuan}/> */}
<Footer style={{backgroundColor:'white'}}>
<Text style={{paddingTop:10,color:'grey'}}>{"\n"}Copyright reserved to #Leony_vw</Text>
</Footer>
</ScrollView>
);
}
}
export default FormScreens;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
// ...Platform.select({
// android: {
// marginTop: StatusBar.currentHeight
// }
// })
},
});
Here's my App.js:
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView,ScrollView, Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';
// import HomeScreen from './screens/HomeScreen';
// import FormScreen from './screens/FormScreen';
// import SigninScreen from './screens/SigninScreen';
import HomeScreen from './screens/laboran/HomeScreen';
import FormScreen from './screens/laboran/FormScreen';
import * as firebase from "firebase";
const { width } = Dimensions.get('window');
var firebaseConfig = {
apiKey: "XXXXXX",
authDomain: "XXXXX",
databaseURL: "XXXXX",
projectId: "XXXXX",
storageBucket: "XXXXX",
messagingSenderId: "XXXXX",
appId: "XXXXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default class App extends React.Component{
render() {
return (
<Apps/>
);
}
}
const CustomDrawerComponent = (props) => (
<SafeAreaView style={{ flex:1 }}>
<View style={{height:150, backgroundColor: 'white', alignItems :'center', justifyContent:'center'}}>
<Image source={require('./assets/up2.png')} style={{height:50, width:50,borderRadius:35 }}/>
</View>
<ScrollView>
<DrawerItems {...props}/>
</ScrollView>
</SafeAreaView>
)
const AppDrawerNavigator = createDrawerNavigator({
// Login:SigninScreen,
Home:HomeScreen,
Form:FormScreen
}, {
contentComponent: CustomDrawerComponent,
drawerWidth: width,
contentOptions:{
activeTintColor:'orange'
}
})
const Apps = createAppContainer(AppDrawerNavigator)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

That is probably because Listlab is rendered by a component that is actually a screen.
For example, let say your FormScreen would render the Listlab component. FormScreen has access to the navigation prop, but Listlab does not.
You have 2 solutions:
- pass the navigation prop to Listlab
- use the withNavigation HOC

Answer 2

I found the solution last night, I think I can's just navigate from ListLab because ListLab is just like a child screen of HomeScreen. When I try it on HomeScreen, the prop is doing fine, and it can navigate to my FormScreen tho. And also, I think I did call the wrong alias of FormScreen in App.js and that's the problem as well. But now, I would like to put the button and the navigation in ListLab, I still wonder how can I navigate using button in child screen. But thanks guys for helping me :D Cheers!