Solve Problem/React Native

[React Native] 인앱리뷰 기능 In-App Review

안다희 2021. 8. 26. 11:40
728x90

 

라이브러리

https://github.com/MinaSamir11/react-native-in-app-review

 

설치
$ npm install react-native-in-app-review
or
$ yarn add react-native-in-app-review

 

사용법

라이브러리에서 제공하는 예제입니다.

import InAppReview from 'react-native-in-app-review';
// This package is only available on android version >= 21 and iOS >= 10.3

// Give you result if version of device supported to rate app or not!


// trigger UI InAppreview

  .then((hasFlowFinishedSuccessfully) => {
    // when return true in android it means user finished or close review flow
    console.log('InAppReview in android', hasFlowFinishedSuccessfully);

    // when return true in ios it means review flow lanuched to user.
    console.log(
      'InAppReview in ios has lanuched successfully',
      hasFlowFinishedSuccessfully,
    );

    // 1- you have option to do something ex: (navigate Home page) (in android).
    // 2- you have option to do something,
    // ex: (save date today to lanuch InAppReview after 15 days) (in android and ios).

    // 3- another option:
    if (hasFlowFinishedSuccessfully) {
      // do something for ios
      // do something for android
    }

    // for android:
    // The flow has finished. The API does not indicate whether the user
    // reviewed or not, or even whether the review dialog was shown. Thus, no
    // matter the result, we continue our app flow.

    // for ios
    // the flow lanuched successfully, The API does not indicate whether the user
    // reviewed or not, or he/she closed flow yet as android, Thus, no
    // matter the result, we continue our app flow.
  })
  .catch((error) => {
    //we continue our app flow.
    // we have some error could happen while lanuching InAppReview,
    // Check table for errors and code number that can return in catch.
    console.log(error);
  });

 

리뷰 이후에도 여러 동작을 할 수 있어보입니다.

 

저는 간단하게 리뷰 모달만 띄워주면 될 것 같아서 짧게 써볼게요!

import { Linking, Platform } from 'react-native';

...

const APP_STORE_LINK = `itms-apps://apps.apple.com/app/id${IOS_APP_ID}?action=write-review`;
const PLAY_STORE_LINK = `market://details?id=${ANDROID_APP_ID}`;

const STORE_LINK = Platform.select({
  ios: APP_STORE_LINK,
  android: PLAY_STORE_LINK,
});

const openReviewInStore = () => {
	
  if (InAppReview.isAvailable()) {
	  // This package is only available on android version >= 21 and iOS >= 10.3
      InAppReview.RequestInAppReview()
  } else {
	  Linking.openURL(STORE_LINK);
  }
}

참고라이브러리: https://github.com/oblador/react-native-store-review

react-native-store-review

react-native-in-app-review

참고로 라이브러리는 어떤것을 쓰셔도 무방합니다!

 

isAvailable하지 않다면 해당 스토어로 가도록 했습니다.

 

안드로이드 오류

iOS는 잘 실행되실텐데, 안드로이드는 아무일도 안일어나서 당황하셨을겁니다!

바로 플레이스토어에서 내부앱공유 설정을 하지 않아서인데요, 설정하는 방법을 알려드리겠습니다.

 

1. (개발자) Google Play Console - 앱 - 설정 - 내부 앱 공유 - 업로더 및 테스터에 테스트할 계정을 등록한다.

2. (개발자) https://play.google.com/console/internal-app-sharing 이곳에 apk를 등록하고 다운로드 링크를 테스터에게 공유한다.

3. (테스터) Play 스토어 앱 - 설정 - '정보' 섹션 - Play 스토어 버전 7번 탭한다.

-> '일반' 섹션에 가면 '내부 앱 공유' 스위치가 보인다. ON한다.

-> 개발자가 공유한 다운로드 링크를 클릭해 다운받는다

 

이제 테스터가 다운받은 앱에서 테스트해보면 인앱리뷰 모달이 정상적으로 뜨는걸 보실 수 있습니다🤩

 

출처: https://support.google.com/googleplay/android-developer/answer/9844679?hl=ko 

 

끝!
출처: https://mingos-habitat.tistory.com/34 [밍고의서식지:티스토리]