React Native - 이메일 전송 / 스토어 연결

React Native에서 이메일을 발송하기 위해서는 react-native-mail 이라는 npm 혹은 기본으로 제공되는 기능을 사용하면 된다. 본인은 RN에서 제공하는 Linking 기능이 너무 간단하고 충분했기 때문에 별도의 라이브러리를 사용하지 않았다. Linking 기능을 통해 이메일을 발송하는 방법과 어플 스토어 링크를 연결하는 방법을 정리한다.

 

1. 코드

// test2.tsx

import CustomText from '@/components/text';
import {Test2Props} from '@/types/stack';
import {Button, Linking, Pressable, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useEffect} from 'react';
import HomeOutlineIcon from '@assets/svg/home-outline.svg';

const Test2Screen = ({navigation}: Test2Props) => {
  const sendEmail = () => {
    const contents = `mailto:test@test.com?cc=test2@test.com&subject=[테스트] 이메일&body=------------------------------------------------------------------------\n\n테스트 이메일입니다.\n\n------------------------------------------------------------------------\n\n`;
    Linking.openURL(contents);
  };

  const openStoreLink = async () => {
    const GOOGLE_PLAY_STORE_LINK = 'market://details?id=com.instagram.android';
    const GOOGLE_PLAY_STORE_WEB_LINK =
      'https://play.google.com/store/apps/details?id=com.instagram.android';
    const supported = await Linking.canOpenURL(GOOGLE_PLAY_STORE_LINK);

    if (supported) await Linking.openURL(GOOGLE_PLAY_STORE_LINK);
    else await Linking.openURL(GOOGLE_PLAY_STORE_WEB_LINK);
  };

  // Header button
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Pressable
          className="px-6"
          onPress={() => navigation.navigate('Main', {screen: 'Home'})}>
          <HomeOutlineIcon />
        </Pressable>
      ),
    });
  }, [navigation]);

  return (
    <SafeAreaView className="flex-1">
      <View className="w-full h-full flex justify-center items-center bg-white">
        <CustomText className="text-success text-xl" children="테스트 화면" />
        <Button title="이메일 전송" onPress={sendEmail} />
        <Button title="스토어 리뷰작성" onPress={openStoreLink} />
      </View>
    </SafeAreaView>
  );
};

export default Test2Screen;

 

Linking 은 앱 링크의 대부분과 상호작용하는 인터페이스를 제공하는 기능이다. 따라서 메일을 전송하기 위해서는 openUrl 메소드와 함께 mailTo를 활용하면 된다.

 

첫 번째로 이메일 전송을 살펴보면,

• mailTo : 이메일의 from
• cc : 참조 이메일
• subject : 제목
• body : 내용

정말 간단하게 이메일을 구현할 수 있다. 이 때, 당연히 원하는 변수도 포함시켜 보낼 수 있다.

 

두 번째로 스토어 연결을 살펴보면,

마찬가지로 openUrl을 사용하면 된다. 다만 그 전에 canOpenUrl 메소드를 통해 play store의 링크가 존재하는지를 확인하는 사전 작업이 필요하다. 링크가 존재한다면 스토어 링크를 통해 어플로 연결해주고 없다면 웹 스토어 링크를 통해 연결하는 방식이다.

스토어 링크 변수값에서 'id=' 뒤에 오는 값은 각자 출시한 스토어의 id 값을 넣어주면 된다.(android/app/build.gradle 에 있는 applicationId 값과 동일하다.)

 

 

2. 실행

테스트해보면 잘 실행되는 것을 확인할 수 있다.