【アプリを作ろう】Expo + React Native + amplify【プッシュ通知編】

ReactNative(expo)を使い、amplifyで認証機能を実装して、
expoのプッシュ通知が動くかを実機端末で確認してみます。

1 CLI install
2 プロジェクト作成
3 認証機能を実装
4 通知機能を実装
5 Expoアプリをインストール
6 Expoサイトから端末にテスト送信

CLI install

yarn add global expo-cli

プロジェクト作成

expo init expo-amplify

AWS Amplify ライブラリのローカル依存関係をinstall

cd expo-amplify
yarn add aws-amplify aws-amplify-react-native

yarn start

yarn add global @aws-amplify/cli

amplify configure

amplify init

認証機能を実装

amplify add auth

amplify push

App.js

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Amplify from '@aws-amplify/core'
import config from './src/aws-exports'
import { withAuthenticator } from 'aws-amplify-react-native'
Amplify.configure(config)
function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  )
}
export default withAuthenticator(App, {includeGreetings: true})
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

通知機能を実装

App.js

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Amplify from '@aws-amplify/core'
import config from './src/aws-exports'
import { withAuthenticator } from 'aws-amplify-react-native'
import { Notifications } from 'expo'
import * as Permissions from 'expo-permissions'
import Constants from 'expo-constants'

Amplify.configure(config)

const App = () => {
  registerForPushNotificationsAsync = async () => {
    if (Constants.isDevice) {
      const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS)
      let finalStatus = existingStatus
      if (existingStatus !== 'granted') {
        const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS)
        finalStatus = status
      }
      if (finalStatus !== 'granted') return
      let token = await Notifications.getExpoPushTokenAsync()
      alert(token)
    } else {
      alert('実機端末を使用してください。')
    }
  }

  React.useEffect(() => {
    registerForPushNotificationsAsync()
  }, [])

  return (
    <>
      <View style={styles.container}>
        <WelcomeScreen />
      </View>
    </>
  )
}

export default withAuthenticator(App, {includeGreetings: true})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})