Checkbox display modal on click

Author: JustinTan-1

src/App.tsx

@@ -1,7 +1,10 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+<<<<<<< HEAD:src/App.tsx
 import { registerRootComponent } from 'expo';
+=======
+>>>>>>> 20555f6 (Checkbox display modal on click):App.tsx
 import React, { useContext } from 'react';
 import { View } from 'react-native';
 import { Provider } from 'react-redux';
@@ -48,12 +51,11 @@ function CustomTabBar({ navigation }) {
 }
 
 function TabNavigator() {
-  const { state, signout } = useContext(AuthContext);
   return (
     <Tab.Navigator
       screenOptions={{ headerShown: false }}
       tabBar={(props) => <CustomTabBar {...props} />}>
-      <Tab.Screen name="CaseContactListScreen" component={CaseContactListScreen} initialParams={{staySignedIn: state.staySignedIn}} />
+      <Tab.Screen name="CaseContactListScreen" component={CaseContactListScreen} />
       <Tab.Screen name="AccountScreen" component={AccountScreen} />
       <Tab.Screen name="CaseContactCreateScreen" component={CaseContactCreateScreen} />
       <Tab.Screen name="CaseContactDetailScreen" component={CaseContactDetailScreen} />
@@ -69,7 +71,7 @@ function MainApp() {
     tryLocalSignin();
   }, []);
   */
- 
+
   return (
     <NavigationContainer>
       <RootStack.Navigator>

src/components/AuthForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import { TextInput, Text, StyleSheet} from 'react-native';
+import { TextInput, Text, StyleSheet, Modal, Alert, Pressable, View} from 'react-native';
 import { Context as AuthContext } from 'src/components/context/AuthContext';
 import tw from 'twrnc';
 
@@ -9,7 +9,7 @@ import CheckBox from './CheckBox';
 interface LoginFieldProps {
   errorMessage: string;
   submitButtonText: string;
-  onSubmit: ({ email, password, staySignedin}) => void;
+  onSubmit: ({ email, password}) => void;
   style?: StyleSheet.NamedStyles<any>;
 }
 
@@ -22,6 +22,7 @@ const AuthForm: React.FC<LoginFieldProps> = ({
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [staySignedIn, setStaySignedIn] = useState<boolean>(false)
+  const [modalVisible, setModalVisible] = useState(false);
 
   const { signin } = useContext(AuthContext);
 
@@ -33,6 +34,14 @@ const AuthForm: React.FC<LoginFieldProps> = ({
     }
   };
 
+  const handleStaySignInToggle = () => {
+    if (staySignedIn) {
+      setStaySignedIn(false)
+    }else {
+      setStaySignedIn(true)
+      setModalVisible(true)
+    }
+  }
   return (
     <>
       <TextInput
@@ -53,7 +62,7 @@ const AuthForm: React.FC<LoginFieldProps> = ({
         onChangeText={setPassword}
       />
       <CheckBox
-        onPress={() => setStaySignedIn(!staySignedIn)}
+        onPress={handleStaySignInToggle}
         title="Stay Logged In"
         isChecked={staySignedIn}
       />
@@ -64,6 +73,24 @@ const AuthForm: React.FC<LoginFieldProps> = ({
         title="Sign In"
         onPress={handleSignIn}
       />
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => {
+          setModalVisible(!modalVisible);
+        }}>
+        <View style={tw`flex-1 justify-center items-center`}>
+          <View style={tw`m-5 bg-white rounded-2xl p-9 items-center shadow-lg`}>
+            <Text style={tw`mb-4 text-center`}>Your session will stay active until you sign out.</Text>
+            <Pressable
+              style={tw`rounded-2xl px-4 py-2 bg-[#345073]`}
+              onPress={() => setModalVisible(!modalVisible)}>
+              <Text style={tw`text-white font-bold text-center`}>OK</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
     </>
   );
 };

src/screens/CaseContactListScreen.tsx

@@ -1,20 +1,12 @@
-import { View, Text, FlatList, SafeAreaView, Modal, Alert, Pressable, StyleSheet } from 'react-native';
+import { View, Text, FlatList} from 'react-native';
 import tw from 'twrnc';
-import { useState, useEffect } from 'react'
 import React from 'react';
 
 import CaseContactListCard from '../components/CaseContactListCard';
 
 const CaseContactListScreen = ({ navigation, route }) => {
-  const [modalVisible, setModalVisible] = useState(true);
   const data = [{ name: '🦋CINA-11-1002' }, { name: '🦋CINA-11-1003' }, { name: '🦋CINA-11-1004' }];
 
-  useEffect(() => {
-    if (route.params.staySignedIn) {
-      setModalVisible(true)
-    }
-  }, []);
-  
   return (
     <>
     <View style={tw`flex items-center gap-3 flex-1 bg-[#d5d7da]`}>
@@ -38,25 +30,6 @@ const CaseContactListScreen = ({ navigation, route }) => {
         </View>
       </View>
     </View>
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => {
-          Alert.alert('Modal has been closed.');
-          setModalVisible(!modalVisible);
-        }}>
-        <View style={tw`flex-1 justify-center items-center`}>
-          <View style={tw`m-5 bg-white rounded-2xl p-9 items-center shadow-lg`}>
-            <Text style={tw`mb-4 text-center`}>Your session will stay active until you sign out.</Text>
-            <Pressable
-              style={tw`rounded-2xl px-4 py-2 bg-[#345073]`}
-              onPress={() => setModalVisible(!modalVisible)}>
-              <Text style={tw`text-white font-bold text-center`}>OK</Text>
-            </Pressable>
-          </View>
-        </View>
-      </Modal>
   </>   
   );
 };