chore: added safe insets for examples

gorhom · Apr 21, 2020 · 0f9ac79 · 0f9ac79
1 parent 47c87ec
commit 0f9ac79
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 36 deletions.
diff --git a/example/src/screens/CustomContent.tsx b/example/src/screens/CustomContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StatusBar } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import PaperOnboarding, {
@@ -25,7 +25,18 @@ const data: PaperOnboardingItemType[] = [
 const CustomContentScreen = () => {
   // hooks
   const { goBack } = useNavigation();
-  const insets = useSafeArea();
+  const safeInsets = useSafeArea();
+
+  // variable
+  const insets = useMemo(
+    () => ({
+      top: Math.max(safeInsets.top, 20),
+      bottom: Math.max(safeInsets.bottom, 20),
+      left: Math.max(safeInsets.left, 20),
+      right: Math.max(safeInsets.right, 20),
+    }),
+    [safeInsets]
+  );
 
   // callbacks
   const handleOnClosePress = useCallback(() => goBack(), [goBack]);
@@ -37,10 +48,10 @@ const CustomContentScreen = () => {
         data={data}
         indicatorSize={20}
         safeInsets={{
-          top: insets?.top,
-          bottom: insets?.bottom,
-          left: insets?.left,
-          right: insets?.right,
+          top: insets.top,
+          bottom: insets.bottom,
+          left: insets.left,
+          right: insets.right,
         }}
         onCloseButtonPress={handleOnClosePress}
       />

diff --git a/example/src/screens/Default.tsx b/example/src/screens/Default.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StatusBar } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import PaperOnboarding, {
@@ -39,7 +39,18 @@ const data: PaperOnboardingItemType[] = [
 const DefaultScreen = () => {
   // hooks
   const { goBack } = useNavigation();
-  const insets = useSafeArea();
+  const safeInsets = useSafeArea();
+
+  // variable
+  const insets = useMemo(
+    () => ({
+      top: Math.max(safeInsets.top, 20),
+      bottom: Math.max(safeInsets.bottom, 20),
+      left: Math.max(safeInsets.left, 20),
+      right: Math.max(safeInsets.right, 20),
+    }),
+    [safeInsets]
+  );
 
   // callbacks
   const handleOnClosePress = useCallback(() => goBack(), [goBack]);
@@ -50,10 +61,10 @@ const DefaultScreen = () => {
       <PaperOnboarding
         data={data}
         safeInsets={{
-          top: insets?.top,
-          bottom: insets?.bottom,
-          left: insets?.left,
-          right: insets?.right,
+          top: insets.top,
+          bottom: insets.bottom,
+          left: insets.left,
+          right: insets.right,
         }}
         onCloseButtonPress={handleOnClosePress}
       />

diff --git a/example/src/screens/VerticalGesture.tsx b/example/src/screens/VerticalGesture.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StatusBar } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import PaperOnboarding, {
@@ -39,7 +39,18 @@ const data: PaperOnboardingItemType[] = [
 const VerticalGestureScreen = () => {
   // hooks
   const { goBack } = useNavigation();
-  const insets = useSafeArea();
+  const safeInsets = useSafeArea();
+
+  // variable
+  const insets = useMemo(
+    () => ({
+      top: Math.max(safeInsets.top, 20),
+      bottom: Math.max(safeInsets.bottom, 20),
+      left: Math.max(safeInsets.left, 20),
+      right: Math.max(safeInsets.right, 20),
+    }),
+    [safeInsets]
+  );
 
   // callbacks
   const handleOnClosePress = useCallback(() => goBack(), [goBack]);
@@ -51,10 +62,10 @@ const VerticalGestureScreen = () => {
         data={data}
         direction="vertical"
         safeInsets={{
-          top: insets?.top,
-          bottom: insets?.bottom,
-          left: insets?.left,
-          right: insets?.right,
+          top: insets.top,
+          bottom: insets.bottom,
+          left: insets.left,
+          right: insets.right,
         }}
         onCloseButtonPress={handleOnClosePress}
       />

diff --git a/example/src/screens/WithStyling.tsx b/example/src/screens/WithStyling.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StatusBar, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import PaperOnboarding, {
@@ -39,7 +39,18 @@ const data: PaperOnboardingItemType[] = [
 const WithStylingScreen = () => {
   // hooks
   const { goBack } = useNavigation();
-  const insets = useSafeArea();
+  const safeInsets = useSafeArea();
+
+  // variable
+  const insets = useMemo(
+    () => ({
+      top: Math.max(safeInsets.top, 20),
+      bottom: Math.max(safeInsets.bottom, 20),
+      left: Math.max(safeInsets.left, 20),
+      right: Math.max(safeInsets.right, 20),
+    }),
+    [safeInsets]
+  );
 
   // callbacks
   const handleOnClosePress = useCallback(() => goBack(), [goBack]);
@@ -55,10 +66,10 @@ const WithStylingScreen = () => {
         indicatorColor={'black'}
         indicatorSize={24}
         safeInsets={{
-          top: insets?.top,
-          bottom: insets?.bottom,
-          left: insets?.left,
-          right: insets?.right,
+          top: insets.top,
+          bottom: insets.bottom,
+          left: insets.left,
+          right: insets.right,
         }}
         onCloseButtonPress={handleOnClosePress}
       />

diff --git a/example/src/screens/WithoutIcon.tsx b/example/src/screens/WithoutIcon.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StatusBar } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import PaperOnboarding, {
@@ -33,7 +33,18 @@ const data: PaperOnboardingItemType[] = [
 const WithoutIconScreen = () => {
   // hooks
   const { goBack } = useNavigation();
-  const insets = useSafeArea();
+  const safeInsets = useSafeArea();
+
+  // variable
+  const insets = useMemo(
+    () => ({
+      top: Math.max(safeInsets.top, 20),
+      bottom: Math.max(safeInsets.bottom, 20),
+      left: Math.max(safeInsets.left, 20),
+      right: Math.max(safeInsets.right, 20),
+    }),
+    [safeInsets]
+  );
 
   // callbacks
   const handleOnClosePress = useCallback(() => goBack(), [goBack]);
@@ -44,10 +55,10 @@ const WithoutIconScreen = () => {
       <PaperOnboarding
         data={data}
         safeInsets={{
-          top: insets?.top,
-          bottom: insets?.bottom,
-          left: insets?.left,
-          right: insets?.right,
+          top: insets.top,
+          bottom: insets.bottom,
+          left: insets.left,
+          right: insets.right,
         }}
         indicatorSize={25}
         closeButtonText="skip"

diff --git a/example/src/screens/WithoutImage.tsx b/example/src/screens/WithoutImage.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StatusBar } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import PaperOnboarding, {
@@ -33,7 +33,18 @@ const data: PaperOnboardingItemType[] = [
 const WithoutImage = () => {
   // hooks
   const { goBack } = useNavigation();
-  const insets = useSafeArea();
+  const safeInsets = useSafeArea();
+
+  // variable
+  const insets = useMemo(
+    () => ({
+      top: Math.max(safeInsets.top, 20),
+      bottom: Math.max(safeInsets.bottom, 20),
+      left: Math.max(safeInsets.left, 20),
+      right: Math.max(safeInsets.right, 20),
+    }),
+    [safeInsets]
+  );
 
   // callbacks
   const handleOnClosePress = useCallback(() => goBack(), [goBack]);
@@ -44,10 +55,10 @@ const WithoutImage = () => {
       <PaperOnboarding
         data={data}
         safeInsets={{
-          top: insets?.top,
-          bottom: insets?.bottom,
-          left: insets?.left,
-          right: insets?.right,
+          top: insets.top,
+          bottom: insets.bottom,
+          left: insets.left,
+          right: insets.right,
         }}
         onCloseButtonPress={handleOnClosePress}
       />