@tactics/toddle-styleguide 1.4.1 → 1.4.2

package/App.tsx

@@ -74,6 +74,10 @@ import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.previ
 import {LinePreview} from './src/components/atoms/line/line.preview';
 import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 
+import {
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
 const Stack = createNativeStackNavigator();
 
 const HomeScreen = ({navigation}: {navigation: any}) => {
@@ -299,6 +303,7 @@ function App() {
   }
 
   return (
+    <SafeAreaProvider>
     <ThemeCtx.Provider value={StaffMemberTheme}>
       <NavigationContainer>
         <Stack.Navigator>
@@ -474,6 +479,7 @@ function App() {
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>
+    </SafeAreaProvider>
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/footer/footer.component.tsx

@@ -5,6 +5,9 @@ import {ViewStyle} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './footer.styles';
 import Animated, {AnimateStyle} from 'react-native-reanimated';
+import {
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 type FooterProps = {
   children: React.ReactNode;
@@ -13,15 +16,16 @@ type FooterProps = {
 
 const Footer = ({children, animatedStyle}: FooterProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const insets = useSafeAreaInsets();
+  const styles = Stylesheet(context, insets);
 
   return (
-    <Animated.View
-      style={[styles.container, animatedStyle]}
-      testID="footer-container"
-    >
-      {children}
-    </Animated.View>
+      <Animated.View
+        style={[styles.container, animatedStyle]}
+        testID="footer-container"
+      >
+        {children}
+      </Animated.View>
   );
 };
 

package/src/components/atoms/footer/footer.styles.js

@@ -1,19 +1,18 @@
-import * as React from 'react';
-import {Platform, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
-export const Stylesheet = (context) =>
+export const Stylesheet = (context, insets) =>
   StyleSheet.create({
     container: {
       flexDirection: 'row',
-      alignItems: Platform.OS === 'android' ? 'center' : 'flex-start',
+      alignItems: 'center',
       justifyContent: 'center',
-      paddingTop: Platform.OS === 'android' ? 0 : Scale.m,
       backgroundColor: context.colors.ui.xlightgrey,
       borderTopColor: context.colors.ui.lightgrey,
       borderStyle: 'solid',
       borderTopWidth: 1,
-      height: Platform.OS === 'android' ? Scale.xxxl : Scale.xxxxl,
+      minHeight: (Scale.xxxl + insets.bottom),
+      paddingBottom: insets.bottom,
       width: '100%',
     },
   });

package/src/components/organisms/day-select/day-select.component.tsx

@@ -41,12 +41,14 @@ const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
   const onSwipeLeft = () => {
     let firstDayOfWeek = weekData.shift();
     if (!firstDayOfWeek) return;
+    onSelectDate(selectedDate.minus({weeks: 1}));
     setWeekData(createWeekDays(firstDayOfWeek.minus({weeks: 1})));
   };
 
   const onSwipeRight = () => {
     let firstDayOfWeek = weekData.shift();
     if (!firstDayOfWeek) return;
+    onSelectDate(selectedDate.plus({weeks: 1}));
     setWeekData(createWeekDays(firstDayOfWeek.plus({weeks: 1})));
   };
 

package/src/components/atoms/footer/footer.styles.d.ts

@@ -1,14 +0,0 @@
-export function Stylesheet(context: any): {
-    container: {
-        flexDirection: "row";
-        alignItems: "center" | "flex-start";
-        justifyContent: "center";
-        paddingTop: number;
-        backgroundColor: any;
-        borderTopColor: any;
-        borderStyle: "solid";
-        borderTopWidth: number;
-        height: number;
-        width: "100%";
-    };
-};