I want to pass Image uri to the next screen, so I can select image on one Screen and display on other, is there any possible way around? I am Selecting Image from Info.js and want to show that selected image in Profile.js. I am using React Native Version 0.64.3, and have built on Expo, in Linux. Expo Image Picker Version is 12.0.1 My Code is as below;

Info.js

export default function Info({ route, navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    const [profilePicture, setprofilePicture] = useState('');

    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
        });

        if (!result.cancelled) {
            setprofilePicture(result.uri);
            setModalVisible(false);
        }
    }
    const openCamera = async () => {
        const permissionResult = await ImagePicker.requestCameraPermissionsAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
        });
        if (permissionResult.granted === false) {
            alert("You've refused to allow this appp to access your camera!");
            return;
        }
        const result = await ImagePicker.launchCameraAsync();
        // console.log(result);
        if (!result.cancelled) {
            setprofilePicture(result.uri);
            setModalVisible(false);
        }
    }
    
    if (profilePicture != '') {
        nextbtn = <NextBtn txt={"Next"} onPress={() => { navigation.navigate('Profile', { profile: profilePicture }) }} />
    } else {
        nextbtn = <Text></Text>
    }
    var bg = ''
    if (profilePicture != '') {
        bg = { backgroundColor: 'transparent' }
    }

    return (
        <View style={{ flex: 1 }}>
            <View style={[s.surface, s.fullView, {paddingTop: 64}]}>
                {nextbtn}
                <Text style={[s.heading2, s.onSurface, s.container]}>Your Info</Text>
                <Text style={[s.txt, s.onSurface, s.containerLg, s.mt1, s.lhNormal, s.textCenter]}>Enter your name and add a profile picture.</Text>
                <ImageBackground
                    source={{ uri: profilePicture }}
                    resizeMode="cover"
                    style={{ marginTop: 18 }}
                    imageStyle={{ borderRadius: 100 }}
                >
                    <TouchableOpacity
                        style={[s.profileSelector, bg]}
                        onPress={() => { setModalVisible(true) }}
                    >
                        <FontAwesomeIcon icon={faCamera} size={20} color={color.onSurfaceColor} />
                    </TouchableOpacity>
                </ImageBackground>
            </View>
            <Modal
                animationType="fade"
                transparent={true}
                visible={modalVisible}
                statusBarTranslucent={true}
                onRequestClose={() => {
                    Alert.alert('Modal has been closed.');
                    setModalVisible(!modalVisible);
                }}
            >
                <View style={[s.centeredView, s.bgOverlay]}>
                    <View style={s.modalView}>
                        <Text style={s.modalText}>Choose Info Picture</Text>
                        <View style={[s.dFlex, {flexDirection: 'row'}]}>
                            <TouchableOpacity
                                style={[s.profieSelection]}
                                onPress={openCamera}
                            >
                                <FontAwesomeIcon icon={faCamera} size={20} color={color.onSecondaryColor} />
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={[s.profieSelection]}
                                onPress={pickImage}
                            >
                                <FontAwesomeIcon icon={faImages} size={20} color={color.onSecondaryColor} />
                            </TouchableOpacity>
                        </View>
                        <Pressable
                            style={[s.btn, { minWidth: 260 }]}
                            onPress={() => setModalVisible(!modalVisible)}
                        >
                            <Text style={[s.btnText]}>Cancel</Text>
                        </Pressable>
                    </View>
                </View>
            </Modal>
        </View >
    )

}

Profile.js

export default function Profile({ route, navigation }) {
    const { profile } = route.params;
    var profilePicture = JSON.stringify(profile);
    console.log(profilePicture)
eturn (
        <View style={{ flex: 1 }}>
            <View style={[s.surface, s.fullView, { paddingTop: 64 }]}>
                <Text style={[s.heading2, s.onSurface, s.container]}>Your Profile</Text>
                <Text style={[s.txt, s.onSurface, s.containerLg, s.mt1, s.mb2, s.lhNormal, s.textCenter]}>Enter your name and add a profile picture.</Text>
                <Image source={profilePicture} style={{ width: 136, borderRadius: 100, height: 136, backgroundColor: '#fff' }} />
            </View>
        </View >
    )

}

CodePudding user response：

It seems like your using React Navigation, heres the official guide on how to pass parameters to routes using react navigation

CodePudding user response：

You can get the uri of the image from one screen and pass it through navigation params to other screen. Check out @react-navigation/native

const navigation = useNavigation();

const onPickImage = () => {
   // expo image picker codes here 

   navigation.navigate('SecondScreen', { uri });
}