[React Native] 모바일 초보자의 트러블 슈팅

React Native 를 더 쉽게 사용할 수 있도록 해주는 프레임워크 및 개발도구인 Expo 를 사용하여 간단한 모바일 앱을 만들고 출시하게 되었다. 이 과정에서 있었던 트러블 슈팅 내용을 기록하려고 한다.
 
1. 폰트 적용
- 현상
  > 정해진 폴더에 적용하고자 하는 폰트 파일을 위치시킨 후, 해당 앱에서 폰트를 적용하려고 했으나 생각한대로 되지 않았다.
 
- 해결 방법

// App.js 파일에서,

import { createContext } from 'react';
import { setCustomText } from 'react-native-global-props';

const ThemeContext = createContext({
    fontFamily: 'concon',
});

export default function App() {
	...생략...
    setCustomText({
    	style: {
       	    fontFamily: 'concon'
        }
    });
    
    const theme = {
    	fontFamily: 'concon',
    };
    ...생략...
    return (
    	<ThemeContext.Provider value={theme} theme={theme}>
        	...생략...
	</ThemeContext.Provider>
    );
}

 
2. 페이지 이동
- 현상
  > 두 개 이상의 페이지 간 이동이 정상적으로 이루어지지 않았다.
 
- 해결 방법

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import MainRouter from './screens/Main';
import ResultRouter from './screens/Result';

export default function App() {

    const Stack = createNativeStackNavigator();
    
    return (
        ...생략...
        <NavigationContainer>
            <Stack.Navigator>
            	<Stack.Screen name="Main" component={MainRouter} />
                <Stack.Screen name="Result" component={ResultRouter} />
            </Stack.Navigator>
        </NavigationContainer>
        ...생략...
    );
}

 
3. Expo 와 React Native 간 호환성
- 현상
  > Expo go 로 실행했을 때 에러가 발생하지 않던 코드가 Development Build 로 실행하면 발생하는 문제가 있었다.
구체적인 에러 메세지는 다음과 같다.
 
ViewManagerResolver returned null for either RNCSafeAreaProvider or RCTRNCSafeAreaProvider, existing names are: [DebuggingOverlay, RCTSafeAreaView, RNSScreenFooter, RNSScreenContainer, AndroidProgressBar, RNSModalScreen, AndroidHorizontalScrollView, RCTText, AndroidHorizontalScrollContentView, RCTView, RNSScreen, AndroidSwitch, RNSScreenStack, RNSSearchBar, RNSGestureHandlerButton, RCTModalHostView, RNDatePicker, RCTTextInlineImage, RCTImageView, RNSScreenStackHeaderConfig, UnimplementedNativeView, RNSScreenContentWrapper, RCTScrollView, AndroidDrawerLayout, RCTVirtualText, AndroidDrawerLayout, RCTVirtualText, AndroidSwipeRefreshLayout, RCTLawText, RNSScreenStackHeaderSubview, AndroidTextInput, RNGestureHandlerRootView]
 
- 해결 방법

import { enableScreens } from 'react-native-screens';

export default function App() {
    enableScreens();
    
    ...생략...
}

 
4. 파일 경로
- 현상
  > 파일의 uri 값이 OS 에 따라 달라져서 경로를 각 경우에 맞춰 설정해야 했다.
 
- 해결 방법

import { useRef } from "react";
import ViewShot from "react-native-view-shot";

const viewShotRef = useRef();
let fixedUrl = '';

const uri = await viewShotRef.current.capture({
    format: "jpg",
    quality: 1,
    backgroundColor: "yellow",
}); 

if(Platform.OS === 'ios') {
    fixedUri = `file:/${uri}`;
} else {
    fixedUri = uri;
}

 
 
이외에도 작은 트러블 슈팅 건들이 있었고, 앞으로 개발 확장 시 발생하는 에러 및 트러블 슈팅 내용에 대해 추가로 덧붙여 나가려고 한다.