I have been trying to solve this issue for the past few days, but when I use <Image source={require("path/image.png")} style={{width:100, height:100}} /> the image will not display on my emulator. I also tried to build the app locally, and it still will not show in the app.

import { Text, StyleSheet, Image, View, TextInput, SafeAreaView, Button, Pressable, Alert } from "react-native";
import * as ImagePicker from "expo-image-picker";
import { useState } from "react";

const UserDetails = () => { 
    const [image, setImage] = useState(null);

    const pickImage = async () => {
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== 'granted') {
            Alert.alert("Permission required", "Permission to access media library is required!");
            return;
        }

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

        if (!result.canceled) {
            setImage(result.assets[0].uri);
        }
    };  
    
    const onSubmit = () => {
        // Other things
    }
    
    return (
        <SafeAreaView>
            <View>

                <Pressable onPress={pickImage}>
                    <Image source={image ? { uri:image } : require("./../../assets/default_pfp.png")} resizeMode="contain" style={styles.image} />
                </Pressable>

                <Button onPress={onSubmit} title="SUBMIT" />
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    image: {
        width: 100,
        height: 100,
        borderRadius: 50,
    },
});

export default UserDetails;

I have tried to put the image in the directory as “userDetails.js” (which is this current file), but it still doesn’t show up.