rewrite with typescript, remove i18n and image background

2024-11-30 18:24:31 +01:00 · 2023-02-06 19:48:53 +09:00 · 2023-02-06 19:48:53 +09:00 · f04aae3eb0
commit f04aae3eb0
parent eadd41f1d7
11 changed files with 547 additions and 824 deletions
--- a/App.tsx
+++ b/App.tsx
@ -1,29 +1,28 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
 import React from 'react';

-import MainScreen from './src/screens/MainScreen';
-// import CardEditScreen from './src/screens/CardEditScreen';
-
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';

-const Stack = createNativeStackNavigator();
+import MainScreen from './src/screens/MainScreen';
+import { Card } from './src/types';
+import CardEditScreen from './src/screens/CardEditScreen';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+export type RootStackParams = {
+  Main: undefined;
+  Add: undefined;
+  Edit: { card: Card; index: number };
+};
+
+const queryClient = new QueryClient();
+const Stack = createNativeStackNavigator<RootStackParams>();

 const App = () => {
  return (
+    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name={'Main'}
-          component={MainScreen}
-          options={{
-            title: '홈',
+        <Stack.Navigator
+          screenOptions={{
            headerStyle: {
              backgroundColor: '#fff',
            },
@ -32,41 +31,28 @@ const App = () => {
              fontWeight: 'bold',
            },
          }}
+        >
+          <Stack.Screen
+            name={'Main'}
+            component={MainScreen}
+            options={{
+              title: '홈',
+            }}
+          />
+          <Stack.Screen
+            name={'Add'}
+            component={CardEditScreen}
+            options={{ title: '카드 추가' }}
+          />
+          <Stack.Screen
+            name={'Edit'}
+            component={CardEditScreen}
+            options={{ title: '카드 편집' }}
          />
-        {/*<Stack.Screen name={'Edit'} component={CardEditScreen} />*/}
        </Stack.Navigator>
      </NavigationContainer>
+    </QueryClientProvider>
  );
 };

 export default App;
-
-/*
-export default class App extends React.Component {
-  constructor(props) {
-    super(props);
-    setI18nConfig();
-  }
-
-  componentDidMount() {
-    RNLocalize.addEventListener('change', this.handleLocalizationChange);
-  }
-
-  componentWillUnmount() {
-    RNLocalize.removeEventListener('change', this.handleLocalizationChange);
-  }
-
-  handleLocalizationChange = () => {
-    setI18nConfig();
-    this.forceUpdate();
-  };
-
-  render() {
-    return (
-      <>
-        <AppContainer />
-      </>
-    );
-  }
-}
-*/
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@ -1,9 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="tk.nulldori.eamemu">
+  package="dev.nulldori.eamemu">

    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.CAMERA" />
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-feature android:name="android.hardware.nfc.hcef" android:required="true"/>
    <uses-permission android:name="android.permission.NFC"/>

--- a/package.json
+++ b/package.json
@ -9,23 +9,19 @@
    "test": "jest"
  },
  "dependencies": {
-    "@gorhom/bottom-sheet": "^4",
-    "@react-native-community/async-storage": "^1.7.1",
+    "@react-native-async-storage/async-storage": "^1.17.11",
+    "@react-native-clipboard/clipboard": "^1.11.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^6.1.3",
    "@react-navigation/native-stack": "^6.9.9",
    "react": "18.2.0",
-    "react-addons-update": "^15.6.2",
    "react-native": "0.71.2",
-    "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "^2.9.0",
-    "react-native-image-crop-picker": "^0.28.0",
-    "react-native-reanimated": "^2.14.4",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.19.0",
    "react-native-shadow-2": "^7.0.6",
    "react-native-svg": "^13.8.0",
-    "react-native-vector-icons": "^9.2.0"
+    "react-native-vector-icons": "^9.2.0",
+    "react-query": "^3.39.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
@ -35,6 +31,7 @@
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
+    "@types/react-native-vector-icons": "^6.4.13",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@ -1,24 +1,60 @@
-import React, { useMemo } from 'react';
-import {
-  ImageBackground,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { Card } from '../types';
+import React, { useMemo, useCallback } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useQuery } from 'react-query';
 import { Shadow } from 'react-native-shadow-2';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+import CardConv from '../modules/CardConv';
+import { Card } from '../types';

 interface CardViewProps {
  card: Card;
-  isEnabled?: boolean;
-  onPress?: (card: Card) => unknown;
-  onEdit?: (card: Card) => unknown;
-  onDelete?: (card: Card) => unknown;
+  index: number;
+  mainText: string;
+  disabledMainButton?: boolean;
+  hideBottomMenu?: boolean;
+  onPress?: (index: number) => unknown;
+  onEdit?: (index: number) => unknown;
+  onDelete?: (index: number) => unknown;
 }

 const CardView = (props: CardViewProps) => {
+  const { card, index, onPress: onPressFromProps, onEdit, onDelete } = props;
+
+  const onPress = useCallback(() => {
+    onPressFromProps?.(index);
+  }, [onPressFromProps, index]);
+
+  const uid = useQuery(['uid', card.sid], () => CardConv.convertSID(card.sid));
+
+  const styledUid = useMemo(() => {
+    if (uid.isSuccess) {
      return (
+        uid.data.match(/[A-Za-z0-9]{4}/g)?.join(' - ') ??
+        '올바르지 않은 카드 번호'
+      );
+    } else {
+      return '카드 번호 로딩중...';
+    }
+  }, [uid]);
+
+  const copyUid = useCallback(() => {
+    if (uid.isSuccess) {
+      Clipboard.setString(uid.data);
+    }
+  }, [uid]);
+
+  const onPressDelete = useCallback(() => {
+    onDelete?.(index);
+  }, [index, onDelete]);
+
+  const onPressEdit = useCallback(() => {
+    onEdit?.(index);
+  }, [index, onEdit]);
+
+  return (
+    <>
      <Shadow
        containerStyle={styles.shadowContainer}
        style={styles.shadowChildContainerStyle}
@ -26,9 +62,52 @@ const CardView = (props: CardViewProps) => {
        offset={[0, 2]}
      >
        <View style={styles.background}>
-        <Text>Card 1</Text>
+          <TouchableOpacity
+            style={styles.activateButton}
+            onPress={onPress}
+            disabled={props.disabledMainButton ?? false}
+          >
+            <View style={styles.topLeftArea}>
+              <TouchableOpacity onPress={copyUid}>
+                <Text
+                  style={styles.cardNameText}
+                  numberOfLines={1}
+                  ellipsizeMode={'tail'}
+                >
+                  {card.name}
+                </Text>
+                <View style={styles.cardNumberContainer}>
+                  <Text style={styles.cardNumberText}>{styledUid}</Text>
+                  <FontAwesome5
+                    name={'copy'}
+                    style={[styles.cardNumberCopyIcon]}
+                  />
+                </View>
+              </TouchableOpacity>
+            </View>
+
+            <Text style={styles.enableText}>{props.mainText}</Text>
+
+            {props.hideBottomMenu !== true && (
+              <View style={styles.bottomMenuContainer}>
+                <TouchableOpacity
+                  style={styles.bottomMenuButton}
+                  onPress={onPressEdit}
+                >
+                  <Text style={styles.bottomMenuButtonText}>편집</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.bottomMenuButton}
+                  onPress={onPressDelete}
+                >
+                  <Text style={styles.bottomMenuButtonText}>삭제</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </TouchableOpacity>
        </View>
      </Shadow>
+    </>
  );
 };

@ -36,7 +115,6 @@ const styles = StyleSheet.create({
  shadowContainer: {
    flex: 1,
    aspectRatio: 85.6 / 53.98,
-    marginHorizontal: 16,
  },
  shadowChildContainerStyle: {
    flex: 1,
@ -49,180 +127,64 @@ const styles = StyleSheet.create({
    resizeMode: 'contain',
    backgroundColor: 'skyblue',
  },
-  cardNameText: {
+  activateButton: {
+    flex: 1,
+    justifyContent: 'center',
+    borderRadius: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+  },
+  topLeftArea: {
    position: 'absolute',
-    top: 20,
-    left: 20,
-    fontSize: 17,
+    top: 16,
+    left: 16,
+    right: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  cardNameText: {
+    padding: 0,
+    fontSize: 16,
    fontWeight: 'bold',
    color: '#ffffff',
  },
+  cardNumberContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
  cardNumberText: {
-    paddingTop: 0,
-    textAlign: 'center',
    alignSelf: 'center',
-    color: '#E0E0E0',
+    color: '#f1f1f1',
    fontSize: 14,
  },
+  cardNumberCopyIcon: {
+    color: '#f1f1f1',
+    fontSize: 10,
+    paddingLeft: 4,
+  },
  enableText: {
-    paddingTop: 8,
    textAlign: 'center',
    alignSelf: 'center',
    fontSize: 24,
    color: '#FAFAFA',
    fontWeight: '500',
  },
-  submenuText: {
+  bottomMenuContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 48,
+    flexDirection: 'row',
+  },
+  bottomMenuButton: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomMenuButtonText: {
    fontSize: 14,
    color: '#FAFAFA',
  },
 });

 export default CardView;
-
-/*
-class Card extends React.Component {
-  async onPress() {
-    this.props.onPress(this.props.card, this.props.index);
-  }
-
-  async disable() {
-    if (typeof this.props.disableCallback === 'function') {
-      this.props.disableCallback(this.props.card, this.props.index);
-    }
-  }
-
-  render() {
-    let cardContent = (
-      <View
-        style={{
-          flex: 1,
-          backgroundColor: 'rgba(0,0,0,0.3)',
-          borderRadius: 8,
-        }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            style={{ flex: 1 }}
-            onPress={this.onPress.bind(this)}>
-            <Text
-              style={{
-                position: 'absolute',
-                top: 20,
-                left: 20,
-                fontSize: 17,
-                fontWeight: 'bold',
-                color: '#ffffff',
-              }}>
-              {this.props.card.name}
-            </Text>
-
-            <View style={{ flex: 1, justifyContent: 'center', paddingTop: 20 }}>
-              <Text
-                style={{
-                  paddingTop: 0,
-                  textAlign: 'center',
-                  alignSelf: 'center',
-                  color: '#E0E0E0',
-                  fontSize: 14,
-                }}>
-                {this.props.card.uid.substr(0, 4) +
-                  '-' +
-                  this.props.card.uid.substr(4, 4) +
-                  '-' +
-                  this.props.card.uid.substr(8, 4) +
-                  '-' +
-                  this.props.card.uid.substr(12, 4)}
-              </Text>
-              <Text
-                style={{
-                  paddingTop: 8,
-                  textAlign: 'center',
-                  alignSelf: 'center',
-                  fontSize: 24,
-                  color: '#FAFAFA',
-                  fontWeight: '500',
-                  letterSpacing: -0.5,
-                }}>
-                {this.props.card.enabled
-                  ? i18n.t('card_touch_to_disable')
-                  : i18n.t('card_touch_to_enable')}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        </View>
-        <View style={{ height: 1, backgroundColor: '#FAFAFA' }} />
-        <View style={{ height: 48, flexDirection: 'row' }}>
-          <TouchableOpacity
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            onPress={() =>
-              this.props.navigation.navigate('CardEditScreen', {
-                name: this.props.card.name,
-                sid: this.props.card.sid,
-                image: this.props.card.image,
-                index: this.props.index,
-                update: this.props.update,
-              })
-            }>
-            <Text style={{ fontSize: 14, color: '#FAFAFA' }}>
-              {i18n.t('card_edit')}
-            </Text>
-          </TouchableOpacity>
-          <View style={{ width: 1, backgroundColor: '#FAFAFA' }} />
-          <TouchableOpacity
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            onPress={() => this.props.delete(this.props.index)}>
-            <Text style={{ fontSize: 14, color: '#ffffff' }}>
-              {i18n.t('card_delete')}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-
-    return (
-      <View
-        style={[
-          {
-            borderRadius: 8,
-            height: this.props.cardHeight,
-            marginTop: 24,
-            marginHorizontal: 24,
-            justifyContent: 'center',
-          },
-        ]}>
-        {this.props.card.image ? (
-          <ImageBackground
-            source={{ uri: this.props.card.image }}
-            style={{
-              flex: 1,
-              resizeMode: 'contain',
-            }}
-            blurRadius={2}
-            borderRadius={8}>
-            {cardContent}
-          </ImageBackground>
-        ) : (
-          <View
-            style={{
-              flex: 1,
-              resizeMode: 'contain',
-              backgroundColor: '#03A9F4',
-            }}
-            blurRadius={2}
-            borderRadius={8}>
-            {cardContent}
-          </View>
-        )}
-      </View>
-    );
-  }
-}
-*/
--- a/src/data/cards.ts
+++ b/src/data/cards.ts
@ -0,0 +1,40 @@
+import { Card } from '../types';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const getCards: () => Promise<Card[]> = async () => {
+  const cardsJson = await AsyncStorage.getItem('cards');
+
+  if (cardsJson === null) {
+    return [];
+  }
+
+  try {
+    return JSON.parse(cardsJson) as Card[];
+  } catch (e) {
+    return [];
+  }
+};
+
+const setCards = async (cards: Card[]) => {
+  await AsyncStorage.setItem('cards', JSON.stringify(cards));
+};
+
+const addCard = async (card: Card) => {
+  const cards = await getCards();
+  cards.push(card);
+  await setCards(cards);
+};
+
+const updateCard = async (idx: number, card: Card) => {
+  const cards = await getCards();
+  cards[idx] = card;
+  await setCards(cards);
+};
+
+const removeCard = async (idx: number) => {
+  const cards = await getCards();
+  cards.splice(idx, 1);
+  await setCards(cards);
+};
+
+export { getCards, addCard, updateCard, removeCard };
--- a/src/locales/en.js
+++ b/src/locales/en.js
@ -1,41 +0,0 @@
-export default {
-  header_home: 'Home',
-  header_add: 'Add',
-  header_edit: 'Edit',
-
-  main_empty_string: 'Touch + button on top right to add a card',
-
-  edit_random: 'Random Generate',
-  edit_preview: 'Preview',
-  edit_sid_notice:
-    'SID is 16-digit hexadecimal number. Note that it is not a card number!',
-
-  edit_background: 'Background',
-  edit_background_empty: 'Touch here to select the background image',
-  edit_background_selected: 'The image has been selected',
-
-  edit_name: 'Name',
-
-  alert_delete_title: 'Delete',
-  alert_delete_content: 'Do you want to delete this card?',
-  alert_delete_yes: 'Yes',
-  alert_delete_no: 'No',
-
-  alert_save_content: 'Card saved successfully.',
-  alert_save_yes: 'OK',
-
-  alert_not_support_title: 'This device is not supported',
-  alert_not_support_content:
-    'This device does not have the feature to emulate card.',
-  alert_not_support_yes: 'OK',
-
-  alert_nfc_title: 'NFC is disabled',
-  alert_nfc_content:
-    'NFC is required to emulate card. Please enable NFC in the settings and restart the app.',
-  alert_nfc_yes: 'OK',
-
-  card_touch_to_enable: 'Touch to enable',
-  card_touch_to_disable: 'Touch to disable',
-  card_delete: 'Delete',
-  card_edit: 'Edit',
-};
--- a/src/locales/ko.js
+++ b/src/locales/ko.js
@ -1,40 +0,0 @@
-export default {
-  header_home: '홈',
-  header_add: '카드 추가',
-  header_edit: '카드 편집',
-
-  main_empty_string: '우측 상단의 +를 눌러 카드를 추가해주세요',
-
-  edit_random: '랜덤 생성',
-  edit_preview: '미리보기',
-  edit_sid_notice: 'SID는 16진수 16자리 입니다. 카드 번호가 아님에 유의하세요!',
-
-  edit_background: '카드 배경',
-  edit_background_empty: '여기를 눌러 사진을 선택할 수 있습니다.',
-  edit_background_selected: '사진이 선택되었습니다.',
-
-  edit_name: '카드 이름',
-
-  alert_delete_title: '삭제',
-  alert_delete_content: '카드를 삭제하시겠습니까?',
-  alert_delete_yes: '예',
-  alert_delete_no: '아니오',
-
-  alert_save_content: '카드를 저장했습니다.',
-  alert_save_yes: '확인',
-
-  alert_not_support_title: '이 기기는 지원되지 않습니다.',
-  alert_not_support_content:
-    '이 기기는 카드를 에뮬레이션 하기 위해 필요한 기능을 가지고 있지 않습니다.',
-  alert_not_support_yes: '확인',
-
-  alert_nfc_title: 'NFC가 활성화 되어있지 않습니다.',
-  alert_nfc_content:
-    '카드를 에뮬레이션 하기 위해서 NFC가 필요합니다. 설정에서 NFC를 활성화하고 앱을 재실행해주세요.',
-  alert_nfc_yes: '확인',
-
-  card_touch_to_enable: '터치하여 활성화',
-  card_touch_to_disable: '터치하여 비활성화',
-  card_delete: '삭제',
-  card_edit: '편집',
-};
--- a/src/modules/Hcef.ts
+++ b/src/modules/Hcef.ts
@ -6,8 +6,7 @@ interface HcefModule {
  support: boolean;
  enabled: boolean;

-  setSID: (sid: string) => Promise<true>;
-  enableService: () => Promise<true>;
+  enableService: (sid: string) => Promise<true>;
  disableService: () => Promise<true>;
 }

--- a/src/screens/MainScreen.tsx
+++ b/src/screens/MainScreen.tsx
@ -1,316 +1,193 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
  View,
  Text,
  StatusBar,
-  ScrollView,
  TouchableOpacity,
-  Dimensions,
-  ImageBackground,
-  findNodeHandle,
  Alert,
  StyleSheet,
-  Image,
  FlatList,
+  ActivityIndicator,
 } from 'react-native';
-import update from 'react-addons-update';
-import Hcef from '../modules/Hcef';
-import CardConv from '../modules/CardConv';
-import AsyncStorage from '@react-native-community/async-storage';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import i18n from 'i18n-js';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { Shadow } from 'react-native-shadow-2';
+import {
+  NativeStackNavigationProp,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';

+import Hcef from '../modules/Hcef';
 import CardView from '../components/Card';
 import { Card } from '../types';
-
-const RNFS = require('react-native-fs');
-
-/*
-class MainScreen extends React.Component {
-  state = {
-    cards: [],
-    cardHeight: 1,
-    support: false,
-  };
-
-  async loadCards() {
-    let cardsJson = await AsyncStorage.getItem('cards');
-    this.setState({ cards: cardsJson ? JSON.parse(cardsJson) : [] });
-  }
-
-  componentDidMount() {
-    this.prevCard = null;
-    this.prevIndex = -1;
-    this.loadCards();
-
-    if (Hcef.support !== true) {
-      Alert.alert(
-        i18n.t('alert_not_support_title'),
-        i18n.t('alert_not_support_content'),
-        [{ text: i18n.t('alert_not_support_yes') }],
-      );
-    } else if (Hcef.enabled !== true) {
-      Alert.alert(i18n.t('alert_nfc_title'), i18n.t('alert_nfc_content'), [
-        { text: i18n.t('alert_nfc_yes') },
-      ]);
-    }
-
-    if (Hcef.support && Hcef.enabled) {
-      Hcef.disableService(); // 카드를 활성화하지 않았는데도 카드가 에뮬되는 이슈 방지
-    }
-
-    let { height, width } = Dimensions.get('window');
-
-    this.setState({
-      cardHeight: ((width - 48) * 53.98) / 85.6,
-    });
-  }
-
-  async switch(card, index) {
-    if (!Hcef.support || !Hcef.enabled) {
-      return;
-    }
-
-    if (card.enabled === true) {
-      this.disable(card, index);
-    } else {
-      this.enable(card, index);
-    }
-  }
-
-  async enable(card, index) {
-    if (this.prevCard && this.prevCard.enabled) {
-      await this.disable(this.prevCard, this.prevIndex);
-    }
-
-    let ret = false;
-    let ret2 = false;
-
-    ret = await Hcef.setSID(card.sid);
-    if (ret) {
-      ret2 = await Hcef.enableService();
-    }
-
-    if (ret && ret2) {
-      this.prevCard = card;
-      this.prevCard.enabled = true;
-      this.prevIndex = index;
-      this.setState({
-        cards: update(this.state.cards, {
-          [index]: { enabled: { $set: true } },
-        }),
-      });
-    }
-  }
-
-  async disable(card, index) {
-    if (card.enabled) {
-      let ret = await Hcef.disableService();
-      if (ret) {
-        card.enabled = false;
-        this.setState({
-          cards: update(this.state.cards, {
-            [index]: { enabled: { $set: false } },
-          }),
-        });
-        return true;
-      }
-    }
-    return false;
-  }
-
-  async cardListUpdate(name, sid, index, image, navigation) {
-    let uid = await CardConv.convertSID(sid);
-    let internalPath = '';
-
-    if (image !== '') {
-      internalPath = RNFS.DocumentDirectoryPath + '/' + new Date().valueOf();
-
-      if (image.startsWith('file://')) {
-        image = image.replace('file://', '');
-      }
-
-      await RNFS.copyFile(image, internalPath);
-
-      internalPath = 'file://' + internalPath;
-    }
-
-    if (index === null) {
-      this.setState(
-        {
-          cards: update(this.state.cards, {
-            $push: [{ name: name, sid: sid, uid: uid, image: internalPath }],
-          }),
-        },
-        async () => {
-          await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
-        },
-      );
-    } else {
-      this.setState(
-        {
-          cards: update(this.state.cards, {
-            [index]: {
-              name: { $set: name },
-              sid: { $set: sid },
-              uid: { $set: uid },
-              image: { $set: internalPath },
-            },
-          }),
-        },
-        async () => {
-          await AsyncStorage.setItem('cards', JSON.stringify(this.state.cards));
-        },
-      );
-    }
-
-    Alert.alert('', i18n.t('alert_save_content'), [
-      {
-        text: i18n.t('alert_save_yes'),
-        onPress: () => {
-          navigation.goBack();
-        },
-      },
-    ]);
-  }
-
-  cardListDelete(index) {
-    Alert.alert(i18n.t('alert_delete_title'), i18n.t('alert_delete_content'), [
-      { text: i18n.t('alert_delete_no') },
-      {
-        text: i18n.t('alert_delete_yes'),
-        onPress: () => {
-          if (this.state.cards[index].image !== '') {
-            RNFS.unlink(this.state.cards[index].image);
-          }
-          this.setState(
-            {
-              cards: update(this.state.cards, {
-                $splice: [[index, 1]],
-              }),
-            },
-            async () => {
-              await AsyncStorage.setItem(
-                'cards',
-                JSON.stringify(this.state.cards),
-              );
-            },
-          );
-        },
-      },
-    ]);
-  }
-
-  render() {
-    let cardWidget = [];
-
-    this.state.cards.forEach((card, index) => {
-      cardWidget.push(
-        <Card
-          card={card}
-          index={index}
-          onPress={(card, index) => this.switch(card, index)}
-          cardHeight={this.state.cardHeight}
-          disableCallback={(card, index) => this.disable(card, index)}
-          update={(name, sid, index, image, navigation) =>
-            this.cardListUpdate(name, sid, index, image, navigation)
-          }
-          delete={index => this.cardListDelete(index)}
-          navigation={this.props.navigation}
-        />,
-      );
-    });
-
-    return (
-      <SafeAreaView style={{ flex: 1, paddingTop: StatusBar.currentHeight }}>
-        <StatusBar
-          barStyle="dark-content"
-          translucent={true}
-          backgroundColor={'#ffffff'}
-        />
-        <View
-          style={{
-            height: 48,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: '#ffffff',
-          }}>
-          <View
-            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Text
-              style={{
-                fontSize: 17,
-                fontWeight: 'bold',
-                textAlignVertical: 'center',
-              }}>
-              {i18n.t('header_home')}
-            </Text>
-
-            <TouchableOpacity
-              style={{
-                position: 'absolute',
-                top: 0,
-                bottom: 0,
-                right: 12,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              onPress={() =>
-                this.props.navigation.navigate('CardEditScreen', {
-                  update: (name, sid, index, image, navigation) =>
-                    this.cardListUpdate(name, sid, index, image, navigation),
-                })
-              }>
-              <Icon name="add" size={26} color={'rgba(0,0,0,0.7)'} />
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {this.state.cards && this.state.cards.length > 0 ? (
-          <ScrollView style={{ flex: 1 }}>{cardWidget}</ScrollView>
-        ) : (
-          <View
-            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-            <Text style={{ fontSize: 17, color: '#9E9E9E' }}>
-              {i18n.t('main_empty_string')}
-            </Text>
-          </View>
-        )}
-      </SafeAreaView>
-    );
-  }
-}
-*/
+import { getCards, removeCard } from '../data/cards';
+import { RootStackParams } from '../../App';
+import { useNavigation } from '@react-navigation/native';

 const ListSeparator = () => <View style={styles.separator} />;

-const MainScreen = () => {
-  const [cards, setCards] = useState<Card[]>([
-    {
-      sid: '02FE000000000000',
-      name: 'e-amusement pass',
+const CardList = (props: { cards: Card[] }) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParams>>();
+  const cards = props.cards;
+  const [enabledCardIndex, setEnabledCardIndex] = useState<number | null>(null);
+
+  const toggleHcef = useCallback(
+    async (index: number) => {
+      const card = cards[index];
+      if (enabledCardIndex === index) {
+        // disable
+        await Hcef.disableService();
+        setEnabledCardIndex(null);
+      } else {
+        await Hcef.enableService(card.sid);
+        setEnabledCardIndex(index);
+      }
    },
+    [cards, enabledCardIndex],
+  );
+
+  const queryClient = useQueryClient();
+  const deleteMutation = useMutation((index: number) => removeCard(index), {
+    onSuccess: () => {
+      queryClient.invalidateQueries('cards');
+    },
+  });
+
+  const onDelete = useCallback(
+    (index: number) => {
+      const card = cards[index];
+
+      Alert.alert('카드 삭제', `"${card.name}" 카드를 삭제하시겠습니까?`, [
+        {
+          text: '삭제',
+          onPress: () => {
+            deleteMutation.mutate(index);
+          },
+        },
+        { text: '취소' },
      ]);
+    },
+    [cards, deleteMutation],
+  );
+
+  const onEdit = useCallback(
+    (index: number) => {
+      const card = cards[index];
+      navigation.navigate('Edit', {
+        index,
+        card,
+      });
+    },
+    [cards, navigation],
+  );
+
+  if (cards.length > 0) {
+    return (
+      <FlatList
+        data={cards}
+        contentContainerStyle={styles.cardListContainer}
+        renderItem={card => (
+          <CardView
+            card={card.item}
+            index={card.index}
+            onPress={toggleHcef}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            mainText={
+              card.index === enabledCardIndex
+                ? '터치해서 비활성화'
+                : '터치해서 활성화'
+            }
+          />
+        )}
+        ItemSeparatorComponent={ListSeparator}
+        ListHeaderComponent={ListSeparator}
+        ListFooterComponent={ListSeparator}
+      />
+    );
+  } else {
+    return (
+      <View style={styles.placeholderContainer}>
+        <Text style={styles.placeholderText}>카드를 추가해 주세요.</Text>
+      </View>
+    );
+  }
+};
+
+const AddButton = (props: { onPress?: () => unknown }) => {
+  return (
+    <Shadow
+      containerStyle={styles.addButtonContainer}
+      distance={4}
+      offset={[0, 2]}
+    >
+      <TouchableOpacity style={styles.addButton} onPress={props.onPress}>
+        <FontAwesome5 name={'plus'} style={styles.addButtonIcon} />
+      </TouchableOpacity>
+    </Shadow>
+  );
+};
+
+type MainScreenProps = NativeStackScreenProps<RootStackParams, 'Main'>;
+
+const MainScreen = (props: MainScreenProps) => {
+  const { navigation } = props;
+
+  // check native hcef module
+  useEffect(() => {
+    if (!Hcef.support) {
+      Alert.alert(
+        '오류',
+        '이 기기는 HCE-F를 지원하지 않습니다. 다른 기기로 다시 시도해 주세요.',
+        [
+          {
+            text: '확인',
+          },
+        ],
+      );
+
+      return;
+    }
+
+    if (!Hcef.enabled) {
+      Alert.alert(
+        '오류',
+        'HCE-F 초기 설정에 실패했습니다.\n앱을 종료한 뒤, NFC를 활성화하고 다시 실행해 주세요.',
+        [
+          {
+            text: '확인',
+          },
+        ],
+      );
+
+      return;
+    }
+  }, []);
+
+  // load card list from async storage
+  const cardsQuery = useQuery<Card[]>('cards', getCards);
+
+  const goToAdd = useCallback(() => {
+    navigation.navigate('Add');
+  }, [navigation]);

  return (
    <View style={styles.container}>
-      <StatusBar backgroundColor={'white'} barStyle={'dark-content'} />
-
-      {cards.length > 0 ? (
-        <FlatList
-          style={styles.list}
-          data={cards}
-          renderItem={card => <CardView card={card.item} />}
-          ItemSeparatorComponent={ListSeparator}
-          ListHeaderComponent={View}
-          ListHeaderComponentStyle={styles.separator}
-          ListFooterComponent={View}
-          ListFooterComponentStyle={styles.separator}
+      <StatusBar
+        backgroundColor={'transparent'}
+        barStyle={'dark-content'}
+        translucent
      />
+      {cardsQuery.isSuccess ? (
+        <>
+          <CardList cards={cardsQuery.data} />
+          <AddButton onPress={goToAdd} />
+        </>
      ) : (
-        <View />
+        <View>
+          <ActivityIndicator size={'large'} />
+        </View>
      )}
    </View>
  );
@ -320,13 +197,39 @@ const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'stretch',
  },
-  list: {
-    // paddingHorizontal: 16,
+  cardListContainer: {
+    paddingHorizontal: 16,
  },
  separator: {
    height: 16,
  },
+  placeholderContainer: {
+    alignItems: 'center',
+  },
+  placeholderText: {
+    fontSize: 16,
+    color: '#9E9E9E',
+  },
+  addButtonContainer: {
+    position: 'absolute',
+    right: 24,
+    bottom: 24,
+  },
+  addButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 64,
+    backgroundColor: '#f9f9f9',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  addButtonIcon: {
+    color: 'skyblue',
+    fontSize: 24,
+  },
 });

 export default MainScreen;
--- a/src/types.ts
+++ b/src/types.ts
@ -1,7 +1,6 @@
 type Card = {
  sid: string;
  name: string;
-  image?: string;
 };

 export type { Card };
--- a/yarn.lock
+++ b/yarn.lock
@ -1115,13 +1115,6 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.18.6"

-"@babel/plugin-transform-object-assign@^7.16.7":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
-  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-transform-object-super@^7.0.0":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz#ebb6a1e7a86ffa96858bd6ac0102d65944261725"
@ -1423,7 +1416,7 @@
    "@babel/types" "^7.4.4"
    esutils "^2.0.2"

-"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
+"@babel/preset-typescript@^7.13.0":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
  integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
@ -1450,7 +1443,7 @@
  dependencies:
    regenerator-runtime "^0.13.2"

-"@babel/runtime@^7.20.0", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.20.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
  version "7.20.13"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
  integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
@ -1529,13 +1522,6 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

-"@egjs/hammerjs@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
-  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
-  dependencies:
-    "@types/hammerjs" "^2.0.36"
-
 "@eslint/eslintrc@^1.4.1":
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
@ -1551,21 +1537,6 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

-"@gorhom/bottom-sheet@^4":
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.4.5.tgz#b9041b01ce1af9a936e7c0fc1d78f026d759eebe"
-  integrity sha512-Z5Z20wshLUB8lIdtMKoJaRnjd64wBR/q8EeVPThrg+skrcBwBPHfUwZJ2srB0rEszA/01ejSJy/ixyd7Ra7vUA==
-  dependencies:
-    "@gorhom/portal" "1.0.14"
-    invariant "^2.2.4"
-
-"@gorhom/portal@1.0.14":
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
-  integrity sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==
-  dependencies:
-    nanoid "^3.3.1"
-
 "@hapi/hoek@^9.0.0":
  version "9.3.0"
  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@ -1910,12 +1881,17 @@
    "@nodelib/fs.scandir" "2.1.5"
    fastq "^1.6.0"

-"@react-native-community/async-storage@^1.7.1":
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.11.0.tgz#bf81b8813080846f150c67f531987c429b442166"
-  integrity sha512-Pq9LlmvtCEKAGdkyrgTcRxNh2fnHFykEj2qnRYijOl1pDIl2MkD5IxaXu5eOL0wgOtAl4U//ff4z40Td6XR5rw==
+"@react-native-async-storage/async-storage@^1.17.11":
+  version "1.17.11"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.17.11.tgz#7ec329c1b9f610e344602e806b04d7c928a2341d"
+  integrity sha512-bzs45n5HNcDq6mxXnSsOHysZWn1SbbebNxldBXCQs8dSvF8Aor9KCdpm+TpnnGweK3R6diqsT8lFhX77VX0NFw==
  dependencies:
-    deep-assign "^3.0.0"
+    merge-options "^3.0.4"
+
+"@react-native-clipboard/clipboard@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.11.1.tgz#d3a9e685ce2383b1e92b89a334896c5575cc103d"
+  integrity sha512-nvSIIHzybVWqYxcJE5hpT17ekxAAg383Ggzw5WrYHtkKX61N1AwaKSNmXs5xHV7pmKSOe/yWjtSwxIzfW51I5Q==

 "@react-native-community/cli-clean@^10.1.1":
  version "10.1.1"
@ -2245,11 +2221,6 @@
  dependencies:
    "@types/node" "*"

-"@types/hammerjs@^2.0.36":
-  version "2.0.36"
-  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
-  integrity sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@ -2302,6 +2273,21 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==

+"@types/react-native-vector-icons@^6.4.13":
+  version "6.4.13"
+  resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.13.tgz#28b34d15094e040718beefb67cb3eff0c4994cb6"
+  integrity sha512-1PqFoKuXTSzMHwGMAr+REdYJBQAbe9xrww3ecZR0FsHcD1K+vGS/rxuAriL4rsI6+p69sZQjDzpEVAbDQcjSwA==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "^0.70"
+
+"@types/react-native@^0.70":
+  version "0.70.10"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.70.10.tgz#494576e0dc20aa319003f0cdd99192124d64038d"
+  integrity sha512-m9B9hJk1w/c04zj5PCYTjJNXt+1UvKtzJj4nO/BjiS4s/zmUdkLdnbLqRQCQiTA0wuvvMbrffuPdheRtYu/M1Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@^18.0.0":
  version "18.0.0"
  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
@ -2638,7 +2624,7 @@ array.prototype.tosorted@^1.1.1:
    es-shim-unscopables "^1.0.0"
    get-intrinsic "^1.1.3"

-asap@~2.0.3, asap@~2.0.6:
+asap@~2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@ -2819,11 +2805,6 @@ balanced-match@^1.0.0:
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=

-base-64@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
-  integrity sha1-eAqZyE59YAJgNhURxId2E78k9rs=
-
 base64-js@^1.1.2:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@ -2847,6 +2828,11 @@ base@^0.11.1:
    mixin-deep "^1.2.0"
    pascalcase "^0.1.1"

+big-integer@^1.6.16:
+  version "1.6.51"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
+  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
+
 bl@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@ -2892,6 +2878,20 @@ braces@^3.0.2:
  dependencies:
    fill-range "^7.0.1"

+broadcast-channel@^3.4.1:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
+  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    detect-node "^2.1.0"
+    js-sha3 "0.8.0"
+    microseconds "0.2.0"
+    nano-time "1.0.0"
+    oblivious-set "1.0.0"
+    rimraf "3.0.2"
+    unload "2.2.0"
+
 browserslist@^4.21.3, browserslist@^4.21.4:
  version "4.21.5"
  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
@ -3235,11 +3235,6 @@ core-js-compat@^3.25.1:
  dependencies:
    browserslist "^4.21.4"

-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
-
 core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@ -3350,13 +3345,6 @@ dedent@^0.7.0:
  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==

-deep-assign@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
-  integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
-  dependencies:
-    is-obj "^1.0.0"
-
 deep-is@^0.1.3:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@ -3445,6 +3433,11 @@ detect-newline@^3.0.0:
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==

+detect-node@^2.0.4, detect-node@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
 diff-sequences@^29.3.1:
  version "29.3.1"
  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.3.1.tgz#104b5b95fe725932421a9c6e5b4bef84c3f2249e"
@ -3526,13 +3519,6 @@ encodeurl@~1.0.2:
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=

-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
-  dependencies:
-    iconv-lite "~0.4.13"
-
 end-of-stream@^1.1.0:
  version "1.4.4"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@ -4002,19 +3988,6 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "2.1.1"

-fbjs@^0.8.9:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
 file-entry-cache@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@ -4416,13 +4389,6 @@ hermes-profile-transformer@^0.0.6:
  dependencies:
    source-map "^0.7.3"

-hoist-non-react-statics@^3.3.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 html-escaper@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.0.tgz#71e87f931de3fe09e56661ab9a29aadec707b491"
@ -4444,13 +4410,6 @@ human-signals@^2.1.0:
  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==

-iconv-lite@~0.4.13:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
 ieee754@^1.1.13:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@ -4724,16 +4683,16 @@ is-number@^7.0.0:
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

-is-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
-  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
-
 is-path-inside@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==

+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@ -4756,7 +4715,7 @@ is-shared-array-buffer@^1.0.2:
  dependencies:
    call-bind "^1.0.2"

-is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@ -4847,14 +4806,6 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@ -5326,6 +5277,11 @@ js-sdsl@^4.1.4:
  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
  integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==

+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@ -5500,11 +5456,6 @@ lodash.debounce@^4.0.8:
  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==

-lodash.isequal@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
-
 lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@ -5604,6 +5555,14 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

+match-sorter@^6.0.2:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
+  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 mdn-data@2.0.14:
  version "2.0.14"
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@ -5614,6 +5573,13 @@ memoize-one@^5.0.0:
  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==

+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -5928,6 +5894,11 @@ micromatch@^4.0.4:
    braces "^3.0.2"
    picomatch "^2.3.1"

+microseconds@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
+  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
+
 mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
  version "1.43.0"
  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
@ -6016,7 +5987,14 @@ ms@2.1.2, ms@^2.1.1:
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==

-nanoid@^3.1.23, nanoid@^3.3.1:
+nano-time@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
+  integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==
+  dependencies:
+    big-integer "^1.6.16"
+
+nanoid@^3.1.23:
  version "3.3.4"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
@ -6080,14 +6058,6 @@ node-dir@^0.1.17:
  dependencies:
    minimatch "^3.0.2"

-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-fetch@^2.2.0:
  version "2.6.0"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
@ -6151,7 +6121,7 @@ ob1@0.73.7:
  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.73.7.tgz#14c9b6ddc26cf99144f59eb542d7ae956e6b3192"
  integrity sha512-DfelfvR843KADhSUATGGhuepVMRcf5VQX+6MQLy5AW0BKDLlO7Usj6YZeAAZP7P86QwsoTxB0RXCFiA7t6S1IQ==

-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@ -6244,6 +6214,11 @@ object.values@^1.1.6:
    define-properties "^1.1.4"
    es-abstract "^1.20.4"

+oblivious-set@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
+  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
+
 on-finished@~2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@ -6523,13 +6498,6 @@ process-nextick-args@~2.0.0:
  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==

-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
-
 promise@^8.3.0:
  version "8.3.0"
  resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
@ -6604,14 +6572,6 @@ range-parser@~1.2.1:
  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==

-react-addons-update@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.2.tgz#e53753c5b34887974510c882d7fb075851d5e504"
-  integrity sha1-5TdTxbNIh5dFEMiC1/sHWFHV5QQ=
-  dependencies:
-    fbjs "^0.8.9"
-    object-assign "^4.1.0"
-
 react-devtools-core@^4.26.1:
  version "4.27.1"
  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.27.1.tgz#167aa174383c65786cbb7e965a5b39c702f0a2d3"
@ -6630,7 +6590,7 @@ react-freeze@^1.0.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

-react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.0, react-is@^16.13.1, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -6650,48 +6610,11 @@ react-native-codegen@^0.71.3:
    jscodeshift "^0.13.1"
    nullthrows "^1.1.1"

-react-native-fs@^2.20.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"
-  integrity sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==
-  dependencies:
-    base-64 "^0.1.0"
-    utf8 "^3.0.0"
-
-react-native-gesture-handler@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241"
-  integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==
-  dependencies:
-    "@egjs/hammerjs" "^2.0.17"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-
 react-native-gradle-plugin@^0.71.14:
  version "0.71.14"
  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.14.tgz#cc399662f04fbfcc0e352d03eae1d3efbd5f635a"
  integrity sha512-nnLawTZEPPRAKq92UqDkzoGgCBl9aa9zAihFHMwmwzn4WRVdK4O6Cd4XYiyoNOiQzx3Hh9k5WOckHE80C92ivQ==

-react-native-image-crop-picker@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.28.0.tgz#f121669853278dc14baf14ba25b8e6524b0c234c"
-  integrity sha512-4AqQdeS+uFkdeTlsz+3o2Y5dXoRalZiDjsyPsWR2JOawgbzUdjaMQwXkjd12fXNB+g8kccTjvbH96WlXaoHTTg==
-
-react-native-reanimated@^2.14.4:
-  version "2.14.4"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz#3fa3da4e7b99f5dfb28f86bcf24d9d1024d38836"
-  integrity sha512-DquSbl7P8j4SAmc+kRdd75Ianm8G+IYQ9T4AQ6lrpLVeDkhZmjWI0wkutKWnp6L7c5XNVUrFDUf69dwETLCItQ==
-  dependencies:
-    "@babel/plugin-transform-object-assign" "^7.16.7"
-    "@babel/preset-typescript" "^7.16.7"
-    convert-source-map "^1.7.0"
-    invariant "^2.2.4"
-    lodash.isequal "^4.5.0"
-    setimmediate "^1.0.5"
-    string-hash-64 "^1.0.3"
-
 react-native-safe-area-context@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz#9208313236e8f49e1920ac1e2a2c975f03aed284"
@ -6768,6 +6691,15 @@ react-native@0.71.2:
    whatwg-fetch "^3.0.0"
    ws "^6.2.2"

+react-query@^3.39.3:
+  version "3.39.3"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
+  integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    broadcast-channel "^3.4.1"
+    match-sorter "^6.0.2"
+
 react-refresh@^0.4.0:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.2.tgz#54a277a6caaac2803d88f1d6f13c1dcfbd81e334"
@ -6945,6 +6877,11 @@ regjsparser@^0.9.1:
  dependencies:
    jsesc "~0.5.0"

+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 repeat-element@^1.1.2:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
@ -7040,7 +6977,7 @@ reusify@^1.0.4:
  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==

-rimraf@^3.0.2:
+rimraf@3.0.2, rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@ -7092,11 +7029,6 @@ safe-regex@^1.1.0:
  dependencies:
    ret "~0.1.10"

-"safer-buffer@>= 2.1.2 < 3":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
 scheduler@^0.23.0:
  version "0.23.0"
  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@ -7170,11 +7102,6 @@ set-value@^2.0.0, set-value@^2.0.1:
    is-plain-object "^2.0.3"
    split-string "^3.0.1"

-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
-
 setprototypeof@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
@ -7403,11 +7330,6 @@ strict-uri-encode@^2.0.0:
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=

-string-hash-64@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
-  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
-
 string-length@^4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@ -7724,11 +7646,6 @@ typescript@4.8.4:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==

-ua-parser-js@^0.7.18:
-  version "0.7.21"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
-  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
-
 uglify-es@^3.1.9:
  version "3.3.9"
  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@ -7808,6 +7725,14 @@ universalify@^0.1.0:
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==

+unload@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
+  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "^2.0.4"
+
 unpipe@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@ -7856,11 +7781,6 @@ use@^3.1.0:
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==

-utf8@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
-  integrity sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==
-
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@ -7921,7 +7841,7 @@ webidl-conversions@^3.0.0:
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==

-whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
+whatwg-fetch@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==