출처 : https://coding-dahee.tistory.com/210

목적: 앱 내 화면을 그대로 이미지로 추출하여 카카오톡이나 인스타로 공유 및 갤러리에 저장을 하고 싶음

1. 환경

react-native: 0.61.5

react-native-view-shot: 3.1.2

react-native-share: 3.7.0

@react-native-community/cameraroll: 4.0.0

2. 설치

1) react-native-view-shot

=> 오토링크!

2) react-native-share

=> 오토링크!

3) @react-native-community/cameraroll

=> 오토링크!

(https://coding-dahee.tistory.com/147 이곳에서 cameraroll 설치 방법 자세히 보기!)

https://coding-dahee.tistory.com/147

3. Usage

일단 캡쳐하고 싶은 부분을 ViewShot으로 감싸준다.

그리고 어떠한 버튼을 눌러서 캡쳐를 할 것이므로 아래와 같이 코드를 작성해준다.

import React, { useRef } from 'react';
import { SafeAreaView, Button, PermissionsAndroid, Platform } from 'react-native';
import ViewShot from 'react-native-view-shot';
import Share from 'react-native-share';
import CameraRoll from '@react-native-community/cameraroll';

import { ShareBox } from './styled';

export default () => {
  const captureRef = useRef();

  const getPhotoUri = async (): Promise<string> => {
    const uri = await captureRef.current.capture();
    console.log('👂👂 Image saved to', uri);
    return uri;
  };

  const onCapture = async (social: Share.Social) => {
    try {
      const uri = await getPhotoUri();

      const options = {
        title: 'Share Title',
        message: 'Share Message',
        url: uri,
        type: 'image/jpeg',
      };

      if (social === null) {
        const result = await Share.open(options);
        console.log('😻😻 result with no social', result);
      } else {
        const result = await Share.shareSingle({
          ...options,
          social,
        });
        console.log(`😻😻 result with social ${social}`, result);
      }
    } catch (e) {
      console.log('😻😻😻 snapshot failed', e);
    }
  };

  const hasAndroidPermission = async () => {
    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;

    const hasPermission = await PermissionsAndroid.check(permission);
    if (hasPermission) {
      return true;
    }

    const status = await PermissionsAndroid.request(permission);
    return status === 'granted';
  };

  const onSave = async () => {
    if (Platform.OS === 'android' && !(await hasAndroidPermission())) {
      toast('갤러리 접근 권한이 없어요');
      return;
    }

    const uri = await getPhotoUri();
    const result = await CameraRoll.save(uri);
    console.log('🐤result', result);
  };

  return (
    <SafeAreaView>
      <ViewShot ref={captureRef} options={{ format: 'jpg', quality: 0.9 }}>
        <ShareBox>
          <SSubColorText>이 박스가 캡쳐됩니다</SSubColorText>
        </ShareBox>
      </ViewShot>

      <Button title="공유" onPress={() => onCapture(null)} />
      <Button title="인스타 공유" onPress={() => onCapture(Share.Social.INSTAGRAM)} />
      <Button title="갤러리에 저장" onPress={onSave} />
    </SafeAreaView>
  );
};