React Native error Failed prop type: Invalid prop `children` of type `array` supplied to `Overlay`,

Viewed 1120

I am new to React Native and I have an error message when I open one component . This won't avoid to keep going the navigation but i would like to clean this out . I'm pretty sure it's a syntax or a typo error but can't find where it's from .

In my component I have a modal that calling a function once clicking to a button.

Here is the code of the component :

import { connect } from "react-redux";
import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  TouchableOpacity,
} from "react-native";
import { Card, Button, Overlay } from "react-native-elements";

import AsyncStorage from "@react-native-async-storage/async-storage";

import { PRIVATE_URL } from "../config";


function SettingsScreen({ setReduxUser, user }) {
  const [visible, setVisible] = useState(false);

  const toggleOverlay = () => {
    setVisible(!visible);
  };

  const handleLogOut = async () => {
    await fetch(`${PRIVATE_URL}/logout?token=${user.token}`);
    AsyncStorage.removeItem("userToken");
    setReduxUser({ id: null, pseudo: null, token: null });
  };

  const handleDeleteUser = async () => {
    await fetch(`${PRIVATE_URL}/delete-user?id=${user.id}`);
    AsyncStorage.removeItem("userToken");
    setReduxUser({ id: null, pseudo: null, token: null });
  };

  return (
    <View>
      <ScrollView>

        <Card containerStyle={{ borderRadius: 5, borderColor: "#abd6d3" }}>
          <View>
            <Button
              type="clear"
              titleStyle={{ color: "black" }}
              title="Déconnexion"
              onPress={() => handleLogOut()}
            />
          </View>
        </Card>
        

           <View
          style={{
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <TouchableOpacity onPress={toggleOverlay}>
            <Text
              style={{
                color: "#eb4d4b",
              }}
            >
              Supprimer mon compte
            </Text>
          </TouchableOpacity>
          <Overlay
            isVisible={visible}
            onBackdropPress={toggleOverlay}
            overlayStyle={{
              borderRadius: 5,
              width: "94%",
              height: "25%",
              justifyContent: "space-between",
              borderWidth: 1,
              borderColor: "#418581",
            }}
          >
            <Text>
              Êtes-vous sur de vouloir supprimer votre compte ?
            </Text>
            <Button
              type="clear"
              titleStyle={{ color: "#418581" }}
              title="Non, je veux continuer à déjeuner"
              onPress={toggleOverlay}
            />
            <Button
              type="clear"
              titleStyle={{ color: "#eb4d4b", fontSize: 14 }}
              title="Oui, j'ai pris ma décision"
              onPress={() => handleDeleteUser()}
            />
          </Overlay>
        </View>
      </ScrollView>
    </View>
  );
}

function mapDispatchToProps(dispatch) {
  return {
    setReduxUser: function (user) {
      dispatch({ type: "user", user });
    },
  };
}

function mapStateToProps(state) {
  return { user: state.user };
}

export default connect(mapStateToProps, mapDispatchToProps)(SettingsScreen);
1 Answers

You need to wrap the elements inside the <Overlay> into a Container so it has only one parent element, and not an array of elements.

           <Overlay
            isVisible={visible}
            onBackdropPress={toggleOverlay}
            overlayStyle={{
              borderRadius: 5,
              width: "94%",
              height: "25%",
              justifyContent: "space-between",
              borderWidth: 1,
              borderColor: "#418581",
            }}
          >
           //WRAP CONTAINER HERE
            <Text>
              Êtes-vous sur de vouloir supprimer votre compte ?
            </Text>
            <Button
              type="clear"
              titleStyle={{ color: "#418581" }}
              title="Non, je veux continuer à déjeuner"
              onPress={toggleOverlay}
            />
            <Button
              type="clear"
              titleStyle={{ color: "#eb4d4b", fontSize: 14 }}
              title="Oui, j'ai pris ma décision"
              onPress={() => handleDeleteUser()}
            />
           //WRAP CONTAINER HERE
          </Overlay>

Your container may simply be <View>...</View>

Related