skip to Main Content

I have a native react app. And I have this simple objects:

export const AnimalGroupScreen = () => (
    <SafeAreaView style={styles.container}>
        <View style={styles.search}>
            <Searchbar />
        </View>
        <View style={styles.list}>
            <AnimalGroupInfo />
        </View>
    </SafeAreaView>
);

import React from "react";
import { Text } from "react-native";

export const AnimalGroupInfo = () => <Text> Hello there</Text>;

and app:

import { AnimalGroupScreen } from "./src/features/animalGroup/screens/animal-group-screen";
/* eslint-disable prettier/prettier */
import ExpoStatusBar from "expo-status-bar/build/ExpoStatusBar";
import React from "react";

export default function App() {
    return (
        <>
            <AnimalGroupScreen />;
            <ExpoStatusBar style="auto" />
        </>
    );
}

But I still get this error:

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

This error is located at:
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)

And of course I searched for this error. But I only have a Text tag in the Info component.

And that seems correct. So how to tackle this error?

2

Answers


  1. remove ; from <AnimalGroupScreen />;

    Login or Signup to reply.
  2. You have a semicolon here:

    <AnimalGroupScreen />;
    

    Remove it and it should work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search