ReactNative) How to fix SSRProvider warning ??

문제 발생 시점 : 아임포트를 사용할 때 (결제버튼을 통해 PaymentTest스크린으로 이동할 때)

 

문제 원인 & 해결  

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.

....

 

1. SSR Package 설치

npm i @react-aria/ssr

2. import 하고 전체 컴포넌트를 감싸준다

// App.js

import { NavigationContainer } from '@react-navigation/native';
import * as Font from "expo-font"
import AppLoading from 'expo-app-loading';
import React, { useState, useEffect } from 'react';
import InStack from './app/navigators/InStack';
import OutStack from './app/navigators/OutStack'
import { SafeAreaView } from 'react-native-safe-area-context';
import auth from '@react-native-firebase/auth';

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

export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const[isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(async()=>{
    await auth().onAuthStateChanged((user)=>{
      if(user){
        setIsLoggedIn(true)
      }else{
        setIsLoggedIn(false)
      }
    })
  },[])

  const startLoading = async () =>{
    // 로딩하고 싶은 것들을 담는 공간 
    // (ex. API호출 혹은 정보를 받거나 video요소를 미리 받아놓거나, DB를 미리 열거나, 아이콘을 미리준비)
    await Font.loadAsync({
        "SDChild": require("./app/asset/fonts/SDChildfundkorea.otf")
    })
  };



  if(!ready){
    return (
    <AppLoading
      startAsync={startLoading}
      onFinish={onFinish}
      onError={console.log} />
      // ready가 안되어있으면 AppLoading은 splash screen을 비추도록 강제하고 startAsync를 호출,
      // startAsync가 완료되면 AppLoading은 onFinish함수를 호출, 
      // onFinish는 state를 변경시키고 state가 변경되면 조건문 else에 해당하는 부분을 render한다
    );
  }

  return (
    <SSRProvider>
      <NativeBaseProvider>
        <NavigationContainer>
          {ready && (
            <SafeAreaView style={{flex:1}}>
              {isLoggedIn ? <InStack />: <OutStack />}
            </SafeAreaView>
          )}
        </NavigationContainer>
      </NativeBaseProvider>
    </SSRProvider>
  )
}