React Native 'PersistGate' cannot be used as a JSX component. Its instance type 'PersistGate' is not a valid JSX element

Question

I am using @redux/toolkit with redux-persist in a react native application with TypeScript.

store.ts

    import { configureStore } from '@reduxjs/toolkit';
    import { combineReducers } from 'redux';
    import { persistReducer, persistStore } from 'redux-persist';
    import thunk from 'redux-thunk';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    import calenderReducer from './reducer/calender';

    const reducers = combineReducers({
    graph: calenderReducer,
    });

    const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    };

    const persistedReducer = persistReducer(persistConfig, reducers);

    export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk],
    });

    // Infer the `RootState` and `AppDispatch` types from the store itself
    export type RootState = ReturnType<typeof store.getState>;
    // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
    export type AppDispatch = typeof store.dispatch;
    export const persistor = persistStore(store);

App.tsx

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <View style={styles.container}>
            <Text>Hello World</Text>
            <StatusBar style='auto' />
          </View>
        </PersistGate>
      </Provider>
    </ApolloProvider>
  );

This PersistGate Showing an Error Like this

Do you have any idea to resolve the issue??

Answer 1

I just added,

"resolutions": {
   "@types/react": "17.0.2",
   "@types/react-dom": "17.0.2"
},

This in package.json and run yarn. The Problem is solved then.

Answer 2

Your error could be because of the new version of react 18. If you are using version 17, try the following versions:

"dependencies":
"@reduxjs/toolkit": "1.7.2",
"@react-native-async-storage/async-storage": "~1.15.0",
"react-redux": "7.2.4",
"react-dom": "17.0.1",
"react": "17.0.1",

devDependencies
"@types/react": "~17.0.21",

Answer 3

I just do

const PGate = PersistGate as any

and use <PGate> as I would PersistGate.

Just to satisfy it while a fix is not on the main repo yet.