feat: add safeArea to pin code screen

ismaelsousa · Sep 26, 2022 · cddd76a · cddd76a
1 parent a283b0b
commit cddd76a
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 55 deletions.
diff --git a/src/screens/PinLocker/pin.locker.view.tsx b/src/screens/PinLocker/pin.locker.view.tsx
@@ -5,10 +5,10 @@ import PINCode, {
   resetPinCodeInternalStates,
 } from '@haskkor/react-native-pincode';
 import {useTheme} from 'styled-components/native';
-import {SkipText, styles} from './styles';
+import {Content, SkipText, styles} from './styles';
 import useMyNavigation from '../../common/hooks/useMyNavigation';
 import usePinLockerController from './pin.locker.controller';
-import {Alert, View} from 'react-native';
+import {Alert} from 'react-native';
 
 const PinLockerView: React.FC = () => {
   const {colors} = useTheme();
@@ -46,58 +46,60 @@ const PinLockerView: React.FC = () => {
 
   return (
     <Container>
-      <PINCode
-        // styleMainContainer={{backgroundColor: 'red'}}
-        touchIDDisabled={true}
-        key={'pin'}
-        status={pinStatus}
-        finishProcess={handleNavigate}
-        numbersButtonOverlayColor={colors.brand /** When pressed */}
-        stylePinCodeButtonCircle={{backgroundColor: colors.surface}}
-        stylePinCodeTextTitle={styles.fontWeightBold}
-        stylePinCodeTextSubtitle={styles.fontWeightBold}
-        stylePinCodeColorSubtitle={colors.caption}
-        stylePinCodeColorTitle={colors.brand}
-        stylePinCodeButtonNumber={colors.onSecondary}
-        stylePinCodeButtonNumberPressed={colors.onSecondary}
-        colorPassword={colors.brand}
-        styleLockScreenTitle={[
-          styles.styleLockScreenTitle,
-          {
-            color: colors.onSecondary,
-          },
-        ]}
-        styleLockScreenTextTimer={{
-          color: colors.brand,
-        }}
-        styleLockScreenViewTimer={[
-          styles.styleLockScreenViewTimer,
-          {
-            borderColor: colors.brand,
-          },
-        ]}
-        timeLocked={60_000}
-        styleLockScreenText={{color: colors.caption}}
-        styleLockScreenMainContainer={{backgroundColor: colors.secondary}}
-        buttonComponentLockedPage={() => null}
-      />
-      {pinStatus === 'choose' && (
-        <SkipText
-          color="brand"
-          size={16}
-          onPress={() =>
-            Alert.alert(
-              '🚧 Are you sure?',
-              'This prevents unauthorized access.',
-              [
-                {text: 'cancel'},
-                {onPress: setToNotAskToSetPinAgain, text: 'proceed'},
-              ],
-            )
-          }>
-          Skip
-        </SkipText>
-      )}
+      <Content>
+        <PINCode
+          // styleMainContainer={{backgroundColor: 'red'}}
+          touchIDDisabled={true}
+          key={'pin'}
+          status={pinStatus}
+          finishProcess={handleNavigate}
+          numbersButtonOverlayColor={colors.brand /** When pressed */}
+          stylePinCodeButtonCircle={{backgroundColor: colors.surface}}
+          stylePinCodeTextTitle={styles.fontWeightBold}
+          stylePinCodeTextSubtitle={styles.fontWeightBold}
+          stylePinCodeColorSubtitle={colors.caption}
+          stylePinCodeColorTitle={colors.brand}
+          stylePinCodeButtonNumber={colors.onSecondary}
+          stylePinCodeButtonNumberPressed={colors.onSecondary}
+          colorPassword={colors.brand}
+          styleLockScreenTitle={[
+            styles.styleLockScreenTitle,
+            {
+              color: colors.onSecondary,
+            },
+          ]}
+          styleLockScreenTextTimer={{
+            color: colors.brand,
+          }}
+          styleLockScreenViewTimer={[
+            styles.styleLockScreenViewTimer,
+            {
+              borderColor: colors.brand,
+            },
+          ]}
+          timeLocked={60_000}
+          styleLockScreenText={{color: colors.caption}}
+          styleLockScreenMainContainer={{backgroundColor: colors.secondary}}
+          buttonComponentLockedPage={() => null}
+        />
+        {pinStatus === 'choose' && (
+          <SkipText
+            color="brand"
+            size={16}
+            onPress={() =>
+              Alert.alert(
+                '🚧 Are you sure?',
+                'This prevents unauthorized access.',
+                [
+                  {text: 'cancel'},
+                  {onPress: setToNotAskToSetPinAgain, text: 'proceed'},
+                ],
+              )
+            }>
+            Skip
+          </SkipText>
+        )}
+      </Content>
     </Container>
   );
 };

diff --git a/src/screens/PinLocker/styles.ts b/src/screens/PinLocker/styles.ts
@@ -18,5 +18,9 @@ export const SkipText = styled(Text)`
   align-self: center;
   padding: 20px;
   min-height: 14px;
-  margin-bottom: 50px;
+  margin-bottom: 20px;
+`;
+
+export const Content = styled.SafeAreaView`
+  flex: 1;
 `;