I've been trying to pass up this prop from CameraButton.js file that gives the UI of an image that was taken but whenever I activate the prop in the AddPost.js, it gives me all the values but when I try to get the singular value of the image like using export default function AddPost(props.route.params.image) and gives error undefined is not an object enter image description here but it works perfectly when export default function AddPost(props.route.params) and shows enter image description here

AddPost.JS

import { useNavigation } from "@react-navigation/core";
import React from 'react'
import {useState} from "react";
import { View, TextInput, Button } from 'react-native'

export default function AddPost(props) {
    console.log(props);
    const navigation = useNavigation();
    const [caption, setCaption] = useState("")
    const uploadImage = async () => {
        const response = await fetch(uri)
    }
    return (
      <View style={{flex: 1}}>
        <TextInput
            placeholder="Whats on your mind Edgers navars"
            onChangeText={(caption) => setCaption(caption)}
            />
            <Button title = "Take A Photo" onPress={() =>     navigation.navigate("CameraButton")}
              />
            <Button title = "Save" onPress={() => uploadImage()}
              />
      </View>

    )
}

CameraButton.Js

import { Camera, CameraType } from 'expo-camera';
import { useNavigation } from "@react-navigation/core";
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function App() {
    const navigation = useNavigation();
    const [type, setType] = useState(Camera.Constants.Type.back)
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const [image, setImage] = useState(null);
  const [camera, setCamera] = useState(null);

  const takePicture = async () => {
    if(camera){
        const data = await camera.takePictureAsync(null);
        setImage(data.uri);
    }
  }


  if (!permission) {
    // Camera permissions are still loading
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
      }

  function toggleCameraType() {
    setType((current) => (
      current === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back
    ));
      }

    // No permissions request is necessary for launching the image library
    let openImagePickerAsync = async () => {
        let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

        if (permissionResult.granted === false) {
          alert("Permission to access camera roll is required!");
          return;
        }
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
          });
  
      
  
          if (!result.cancelled) {
            setImage(result.uri);
          }
    
      }

  return (
    <View style={styles.container}>
      <Camera ref={ref => setCamera(ref)} style={styles.camera} type={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={toggleCameraType}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => takePicture()}>
            <Text style={styles.text}>Take Picture</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={openImagePickerAsync}>
            <Text style={styles.text}>Choose Picture</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('AddPost', {image})}>
            <Text style={styles.text}>Save Picture</Text>
          </TouchableOpacity>
        </View>
      </Camera>
      {image &&<Image source={{uri: image}}style={styles.camera}/>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },                                              
});

CodePudding user response：

Have you tried props[0].route.params.image ?

CodePudding user response：

You have to get the uri from the route object.

const response = await fetch(props.route.params?.image)