Export useSafeAreaInsets hook and calc

Author: efoken

app/src/App.tsx

@@ -1,16 +1,10 @@
-import {
-  Button as ButtonBase,
-  Container,
-  Popover,
-  ScrollView,
-  Text,
-  View,
-} from '@react-universal/components';
+import { Button as ButtonBase, Container, Popover, Text, View } from '@react-universal/components';
 import { isWeb, styled, UniversalProvider } from '@react-universal/core';
 import { Defs, G, Path, Svg, Text as TextSvg, TSpan, Use } from '@react-universal/svg';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBar } from 'expo-status-bar';
 import { useRef, useState } from 'react';
+import { SafeScrollView } from './SafeScrollView';
 
 if (!isWeb) {
   ScreenOrientation.unlockAsync().catch(console.log);
@@ -63,7 +57,7 @@ export default function App() {
     <UniversalProvider>
       <View sx={{ flex: 1 }}>
         <StatusBar style="auto" />
-        <ScrollView sx={{ flex: 1 }}>
+        <SafeScrollView>
           <Svg
             sx={{
               aspectRatio: 620 / 472,
@@ -298,7 +292,7 @@ export default function App() {
               </Card>
             ))}
           </Grid>
-        </ScrollView>
+        </SafeScrollView>
       </View>
     </UniversalProvider>
   );

app/src/SafeScrollView.tsx

@@ -0,0 +1,31 @@
+import type { ScrollViewProps } from '@react-universal/components';
+import { ScrollView } from '@react-universal/components';
+import { calc, max, useSafeAreaInsets } from '@react-universal/core';
+
+const defaultContentInset = {
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+};
+
+export const SafeScrollView: React.FC<ScrollViewProps> = ({
+  contentContainerStyle,
+  contentInset = defaultContentInset,
+  scrollIndicatorInsets,
+  ...props
+}) => {
+  const insets = useSafeAreaInsets();
+
+  const bottom = max(calc(contentInset.bottom ?? 0, '-', insets.bottom), 0) as number;
+
+  return (
+    <ScrollView
+      contentContainerStyle={[{ paddingBottom: insets.bottom }, contentContainerStyle]}
+      contentInset={{ ...contentInset, bottom }}
+      scrollIndicatorInsets={scrollIndicatorInsets ?? { bottom }}
+      sx={{ flex: 1 }}
+      {...props}
+    />
+  );
+};

packages/core/src/hooks/useSafeAreaInsets.native.ts

@@ -0,0 +1,5 @@
+import { useUnistyles } from 'react-native-unistyles';
+
+export function useSafeAreaInsets() {
+  return useUnistyles().rt.insets;
+}

packages/core/src/hooks/useSafeAreaInsets.ts

@@ -0,0 +1,5 @@
+import { StyleRuntime } from '../StyleRuntime';
+
+export function useSafeAreaInsets() {
+  return StyleRuntime.insets;
+}

packages/core/src/index.ts

@@ -17,6 +17,7 @@ export * from './hooks/useLazyRef';
 export * from './hooks/useOwnerState';
 export * from './hooks/usePlatformMethods';
 export * from './hooks/useResponderEvents';
+export * from './hooks/useSafeAreaInsets';
 export * from './math';
 export * from './normalizeColor';
 export * from './normalizeLayoutEvent';

packages/core/src/math.ts

@@ -1,9 +1,18 @@
-import { isNumber } from '@react-universal/utils';
+import { isNumber, isString } from '@react-universal/utils';
 import { isWeb } from '@tamagui/constants';
 import { parseRem } from './utils/parseRem';
 
 type Operand = string | number | { toString: () => string };
 
+const operators = {
+  '+': (a: number, b: number): number => a + b,
+  '-': (a: number, b: number): number => a - b,
+  '/': (a: number, b: number): number => a / b,
+  '*': (a: number, b: number): number => a * b,
+};
+
+type Operator = keyof typeof operators;
+
 function parsePx(value: Operand) {
   return isNumber(value) ? `${value}px` : value.toString();
 }
@@ -25,3 +34,33 @@ export function clamp(min: Operand, value: Operand, max: Operand) {
     ? `clamp(${parsePx(min)},${parsePx(value)},${parsePx(max)})`
     : Math.min(Math.max(parseRem(value), parseRem(min)), parseRem(max));
 }
+
+export function calc(...valuesAndOperators: (Operand | Operator)[]): string | number {
+  if (isWeb) {
+    let result = 'calc(';
+    for (const value of valuesAndOperators) {
+      if (isString(value) && value in operators) {
+        result += ` ${value} `; // spaces are significant
+      } else {
+        result += parsePx(value);
+      }
+    }
+    return `${result})`;
+  }
+
+  let result = 0;
+  let operator: ((a: number, b: number) => number) | undefined;
+
+  for (const value of valuesAndOperators) {
+    if (isString(value) && value in operators) {
+      operator = operators[value as Operator];
+    } else if (operator) {
+      result = operator(result, parseRem(value));
+      operator = undefined;
+    } else {
+      result = parseRem(value);
+    }
+  }
+
+  return result;
+}