feat: safe-areas

example/src/screens/HomeScreen.tsx

@@ -1,13 +1,17 @@
 import React, { Component } from 'react';
+import { ScrollView, View } from 'react-native';
 import { List } from 'react-native-paper';
-import { ScrollView } from 'skyle';
+import { styled, StyleSheet } from 'skyle';
 import { linking } from '../App';
 
 interface HomeScreenProps {
   navigation: any;
 }
 
+@styled
 class HomeScreen extends Component<HomeScreenProps> {
+  styles = styles;
+
   render() {
     const { navigation } = this.props;
 
@@ -25,9 +29,19 @@ class HomeScreen extends Component<HomeScreenProps> {
             />
           ))}
         </List.Section>
+
+        <View style={this.styles.test} />
       </ScrollView>
     );
   }
 }
 
+const styles = StyleSheet.create(() => ({
+  test: {
+    width: '100%',
+    height: 'env(safe-area-inset-bottom)',
+    background: 'red',
+  },
+}));
+
 export default HomeScreen;

package.json

@@ -74,6 +74,7 @@
     "react": "^17.0.2",
     "react-native": "^0.64.0",
     "react-native-builder-bob": "^0.18.1",
+    "react-native-safe-area-context": "^3.2.0",
     "release-it": "^14.6.1",
     "typescript": "^4.2.4"
   },

src/base.ts

@@ -1,4 +1,4 @@
-import { StatusBar } from 'react-native';
+import { safeAreaInsets } from './context';
 import { aliasPreprocessor } from './preprocessors/alias';
 import { backgroundPreprocessor } from './preprocessors/background';
 import { borderPreprocessor } from './preprocessors/border';
@@ -15,10 +15,10 @@ import { transitionPreprocessor } from './preprocessors/transition';
 import type { BaseOptions, Preprocessor, Alias, EnvVariables, BreakpointsKeyValue } from './types';
 
 const defaultEnvVariables: EnvVariables = {
-  'safe-area-inset-top': StatusBar.currentHeight || 0,
-  'safe-area-inset-right': 0,
-  'safe-area-inset-bottom': 0,
-  'safe-area-inset-left': 0,
+  'safe-area-inset-top': () => safeAreaInsets?.top,
+  'safe-area-inset-right': () => safeAreaInsets?.right,
+  'safe-area-inset-bottom': () => safeAreaInsets?.bottom,
+  'safe-area-inset-left': () => safeAreaInsets?.left,
 };
 
 const defaultBreakpoints: BreakpointsKeyValue = {

src/context.tsx

@@ -1,8 +1,18 @@
 import React, { useState } from 'react';
+import { StatusBar } from 'react-native';
+
 import configureFonts from './config/defaultFonts';
+import type * as SafeAreaContextType from 'react-native-safe-area-context';
 
 import type { RecursivePartial, Theme } from './types';
 
+let SafeAreaContext: typeof SafeAreaContextType;
+try {
+  SafeAreaContext = require('react-native-safe-area-context');
+} catch (err) {}
+
+export type InsetsType = SafeAreaContextType.EdgeInsets;
+
 export const defaultTheme = {
   colors: {
     primary: '#4394f7',
@@ -15,6 +25,13 @@ export const defaultTheme = {
   fonts: configureFonts(),
 };
 
+export let safeAreaInsets: InsetsType = {
+  top: StatusBar.currentHeight || 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
 /**
  * Set global theme and update styles.
  * By default, the passed theme overrides the current one.
@@ -47,9 +64,26 @@ export interface ProviderProps {
 export const Provider = (props: ProviderProps) => {
   const { value } = props;
   const [theme, setThemeState] = useState<RecursivePartial<Theme>>(value?.theme || defaultTheme);
+
   setTheme = (newTheme?: RecursivePartial<Theme>, merge = false) =>
     setThemeState(Object.assign({}, merge ? theme : {}, newTheme));
 
-  return <Context.Provider value={{ theme, setTheme }} {...props} />;
+  const SafeAreaProvider = SafeAreaContext?.SafeAreaProvider || React.Fragment;
+  const SafeAreaConsumer = SafeAreaContext?.SafeAreaInsetsContext?.Consumer || React.Fragment;
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaConsumer>
+        {(safeAreas) => {
+          if (safeAreas) {
+            safeAreaInsets = safeAreas;
+          }
+          return null;
+        }}
+      </SafeAreaConsumer>
+
+      <Context.Provider value={{ theme, setTheme }} {...props} />
+    </SafeAreaProvider>
+  );
 };
 export const Consumer = Context.Consumer;

src/hooks/useStyles.tsx

@@ -6,6 +6,7 @@ import type { Styles, StyleSheetStyles } from '../types';
 import { useTheme } from './useTheme';
 import { deepEquals } from '../utils/values';
 import { matchMedia } from '../media';
+import { safeAreaInsets } from '../context';
 
 export const useStyles = <T,>(styles: T, args?: any): T => {
   const [builtStyles, setBuiltStyles] = useState<StyleSheetStyles>({});
@@ -106,6 +107,8 @@ export function getMediaQueryProps() {
     screen: Dimensions.get('screen'),
     window: Dimensions.get('window'),
 
+    insets: safeAreaInsets,
+
     // Convert breakpoints to media queries.
     xs: `@media (max-width: ${Skyle.breakpoints.xs})`,
     sm: `@media (min-width: ${Skyle.breakpoints.xs + 1}) and (max-width: ${Skyle.breakpoints.sm})`,

src/types.ts

@@ -1,11 +1,12 @@
 import type { Component, CSSProperties } from 'react';
 
 import type * as RN from 'react-native';
+import type { InsetsType } from './context';
 import type { easingFunctions } from './easing';
 import type { breakpoints } from './hooks/useBreakpoint';
 import type { FONT_STYLE_KEYWORDS, FONT_VARIANT_KEYWORDS, FONT_WEIGHT_KEYWORDS } from './preprocessors/font';
 
-export type EnvVariables = { [key: string]: CSSProperty };
+export type EnvVariables = { [key: string]: CSSProperty | (() => CSSProperty) };
 
 export type BreakpointKeys = typeof breakpoints[number];
 export type BreakpointsKeyValue = { [key in BreakpointKeys]: number };
@@ -78,6 +79,7 @@ export type StylesProps = {
   theme: Theme;
   screen: RN.ScaledSize;
   window: RN.ScaledSize;
+  insets: InsetsType;
 } & { [bp in BreakpointKeys]: Styles } & { [key: string]: any } & Component<any, any>;
 
 type TransformKeys =

yarn.lock

@@ -10374,6 +10374,16 @@ fsevents@^2.1.2:
   languageName: node
   linkType: hard
 
+"react-native-safe-area-context@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "react-native-safe-area-context@npm:3.2.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: e0d89f305359506be594a1604ac980af3b3ad258acdd3043f8e2633ad1ea95575ef80b8313c411630a7b50e9a882a0ad8f0525f6545efc2652fad40d0c7f86a1
+  languageName: node
+  linkType: hard
+
 "react-native-svg@npm:^12.1.1":
   version: 12.1.1
   resolution: "react-native-svg@npm:12.1.1"
@@ -11395,6 +11405,7 @@ resolve@^2.0.0-next.3:
     react: ^17.0.2
     react-native: ^0.64.0
     react-native-builder-bob: ^0.18.1
+    react-native-safe-area-context: ^3.2.0
     react-native-svg: ^12.1.1
     react-native-view-shot: ^3.1.2
     release-it: ^14.6.1