PINE proがQRコードで連絡先を追加できるようにしました

yarn add react-native-custom-qr-codes-expo react-native-svg

expo install expo-barcode-scanner

"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "net.votepurchase.pine",
  "buildNumber": "1.0.8",
  "infoPlist": {
    "NSCameraUsageDescription": "Used to add a user to your contacts with a QR code.",
    "NSPhotoLibraryUsageDescription": "Use the photo library to change your avatar and send images in chat."
  },
  "userInterfaceStyle": "automatic"
},
"android": {
  "package": "net.votepurchase.pine",
  "versionCode": 10,
  "googleServicesFile": "./google-services.json",
  "userInterfaceStyle": "automatic",
  "permissions": [
    "VIBRATE",
    "CAMERA"
  ]
},

import Scan from '../../scenes/scan'

const ProfileNavigator = () => {
  return (
    <Stack.Navigator headerMode="screen" screenOptions={navigationProps}>
      <Stack.Screen name="Profile">
        {props => <Profile {...props} extraData={user} />}
      </Stack.Screen>
      <Stack.Screen name="Detail">
        {props => <Detail {...props} extraData={user} />}
      </Stack.Screen>
      <Stack.Screen name="Scan">
        {props => <Scan {...props} extraData={user} />}
      </Stack.Screen>
      <Stack.Screen name="User">
        {props => <User {...props} extraData={user} />}
      </Stack.Screen>
    </Stack.Navigator>
  )
}

import { QRCode } from 'react-native-custom-qr-codes-expo'

<View style={styles.qr}>
  <QRCode
    content={userData.email}
    color={scheme === 'dark' ? 'white' : 'black'}
    size={200}
  />
</View>

const goScan = () => {
  props.navigation.navigate('Scan', { userData: userData })
}

<TouchableOpacity style={styles.sbutton} onPress={goScan}>
  <Text style={styles.buttonText}>Scan</Text>
</TouchableOpacity>

import React, { useEffect, useState } from 'react'
import { Text, View, StatusBar, useColorScheme } from 'react-native'
import styles from './styles'
import { firebase } from '../../firebase/config'
import { BarCodeScanner } from 'expo-barcode-scanner'

export default function Scan({ route, navigation }) {
  const [hasPermission, setHasPermission] = useState(null) // パーミッションの状態を制御
  const [scanned, setScanned] = useState(false) // QRコードの読み取り状態を制御
  const scheme = useColorScheme()
  const userData = route.params.userData // プロフィール画面から受け取った自分の情報

  useEffect(() => { // カメラパーミッションを取得
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({ type, data }) => { // QRコードを読み取った時に動かす関数、dataにはQRコードに埋め込まれていたメールアドレスが入っている
    setScanned(true)
    const usersRef2 = firebase.firestore().collection('users2').doc(data) // 読み込んだメールアドレスを元にFirestoreからユーザー情報を取得
    usersRef2.get().then((doc) => {
      const userProfile = doc.data()
      setScanned(false) // この画面に戻ってきたときに再びQRコードを読み取れるように、画面遷移前に読み取り状態をfalseにしておく
      navigation.navigate('User', { user: userProfile, myProfile: userData }) // 自分の情報とFirestoreから取得したユーザー情報を持って次の画面に遷移する
    }).catch((error) => {
      console.log("Error getting document:", error);
      setScanned(false)
    });
  };

  // パーミッション取得まで表示しておく待機メッセージ
  if (hasPermission === null) {
    return <Text style={scheme === 'dark' ? styles.darkfield : styles.field}>Requesting for camera permission</Text>;
  }

  // パーミッションが取得できなかった場合に表示するメッセージ
  if (hasPermission === false) {
    return <Text style={scheme === 'dark' ? styles.darkfield : styles.field}>No access to camera</Text>;
  }
  
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={styles.scan}
      >
        <View style={styles.overlay}>
          <View style={styles.preloader}>
            <Text>Scan a QR code</Text>
          </View>
        </View>
      </BarCodeScanner>
    </View>
  )
}

import { StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window')
const qrSize = width * 0.8

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  scan: {
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  field: {
    fontSize: 15,
  },
  darkfield: {
    fontSize: 15,
    color: 'white',
  },
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  preloader: {
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    justifyContent: 'center',
    alignItems: 'center',
    width: qrSize,
    height: qrSize,
    borderRadius: 50,
  },
})