[ React Native / Android&iOS ] 인 앱 브라우저 환경 설정하기

안녕하세요! 언제나 그렇듯 저는 RN Webview와 매번 싸우다가 이번에는 인 앱 환경을 개선하라는 이유로 Reject을 당했어요ㅜㅜㅜ 그래서 이유가 정확하게 무엇이냐!

살펴보았더니 저희는 아무래도 웹뷰 앱이다보니 외부 링크로 이동하는 케이스가 정말 많아요. Youtube, Instagram, Brunch 등등 외부 플랫폼에 연결되어 있는 부분이 정말 많다보니 링크를 클릭하면 크롬 앱으로 이동한다는 것 자체에 살짝 문제가 있어보이더라구요, 그래서 서칭하기 시작한 것이 바로 React-Native의 인앱 브라우저는 어떻게 띄우지? 였는데 역시 킹 갓 Chat Gpt 형님께서 잘 찾아주셔서 어렵지 않게 해낼 수 있었어요,, 지금부터 제가 겪었던 내용들과 적용시킨 것을 공유드릴게요!

우선 react-native-inappbrowser-reborn 이라는 패키지를 설치를 해주셔야해요.
저는 이 방법으로 우선 설치를 했습니다.

npm install react-native-inappbrowser-reborn --save

그 다음으로 iOS 환경이시라면 꼭 해주셔야 하는 작업 잊지 말기! 프로젝트 루트로 가셔서

cd ios && pod install && cd ..

그 다음에 예시 코드를 보시면 추가 해야하는 부분들은 제가 주석으로 다 달아놨어요 생각보다 금방 적용해볼 수 있어서 다행이였어요.

import React from 'react';
import { View, Linking } from 'react-native';
import { WebView } from 'react-native-webview';
// 여기 부분 추가
import InAppBrowser from 'react-native-inappbrowser-reborn'; 


const MyWebView = () => {
  const handleLinkPress = async (url) => {
    try {
      if (await InAppBrowser.isAvailable()) {
        await InAppBrowser.open(url, {
          // iOS 프로퍼티 참고
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          // Android 프로퍼티 참고
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          navigationBarColor: 'black',
          navigationBarDividerColor: 'white',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
        });
      } else {
        Linking.openURL(url);
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: 'https://example.com' }}
        onShouldStartLoadWithRequest={(event) => {
          if (event.url !== 'https://example.com') {
            handleLinkPress(event.url);
            return false;
          }
          return true;
        }}
      />
    </View>
  );
};

export default MyWebView;

각 플랫폼 별 프로퍼티에 대해서 조금 더 자세히 설명을 해드리자면 ( 이미지 참고 )

• iOS

1. dismissButtonStyle [ String ]
   이 경우에는 이제 버튼을 어떤 버튼으로 생성할 것이냐 인데요 우리가 아이폰을 쓰다보면 띄워지는 인앱 브라우저에서 취소, 완료, 닫기 등등 다양한 버튼으로 보셨을 건데요 옵션에는 close, cancel, done 이 있으니 필요한 것 골라서 쓰시면 될 것 같습니다.

2. preferredBarTintColor [ String ]
   상단에 탭 색깔을 어떻게 변경할 것이냐 인데요 RGB 컬러 16진수로 표현을 해주시면 돼요

3. preferredContorlTintColor [ String ]
   위에서 설정한 dismissButtonStyle의 글자 색깔을 변경하는 부분입니다!

4. readerMode [ Boolean ]
   이제 인 앱 브라우저가 사파리로 열리게 되는데, 읽기모드로 열 것인지 아닌지를 판단하는 부분이에요 true로 설정하면 읽기모드 활성화, false로 설정하면 비활성화입니다!
   이 부분이 무슨 역할을 하는지 궁금해하실 여러분을 위해 부가설명 드리자면
   읽기 모드로 열면 웹 페이지의 본문 콘텐츠만 보여주고, 광고나 불필요한 요소들을 제거하여 더 깨끗하고 집중할 수 있는 환경을 제공한다고 하네요!

5. animated [ Boolean ]
   true로 설정하면 아래에서 위로 올라오는 애니메이션이 적용이 되구요! false라면 그냥 페이지가 똭! 하고 뜨게 되는 설정이에요

6. modalPresentationStyle [ String ]
   인앱 브라우저 창을 어떤 방식으로 표시할지 설정하는 옵션

• fullScreen: 전체 화면으로 표시됩니다.
• pageSheet: 화면 중앙에 모달로 표시됩니다.
• formSheet: 화면 하단에 모달로 표시됩니다.
• currentContext: 현재 화면 컨텍스트에 맞춰 표시됩니다.
• overFullScreen: 전체 화면을 덮는 형태로 표시됩니다.

7. modalTransistionStyle [ String ]
   모달 화면이 표시되거나 사라질 때의 전환 효과를 설정하는 옵션

• coverVertical: 화면 아래에서 위로 올라오는 효과
• flipHorizontal: 가로로 뒤집히는 효과
• crossDissolve: 서서히 사라지고 나타나는 효과
• partialCurl: 페이지가 말리는 효과

8. modalEnabled [ Boolean ]
   modalEnabled 프로퍼티는 모달 화면의 활성화 여부를 설정하는 옵션
   당연히 True로 설정해주셔야 모달창이 나타나겠죠?

제가 설정한 프로퍼티는 딱 여기 까지인데요! 공식 문서를 참조해보시면 더 많은 설정들을 참고하실 수 있어요, 영어로 되어있다보니 제 게시물 참고하셔서 설정하시면 좀 더 편하게 하실 수 있으실 것 같습니다.

참고 자료
https://www.npmjs.com/package/react-native-inappbrowser-reborn