Resolve a [react-navigation] error in LicenseAgreement page (#555)

dooboolab-community · May 27, 2022 · 9771ba8 · 9771ba8
1 parent cabfddb
commit 9771ba8
Showing 1 changed file with 24 additions and 27 deletions.
diff --git a/client/src/components/pages/LicenseAgreement.tsx b/client/src/components/pages/LicenseAgreement.tsx
@@ -1,4 +1,4 @@
-import React, {FC, ReactElement, memo, useLayoutEffect} from 'react';
+import React, {FC, ReactElement, useCallback, useLayoutEffect} from 'react';
 import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -25,39 +25,36 @@ const Page: FC = () => {
   const navigation = useNavigation<RootStackNavigationProps<'default'>>();
   const {theme} = useTheme();
 
-  const pressAgree = async (): Promise<void> => {
+  const pressAgree = useCallback(async (): Promise<void> => {
     await AsyncStorage.setItem('license_agreed', JSON.stringify(true));
     navigation.pop();
-  };
+  }, [navigation]);
 
-  const headerRight = memo(
-    (): ReactElement => (
-      <TouchableOpacity testID="touch-done" onPress={pressAgree}>
-        <View
-          style={{
-            paddingHorizontal: 16,
-            paddingVertical: 8,
-          }}
-        >
-          <Text
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      // eslint-disable-next-line react/no-unstable-nested-components
+      headerRight: (): ReactElement => (
+        <TouchableOpacity testID="touch-done" onPress={pressAgree}>
+          <View
             style={{
-              color: theme.text,
-              fontSize: 14,
-              fontWeight: 'bold',
+              paddingHorizontal: 16,
+              paddingVertical: 8,
             }}
           >
-            {getString('AGREE')}
-          </Text>
-        </View>
-      </TouchableOpacity>
-    ),
-  );
-
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerRight,
+            <Text
+              style={{
+                color: theme.text,
+                fontSize: 14,
+                fontWeight: 'bold',
+              }}
+            >
+              {getString('AGREE')}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      ),
     });
-  }, [headerRight, navigation]);
+  }, [pressAgree, navigation, theme.text]);
 
   return (
     <Container>