Error: Text strings must be rendered within a <Text> component in React Native when string is not empty

Question

so I have recently ran into the error show in the text tag, although I can not find why it is showing. I have logged that the value is not empty and that the value exists before I press the button. Here is my jsx code:

<TouchableOpacity style={styles.profilePhotoBack} onPress={() => addProfilePhoto()}>
                {profilePhoto ? (
                    <Image style={styles.image} source={{uri: profilePhoto}} />
                ) : (
                    <View style={styles.profilePhoto}>
                        <AntDesign name="plus" size={50} color="white" />
                    </View>
                )};
            </TouchableOpacity>

And here is my function code along with the state:

    const [profilePhoto, setProfilePhoto] = useState();

    const getPermission = async () => {
        if (Platform.OS !== "web") {
            const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

            return status;
        }
    };

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

            if (!result.cancelled) {
                setProfilePhoto(result.uri);
            }
        } catch (err) {
            alert("Error picking image. Please try again later.");
        }
    };

    const addProfilePhoto = async () => {
        const status = await getPermission();

        if (status !== "granted") {
            alert("Please allow access to your camera roll to create your profile photo.");
            return;
        }

        await pickImage();
    };

Any help would be largely appreciated as I have been stuck here for quite some time. Thank you!

Answer 1

Remove the semi-colon at the end of the profilePhoto conditional before the closing tag of Touchable Opacity

Answer 2

Usually it can be caused by the following 2 errors:

1. Residual semicolon in view
2. Import wrong path.