React native – text must be rendered within <Text> when using image-picker

I am trying to implement an image uploader into my app. Nonetheless, I keep getting the following error: Text strings must be rendered within a component.
All other files are working properly as they remain independent from this part of the app.

//fcard.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import ImagePicker from 'react-native-image-picker';

const Flcard = () => {
  const [resourcePath, setResourcePath] = useState({});

  const selectFile = () => {
    var options = {
      title: 'Select Image',
      customButtons: [
        {
          name: 'customOptionKey',
          title: 'Choose file from Custom Option',
        },
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.showImagePicker(options, res => {
      console.log('Response = ', res);
      if (res.didCancel) {
        console.log('User cancelled image picker');
      } else if (res.error) {
        console.log('ImagePicker Error: ', res.error);
      } else if (res.customButton) {
        console.log('User tapped custom button: ', res.customButton);
        alert(res.customButton);
      } else {
        setResourcePath(res);
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <Image
          source={{
            uri: 'data:image/jpeg;base64,' + resourcePath.data,
          }}
          style={{ width: 100, height: 100 }}
        />
        <Image
          source={{ uri: resourcePath.uri }}
          style={{ width: 200, height: 200 }}
        />
        <Text style={{ alignItems: 'center' }}>{resourcePath.uri}</Text>
        <TouchableOpacity onPress={selectFile} style={styles.button}>
          <Text style={styles.buttonText}>Select File</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  button: {
    width: 250,
    height: 60,
    backgroundColor: '#3740ff',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 4,
    marginBottom: 12,
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 15,
    color: '#fff',
  },
});

export default Flcard;

// Flashcards.js
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Flcard from '../fcard';
 

const Flashcards = ({ route }) => {
  const [showElements, setShowElements] = useState(true);

  const handleTouch = () => {
    setShowElements(!showElements);
  };


  const { task } = route.params;
  const [items, setItems] = useState([]);

  const handleAddItem = () => {
    // Add a new item to the list
    const newItem = {
      id: Date.now(),
      text: 'New Item',
    };


    setItems([...items, newItem]);
  };


  return (
    <View style={styles.container}>
        {showElements ? (
          <>
        <TouchableOpacity onPress={handleAddItem} style={styles.addButton}>
        <Ionicons name="ios-add" size={30} color="#fff" />
      </TouchableOpacity>

      <View style={styles.itemList}>
        {items.map((item) => (
          <TouchableOpacity key={item.id} style={styles.item} onPress={handleTouch}>
            <Text>{item.text}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <Text style={styles.title}>{task}</Text>
      {/* Other task details */}
      </> ) : (
        <>

        <Flcard/>

    </>
      )}

    </View>

  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },  addButton: {
    position: 'absolute',
    top: 10,
    left: 10,
    zIndex: 999,
    backgroundColor: '#000',
    padding: 10,
    borderRadius: 15,
  },
  itemList: {
    marginTop: 50,
  },
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default Flashcards;

I tried deleting all the elements in the return statement of the fcard.js, keeping only the View component. However, I get the same issue.