feat: component checkbox | SignUp screen | modal export fix

Route.tsx

@@ -7,9 +7,9 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import WelcomeScreen from './src/screens/WelcomeScreen';
 import LoginScreen from './src/screens/LoginScreen';
-import RegisterScreen from './src/screens/RegisterScreen';
 import ResetPasswordScreen from './src/screens/ResetPasswordScreen';
 import ResetPasswordDeepScreen from './src/screens/ResetPasswordDeepScreen';
+import JoinUsScreen from './src/screens/RegisterScreen/JoinUs';
 
 import { NAVIGATION_PAGES } from './src/types';
 import { storageGet } from './src/storage';
@@ -49,7 +49,7 @@ const Route = () => {
     >
       <ScreenStack.Screen name={NAVIGATION_PAGES.WELCOME} component={WelcomeScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.LOGIN} component={LoginScreen} />
-      <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER} component={RegisterScreen} />
+      <ScreenStack.Screen name={NAVIGATION_PAGES.REGISTER} component={JoinUsScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.RESET_PASSWORD} component={ResetPasswordScreen} />
       <ScreenStack.Screen
         name={NAVIGATION_PAGES.RESET_PASSWORD_DEEP}

package.json

@@ -24,7 +24,8 @@
     "react-native": "0.72.6",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-svg": "13.9.0"
+    "react-native-svg": "13.9.0",
+    "expo-checkbox": "~2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/CheckBox/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import Checkbox from 'expo-checkbox';
+import { Text, View } from 'react-native';
+
+import { Colors } from '../../theme';
+import { styles } from './styles';
+
+type Props = {
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+  label?: string;
+};
+
+const CheckBox: FC<Props> = ({ value, onChange, label }) => {
+  return (
+    <View style={styles.wrapper}>
+      <Checkbox
+        style={{ backgroundColor: Colors.WHITE }}
+        color={Colors.ORANGE}
+        value={value}
+        onValueChange={onChange}
+      />
+      {label ? <Text style={styles.text}>{label}</Text> : null}
+    </View>
+  );
+};
+
+export default CheckBox;

src/components/CheckBox/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+import { getFontSize } from '../../utils';
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  text: {
+    color: Colors.DARK_BLUE,
+    fontSize: getFontSize(12),
+    marginLeft: 10
+  }
+});

src/components/Modal/index.tsx

@@ -21,4 +21,4 @@ const Modal: FC<Props> = ({ children, onRequestClose, visible }) => {
   );
 };
 
-export default Index;
+export default Modal;

src/screens/RegisterScreen/JoinUs/index.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import PageWrapper from '../../../components/PageWrapper';
+import Header from '../../../components/Header';
+import BigText from '../../../components/BigText';
+import Input from '../../../components/Input';
+import Button from '../../../components/Button';
+import CheckBox from '../../../components/CheckBox';
+
+const JoinUsScreen = () => {
+  const [agreed, setAgreed] = useState(false);
+
+  return (
+    <PageWrapper>
+      <Header label={'Sign Up'} />
+      <View style={{ gap: 15 }}>
+        <BigText>Join us. It's free!</BigText>
+        <Input onChange={() => {}} placeholder={'Text'} header={'Username'} />
+        <Input
+          onChange={() => {}}
+          placeholder={'Email'}
+          inputMode={'email'}
+          header={'Email address'}
+        />
+        <Input onChange={() => {}} placeholder={'Text'} isPrivate={true} header={'Password'} />
+        <Input
+          onChange={() => {}}
+          placeholder={'Text'}
+          isPrivate={true}
+          header={'Confirm password'}
+        />
+        <CheckBox
+          label={'I accept NM Terms & Conditions'}
+          onChange={(b) => setAgreed(b)}
+          value={agreed}
+        />
+      </View>
+      <View style={{ marginTop: '15%' }}>
+        <Button>Continue</Button>
+      </View>
+    </PageWrapper>
+  );
+};
+
+export default JoinUsScreen;

src/screens/WelcomeScreen/index.tsx

@@ -28,7 +28,9 @@ const WelcomeScreen: FC<Props> = ({ navigation }) => {
           <View style={styles.buttonsAndText}>
             <Text style={styles.text}>Endless exploring...</Text>
             <View style={{ gap: 10 }}>
-              <Button>Get started</Button>
+              <Button onPress={() => navigation.navigate(NAVIGATION_PAGES.REGISTER)}>
+                Get started
+              </Button>
               <Button
                 onPress={() => navigation.navigate(NAVIGATION_PAGES.LOGIN)}
                 variant={ButtonVariants.OPACITY}