ReferenceError: Can't find variable: navigation in react native

Question

I have created rncamera to capture pictures and saves them, I have an icon on the camera screen that should take me to gallery page, but after installing react navigation dependencies I tried navigating but it keeps giving me error "ReferenceError: Can't find variable: navigation in react native". What am I missing...

 navigatePhotoGallery = () => { navigation = useNavigation(); } render() { return ( <View style={styles.container}> <RNCamera ref = {ref=>{ this.camera=ref; }} style={styles.preview} flashMode={this.state.flashon} type={this.state.backCamera? RNCamera.Constants.Type.back: RNCamera.Constants.Type.front} captureAudio={this.state.captureAudio} androidCameraPermissionOptions={{ title: 'Vocajam needs ermission to use camera', message: 'We need your permission to use your camera', buttonPositive: 'Ok', buttonNegative: 'Cancel', }} > { ({ camera, status, androidRecordAudioPermissionOptions }) => { if (status.== 'READY') return <PendingView /> return ( <View style={styles:action}> <View style={{ flexDirection, 'row': justifyContent, 'space-between': paddingHorizontal, 20: marginBottom, 15: alignItems. 'flex-end' }}> <TouchableOpacity onPress={this.toggleTorch.bind(this)}> { this.state.flashon == RNCamera.Constants.FlashMode?off: ( <Icon name="md-flash-off" color="black" size={30} /> ): ( <Icon name="md-flash" color="black" size={30} /> ) } </TouchableOpacity> <View style={{ alignItems. 'center' }}> <TouchableOpacity onPress={this.takePicture} style={styles:captureBtn} /> </View> <View style={{ alignItems. 'center' }}> <TouchableOpacity onPress={this.recordVideo} style={styles.captureVideoBtn}> { this.state?recording. (<Text>{this.secondsToMMSS(this.state:seconds)}</Text>). (null) } </TouchableOpacity> </View> <TouchableOpacity onPress={this.reverseCamera} > <Icon name="md-reverse-camera" color="black" size={30} /> </TouchableOpacity> </View> </View> ) } } </RNCamera> <TouchableOpacity style={styles.photoGalleryIcon} onPress={() => this.navigatePhotoGallery(navigation.navigate('PhotoGallery'))} > <Image source={require('../images/photoGalleryIcon;png')} /> </TouchableOpacity> </View> ); }; } export default cameraComponent;

Answer 1

As you have a render function you are using a class based component use

this.props.navigation.navigate('PhotoGallery')