How to fix SSRProvider warning in React Native and NextJS

When working with app using React Native, React will ask for an SSRProvider to be used to wrap your main provider. This allows for auto-generated IDs to be passed between the client device (iOS and Android) to the server which is running your application; In this case, the server is Expo Go launched from a terminal.

Wrapping your application in an SSRProvider ensures that your apps client code is compiled on the server first then delivered to the DOM so that all IDs (and similar meta data) stays consistent.

Next.JS handles Server Side Rendering which can be enabled on a page by page basis or across your whole application. But if you are using more of Vanilla React than Next.JS and can not use the build-in Next.JS Server Side Render methods then you may come across the SSRProvider warning.

Terminal/Console Error

“When server rendering, you must wrap your application in an to ensure consistent ids are generated between the client and server.”

Working Solution

Add SSR Package

npm i @react-aria/ssr or yarn add @react-aria/ssr 

Import SSR

import {SSRProvider} from '@react-aria/ssr'; 

Wrap APP and other providers

Wrap your main app or current provider with SSRProvider. The example below: React Native + Nativebase.IO

<SSRProvider> <NativeBaseProvider> <App /> </NativeBaseProvider> </SSRProvider> 

Terminate, rebuild, and/or reload the app. (Clear NPM cache if needed.)