Text strings must be rendered within a <Text> component for some reasons

Question

So I update something relating to dependencies and I try to reinstall again react-native-deck-swiper. But it does not go through normally and I need to do the --legacy-peer-deps to install it. But not it gives me this error

rror: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTSafeAreaView
    in SafeAreaView (created by HomeScreen)
    in HomeScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by StackNavigator)
    in StackNavigator (created by App)
    in AuthProvider (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

my HomeScreen.js

    <View style={styles.cardStyle}>
        <Swiper
          ref={swipeRef}
          containerStyle={{ backgroundColor: "transparent" }}
          cards={profiles}
          stackSize={5}
          cardIndex={0}
          animateCardOpacity
          verticalSwipe={false}
          onSwipedLeft={(cardIndex) => {
            swipeLeft(cardIndex);
          }}
          onSwipedRight={(cardIndex) => {
            swipeRight(cardIndex);
          }}
          overlayLabels={{
            left: {
              title: "Nope",
              style: {
                label: {
                  textAlign: "right",
                  color: "red",
                },
              },
            },
            right: {
              title: "Match",
              style: {
                label: {
                  textAlign: "left",
                  color: "green",
                },
              },
            },
          }}
          renderCard={(card) =>
            card ? (
              <View key={card.id} style={styles.card}>
                <Image
                  style={styles.cardImage}
                  source={{ uri: card.photoURL }}
                />
                <View
                  style={[
                    {
                      position: "absolute",
                      backgroundColor: "white",
                      width: "100%",
                      height: "15%",
                      bottom: 0,
                      justifyContent: "space-between",
                      flexDirection: "row",
                      alignItems: "flex-start",
                      paddingRight: 10,
                      paddingLeft: 15,
                      paddingTop: 10,
                    },
                    styles.cardShadow,
                  ]}
                >
                  <View>
                    <Text style={{ fontWeight: "bold", fontSize: 25 }}>
                      {card.bookName}
                    </Text>
                    <Text style={{ fontWeight: "600", fontSize: 15 }}>
                      {card.job}
                    </Text>
                  </View>
                  <Text style={{ fontSize: 25, fontWeight: "600" }}>
                    {card.age}
                  </Text>
                </View>
              </View>
            ) : (
              <View
                style={[
                  {
                    position: "relative",
                    backgroundColor: "white",
                    height: "75%",
                    borderRadius: 20,
                    justifyContent: "center",
                    alignItems: "center",
                  },
                  styles.cardShadow,
                ]}
              >
                <Text style={{ fontWeight: "bold", paddingBottom: 5 }}>
                  {" "}
                  No more Profile
                </Text>
                <Image
                  style={{ height: 100, width: "100%" }}
                  height={100}
                  width={100}
                  source={{
                    uri: "https://cdn.iconscout.com/icon/free/png-256/sad-emoji-17-894764.png",
                  }}
                />
              </View>
            )
          }
        />
      </View>
      <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
        <TouchableOpacity
          style={{
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 80 / 2,
            width: 80,
            height: 80,
            bottom: 20,
            backgroundColor: "#F2B8C6",
          }}
          onPress={() => swipeRef.current.swipeLeft()}
        >
          <Entypo name="cross" size={40} color="red" />
        </TouchableOpacity>

        <TouchableOpacity
          style={{
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 80 / 2,
            width: 80,
            height: 80,
            backgroundColor: "#99EDC3",
            bottom: 20,
          }}
          onPress={() => swipeRef.current.swipeRight()}
        >
          <AntDesign name="heart" size={24} color={"green"} />
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

I think this error is because my import of react-native-card-swiper does not go through after I stupidly install something wrong in the app

Answer 1

Try wraping renderCard inside a fragment like this:

renderCard={(card) =>
        <>
            {card ? (
              <CardELements />
            ) : (
              <NonCardElements />
            )}
        </>