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!

Educable

Answer 1

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

Passerine

Oh my god. I would have never figured that out myself. Thank you, I greatly appreciate your help. Such a little bugger that semicolon is. – Educable

Answer 2

Usually it can be caused by the following 2 errors:

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

Flyte

Also when the style properties are put after the source property. That's what my problem was. – Sepsis

Answer 3

Sometimes an SVG may not be compatible with your current React Native version. To resolve this issue, follow these steps:

2. Visit SVG Optimizer:

   • Go to svgviewer.dev.

3. Optimize Your SVG:

   • Paste your SVG code into the provided text area on the website.
   • Click on the "OPTIMIZE" button.

4. Copy the Optimized SVG:

   • After optimization, copy the optimized SVG code.

5. Use the Optimized SVG:

   • Replace your original SVG code with the optimized SVG code in your React Native project.

For me, this approach worked perfectly I hope this helps!

Clerihew