I have the following code on my App.tsx:

import React from 'react';
import AppNavigator from './navigations/AppNavigator';
import {Provider} from 'react-redux';
import store from './redux/store';

interface Props {}

const App: React.FC<Props> = () => {
  return (
    <Provider store={store}>
      <AppNavigator />;
    </Provider>
  );
};

export default App;

Basically on my `AppNavigator`, I have the ff codes:
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

import LoginScreen from '../src/screens/LoginScreen';
import RegisterScreen from '../src/screens/RegisterScreen';
import HomeScreen from '../src/screens/HomeScreen';

interface Props {}

const AppNavigator: React.FC<Props> = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="LoginScreen"
          component={LoginScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="RegisterScreen"
          component={RegisterScreen}
          options={{title: 'Create account', headerBackTitle: 'Sign In'}}
        />
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

But when I run this on ios, it threw me this error:

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

    This error is located at:
        in Provider (at App.tsx:10)
        in App (at renderApplication.js:50)
        in RCTView (at View.js:32)
        in View (at AppContainer.js:92)
        in RCTView (at View.js:32)
        in View (at AppContainer.js:119)
        in AppContainer (at renderApplication.js:43)
        in terpReactNative(RootComponent) (at renderApplication.js:60)

Any idea what's causing this? How can I solve this?

CodePudding user response：

You have a ; in there that React interprets as text.

It should be

const App: React.FC<Props> = () => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

not

const App: React.FC<Props> = () => {
  return (
    <Provider store={store}>
      <AppNavigator />;
    </Provider>
  );
};