Merge pull request #22 from mateoguzmana/feat/improving-examples-layout

feat(examples): adding safe area insets to show the animations across the screen
mateoguzmana · Dec 12, 2022 · 6f9981e · 6f9981e
2 parents 63dd8a0 + d8392ec
commit 6f9981e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 17 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -300,6 +300,12 @@ PODS:
   - React-jsinspector (0.68.5)
   - React-logger (0.68.5):
     - glog
+  - react-native-safe-area-context (4.4.1):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - ReactCommon/turbomodule/core
   - react-native-skia (0.1.162):
     - React
     - React-callinvoker
@@ -445,6 +451,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -518,6 +525,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   react-native-skia:
     :path: "../node_modules/@shopify/react-native-skia"
   React-perflogger:
@@ -581,6 +590,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 45c0496ca8cef6b02d9fa0274c25cf458fe91a56
   React-jsinspector: eb202e43b3879aba9a14f3f65788aec85d4e1ea9
   React-logger: 98f663b292a60967ebbc6d803ae96c1381183b6d
+  react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
   react-native-skia: 033ecd9b105c198ddbab832d206b0e3742b67f0c
   React-perflogger: 0458a87ea9a7342079e7a31b0d32b3734fb8415f
   React-RCTActionSheet: 22538001ea2926dea001111dd2846c13a0730bc9

diff --git a/example/package.json b/example/package.json
@@ -14,7 +14,8 @@
     "@expo/react-native-action-sheet": "^4.0.1",
     "@shopify/react-native-skia": "0.1.162",
     "react": "18.0.0",
-    "react-native": "0.68.5"
+    "react-native": "0.68.5",
+    "react-native-safe-area-context": "^4.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFont } from '@shopify/react-native-skia';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { FiestaProvider } from 'react-native-fiesta';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { Examples } from './components/Examples';
@@ -11,21 +11,14 @@ function App() {
   if (!font) return null;
 
   return (
-    <ActionSheetProvider>
-      <FiestaProvider font={font}>
-        <SafeAreaView style={styles.container}>
+    <SafeAreaProvider>
+      <ActionSheetProvider>
+        <FiestaProvider font={font}>
           <Examples />
-        </SafeAreaView>
-      </FiestaProvider>
-    </ActionSheetProvider>
+        </FiestaProvider>
+      </ActionSheetProvider>
+    </SafeAreaProvider>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#181D31',
-  },
-});
-
 export default App;
diff --git a/example/src/components/Examples.tsx b/example/src/components/Examples.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Canvas, useFont } from '@shopify/react-native-skia';
 import {
   Fireworks,
@@ -15,13 +16,14 @@ import {
   FiestaAnimations,
   PopperDirection,
 } from 'react-native-fiesta';
-import Header from './Header';
 import { useActionSheet } from '@expo/react-native-action-sheet';
+import Header from './Header';
 
 export function Examples() {
   const { runFiestaAnimation } = useFiesta();
   const { showActionSheetWithOptions } = useActionSheet();
   const font = useFont(require('../fonts/OpenMoji-Color.ttf'), 30);
+  const insets = useSafeAreaInsets();
 
   const [componentToRender, setComponentToRender] =
     useState<React.ReactNode | null>(null);
@@ -60,7 +62,12 @@ export function Examples() {
   if (!font) return null;
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        { paddingTop: insets.top, paddingBottom: insets.bottom },
+      ]}
+    >
       <Header onPressThemeChange={onPressThemeChange} theme={theme} />
 
       <View style={styles.column}>
@@ -199,6 +206,7 @@ export function Examples() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#181D31',
   },
   canvas: {
     height: 80,

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3637,6 +3637,11 @@ react-native-gradle-plugin@^0.0.6:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45"
   integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg==
 
+react-native-safe-area-context@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
+  integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==
+
 [email protected]:
   version "0.68.5"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.68.5.tgz#8ba7389e00b757c59b6ea23bf38303d52367d155"