@granite-js/react-native 0.0.1

package/src/keyboard/KeyboardAboveView.tsx

@@ -0,0 +1,62 @@
+import { ComponentProps, ReactElement } from 'react';
+import { Animated, View } from 'react-native';
+import { useKeyboardAnimatedHeight } from './useKeyboardAnimatedHeight';
+
+/**
+ * @public
+ * @category UI
+ * @name KeyboardAboveView
+ * @kind function
+ * @description
+ * A component that automatically lifts child components above the keyboard when it appears on the screen.
+ * It's useful when you want to keep elements like a "Send" button fixed above the keyboard during text input.
+ *
+ * @param {StyleProp<ViewStyle>} [props.style] - Additional styles can be applied. For example, you can set background color or size.
+ * @param {ReactNode} [props.children] - Components to be displayed above the keyboard when it appears. For example, you can include buttons, text input fields, etc.
+ * @returns {ReactElement} - Returns an [`Animated.View`](https://reactnative.dev/docs/animated#createanimatedcomponent) that is adjusted above the keyboard when it appears.
+ * @example
+ *
+ * ### Lifting elements above the keyboard
+ *
+ * ```tsx
+ * import { ScrollView, TextInput, View, Text } from 'react-native';
+ * import { KeyboardAboveView } from '@granite-js/react-native';
+ *
+ * export function KeyboardAboveViewExample() {
+ *   return (
+ *     <>
+ *       <ScrollView>
+ *         <TextInput placeholder="placeholder" />
+ *       </ScrollView>
+ *
+ *       <KeyboardAboveView>
+ *         <View style={{ width: '100%', height: 50, backgroundColor: 'yellow' }}>
+ *           <Text>Above the keyboard</Text>
+ *         </View>
+ *       </KeyboardAboveView>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function KeyboardAboveView({ style, children, ...props }: ComponentProps<typeof View>): ReactElement {
+  const keyboardHeight = useKeyboardAnimatedHeight();
+
+  return (
+    <Animated.View
+      style={[
+        style,
+        {
+          transform: [
+            {
+              translateY: Animated.subtract(0, keyboardHeight),
+            },
+          ],
+        },
+      ]}
+      {...props}
+    >
+      {children}
+    </Animated.View>
+  );
+}

package/src/keyboard/index.ts

@@ -0,0 +1 @@
+export { KeyboardAboveView } from './KeyboardAboveView';

package/src/keyboard/useKeyboardAnimatedHeight.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Keyboard, Platform } from 'react-native';
+
+function getInitialKeyboardHeight() {
+  if (Platform.OS !== 'ios') {
+    return 0;
+  }
+
+  /**
+   * Branch handling for React Native 0.68.0 version where `metrics()` does not exist
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (typeof Keyboard?.metrics === 'function') {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Keyboard.metrics()?.height ?? 0;
+  } else {
+    return 0;
+  }
+}
+
+/**
+ * @category Hooks
+ * @name useKeyboardAnimatedHeight
+ * @description
+ * A Hook that returns an animatable value (`Animated.Value`) representing the keyboard height changes when the keyboard appears or disappears. You can smoothly animate UI elements according to the keyboard height as it rises or falls.
+ *
+ * This Hook is primarily used on iOS. On Android, it does not detect keyboard height changes and always returns an `Animated.Value` with an initial value of `0`. In other words, animations are not applied in the Android environment.
+ *
+ * @returns {Animated.Value} - An animation value representing the keyboard height.
+ * @example
+ * ```typescript
+ * const keyboardHeight = useKeyboardAnimatedHeight();
+ *
+ * <Animated.View style={{ marginBottom: keyboardHeight }}>
+ *  {children}
+ * </Animated.View>
+ * ```
+ */
+export function useKeyboardAnimatedHeight(): Animated.Value {
+  const keyboardHeight = useRef(new Animated.Value(getInitialKeyboardHeight())).current;
+
+  useEffect(() => {
+    if (Platform.OS === 'ios') {
+      const willShowSubscription = Keyboard.addListener('keyboardWillShow', (event) => {
+        const height = event.endCoordinates.height;
+
+        Animated.spring(keyboardHeight, {
+          toValue: height,
+          useNativeDriver: true,
+          ...spring.quick,
+        }).start();
+      });
+
+      const willHideSubscription = Keyboard.addListener('keyboardWillHide', () => {
+        Animated.spring(keyboardHeight, {
+          toValue: 0,
+          useNativeDriver: true,
+          ...spring.quick,
+        }).start();
+      });
+      return () => {
+        willShowSubscription.remove();
+        willHideSubscription.remove();
+      };
+    } else {
+      return;
+    }
+  }, [keyboardHeight]);
+
+  return keyboardHeight;
+}
+
+const spring = {
+  quick: {
+    stiffness: 800,
+    damping: 55,
+    mass: 1,
+  },
+};

package/src/native-event-emitter/eventEmitters/index.ts

@@ -0,0 +1,3 @@
+import { VisibilityChangedEventEmitter } from './visibilityChanged';
+
+export type EventEmitters = VisibilityChangedEventEmitter;

package/src/native-event-emitter/eventEmitters/types.ts

@@ -0,0 +1,4 @@
+export interface EventEmitterSchema<K extends string, P extends unknown[]> {
+  name: K;
+  params: P;
+}

package/src/native-event-emitter/eventEmitters/visibilityChanged.ts

@@ -0,0 +1,11 @@
+import { EventEmitterSchema } from './types';
+
+/**
+ * @name VisibilityChangedEventEmitter
+ * @kind typedef
+ * @platform iOS
+ * @description
+ * Emits an event when the visibility state of the app changes.
+ * Only available on iOS.
+ */
+export type VisibilityChangedEventEmitter = EventEmitterSchema<'visibilityChanged', [boolean]>;

package/src/native-event-emitter/index.ts

@@ -0,0 +1 @@
+export * from './nativeEventEmitter';

package/src/native-event-emitter/nativeEventEmitter.ts

@@ -0,0 +1,18 @@
+import { EmitterSubscription, NativeEventEmitter } from 'react-native';
+import { EventEmitters } from './eventEmitters';
+import { GraniteCoreModule } from '../native-modules';
+import { EventEmitterSchema } from './eventEmitters/types';
+
+type MapOf<T> = T extends EventEmitterSchema<infer K, any> ? { [key in K]: T } : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type EventEmittersMap = UnionToIntersection<MapOf<EventEmitters>>;
+type EventKeys = keyof EventEmittersMap;
+type ParamOf<K extends EventKeys> = EventEmittersMap[K]['params'];
+interface EventEmitter {
+  addListener<Event extends EventKeys>(
+    event: Event,
+    callback: (...params: ParamOf<Event>) => void
+  ): EmitterSubscription;
+}
+
+export const nativeEventEmitter = new NativeEventEmitter(GraniteCoreModule) as unknown as EventEmitter;

package/src/native-modules/core/GraniteCoreModule.ts

@@ -0,0 +1,9 @@
+import { TurboModule, TurboModuleRegistry } from 'react-native';
+
+interface GraniteCoreModule extends TurboModule {
+  addListener: (eventType: string) => void;
+  removeListeners: (count: number) => void;
+  importLazy: () => Promise<void>;
+}
+
+export const GraniteCoreModule = TurboModuleRegistry.getEnforcing<GraniteCoreModule>('GraniteCoreModule');

package/src/native-modules/index.ts

@@ -0,0 +1,3 @@
+/** Bridges API */
+export * from './natives';
+export { GraniteCoreModule } from './core/GraniteCoreModule';

package/src/native-modules/natives/GraniteModule.ts

@@ -0,0 +1,8 @@
+import { TurboModule, TurboModuleRegistry } from 'react-native';
+
+interface GraniteModuleSpec extends TurboModule {
+  closeView: () => void;
+  schemeUri: string;
+}
+
+export const GraniteModule = TurboModuleRegistry.getEnforcing<GraniteModuleSpec>('GraniteModule');

package/src/native-modules/natives/closeView.ts

@@ -0,0 +1,25 @@
+import { GraniteModule } from './GraniteModule';
+
+/**
+ * @public
+ * @category Screen Control
+ * @kind function
+ * @name closeView
+ * @description Function that closes the current screen. It can be used when you want to exit a service by pressing a "Close" button.
+ * @returns {Promise<void>}
+ *
+ * @example
+ * ### Close screen with close button
+ *
+ * ```tsx
+ * import { Button } from 'react-native';
+ * import { closeView } from '@granite-js/react-native';
+ *
+ * function CloseButton() {
+ *  return <Button title="Close" onPress={closeView} />;
+ * }
+ * ```
+ */
+export async function closeView() {
+  return GraniteModule.closeView();
+}

package/src/native-modules/natives/getSchemeUri.ts

@@ -0,0 +1,27 @@
+import { GraniteModule } from './GraniteModule';
+
+/**
+ * @public
+ * @name getSchemeUri
+ * @category Environment Check
+ * @kind function
+ * @description Returns the scheme value when first entering the screen. URI changes due to page navigation are not reflected.
+ * @returns {string} Returns the scheme value when first entering the screen.
+ *
+ * @example
+ * ### Get initial scheme value
+ *
+ * ```tsx
+ * import { getSchemeUri } from '@granite-js/react-native';
+ * import { Text } from 'react-native';
+ *
+ * function MyPage() {
+ *  const schemeUri = getSchemeUri();
+ *
+ *  return <Text>Initial scheme value: {schemeUri}</Text>
+ * }
+ * ```
+ */
+export function getSchemeUri() {
+  return GraniteModule.schemeUri;
+}

package/src/native-modules/natives/index.ts

@@ -0,0 +1,3 @@
+export * from './closeView';
+export * from './getSchemeUri';
+export * from './openURL';

package/src/native-modules/natives/openURL.ts

@@ -0,0 +1,40 @@
+import { Linking } from 'react-native';
+
+/**
+ * @public
+ * @kind function
+ * @category Screen Navigation
+ *
+ * @name openURL
+ * @signature
+ * ```typescript
+ * function openURL(url: string): Promise<any>;
+ * ```
+ *
+ * @description
+ * Opens the specified URL in the device's default browser or related app.
+ * This function uses the [`Linking.openURL`](https://reactnative.dev/docs/0.72/linking#openurl) method from `react-native` to open the URL.
+ *
+ * @param {string} url URL address to open
+ * @returns {Promise<any>} Promise that resolves when the URL is successfully opened
+ *
+ * @example
+ *
+ * ### Open external URL
+ *
+ * ```tsx
+ * import { openURL } from '@granite-js/react-native';
+ * import { Button } from 'react-native';
+ *
+ * function Page() {
+ *   const handlePress = () => {
+ *     openURL('https://google.com');
+ *   };
+ *
+ *   return <Button title="Open Google Website" onPress={handlePress} />;
+ * }
+ * ```
+ */
+export function openURL(url: string): Promise<any> {
+  return Linking.openURL(url);
+}

package/src/react/index.ts

@@ -0,0 +1 @@
+export { useWaitForReturnNavigator } from './useWaitForReturnNavigator';

package/src/react/useWaitForReturnNavigator.ts

@@ -0,0 +1,75 @@
+import { useNavigation } from '@granite-js/native/@react-navigation/native';
+import { NativeStackNavigationProp } from '@granite-js/native/@react-navigation/native-stack';
+import { useCallback, useRef } from 'react';
+import { useVisibilityChange, type VisibilityState } from '../visibility';
+
+/**
+ * @public
+ * @category Screen Control
+ * @name useWaitForReturnNavigator
+ * @description
+ * A Hook that helps execute the next code synchronously when returning from a screen transition.
+ * Screen navigation uses [@react-navigation/native `useNavigation`'s `navigate`](https://reactnavigation.org/docs/6.x/navigation-prop#navigate).
+ *
+ * For example, it can be used when you want to log that a user has navigated to another screen and returned.
+ *
+ * @example
+ * ### Example of code execution when returning from screen navigation
+ *
+ * When the **"Navigate"** button is pressed, it navigates to another screen, and logs are created when returning.
+ *
+ * ```tsx
+ * import { Button } from 'react-native';
+ * import { useWaitForReturnNavigator } from '@granite-js/react-native';
+ *
+ * export function UseWaitForReturnNavigator() {
+ *   const navigate = useWaitForReturnNavigator();
+ *
+ *   return (
+ *     <>
+ *       <Button
+ *         title="Navigate"
+ *         onPress={async () => {
+ *           console.log(1);
+ *           await navigate('/examples/use-visibility');
+ *           // This code executes when returning to the screen
+ *           console.log(2);
+ *         }}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+export function useWaitForReturnNavigator<T extends Record<string, object | undefined>>() {
+  const callbacks = useRef<Array<() => void>>([]).current;
+  const navigation = useNavigation<NativeStackNavigationProp<T>>();
+
+  const startNavigating = useCallback(
+    <RouteName extends keyof T>(route: RouteName, params?: T[RouteName]): Promise<void> => {
+      return new Promise<void>((resolve) => {
+        callbacks.push(resolve);
+        navigation.navigate(route as any, params as any);
+      });
+    },
+    [callbacks, navigation]
+  );
+
+  const handleVisibilityChange = useCallback(
+    (state: VisibilityState) => {
+      if (state === 'visible' && callbacks.length > 0) {
+        for (const callback of callbacks) {
+          callback();
+        }
+
+        callbacks.splice(0, callbacks.length);
+      }
+    },
+    [callbacks]
+  );
+
+  useVisibilityChange(handleVisibilityChange);
+
+  return startNavigating;
+}

package/src/rn-polyfills/index.ts

@@ -0,0 +1,7 @@
+import { setup as setupSymbolAsyncIterator } from './symbol-asynciterator';
+import { setup as setupURLPolyfill } from './url';
+
+export function setup() {
+  setupSymbolAsyncIterator();
+  setupURLPolyfill();
+}

package/src/rn-polyfills/symbol-asynciterator/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Polyfill for @swc/helpers build compatibility
+ *
+ * @see https://github.com/swc-project/swc/blob/v1.4.15/packages/helpers/esm/_async_iterator.js#L3
+ *
+ * - babel: No runtime issues after build as there is a fallback for `Symbol.asyncIterator`
+ * - swc: No fallback for `Symbol.asyncIterator`, so it needs to be defined in advance
+ */
+export function setup() {
+  if (typeof Symbol !== 'undefined' && !Symbol.asyncIterator) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    Symbol.asyncIterator = Symbol.for('@@asyncIterator');
+  }
+}

package/src/rn-polyfills/url/index.ts

@@ -0,0 +1 @@
+export { setupURLPolyfill as setup } from 'react-native-url-polyfill';

package/src/router/Router.tsx

@@ -0,0 +1,164 @@
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+  NavigationContainerRefWithCurrent,
+  ParamListBase,
+  RouteProp,
+} from '@granite-js/native/@react-navigation/native';
+import { NativeStackNavigationOptions } from '@granite-js/native/@react-navigation/native-stack';
+import { ComponentProps, ComponentType, Fragment, PropsWithChildren, ReactElement, useCallback, useMemo } from 'react';
+import { InitialProps } from '..';
+import { CanGoBackGuard } from './components/CanGoBackGuard';
+import { RouterBackButton, RouterBackButtonProps } from './components/RouterBackButton';
+import { StackNavigator } from './components/StackNavigator';
+import { useInitialRouteName } from './hooks/useInitialRouteName';
+import { useRouterControls } from './hooks/useRouterControls';
+import { RequireContext } from './types';
+import { BASE_STACK_NAVIGATOR_STYLE } from './types/screen-option';
+
+/**
+ * @internal
+ */
+export interface InternalRouterProps {
+  /**
+   * @name context
+   * @description
+   * Object containing screen information used for file-based routing.
+   */
+  context: RequireContext;
+  /**
+   * @name prefix
+   * @description
+   * Prefix to use when the scheme is executed. For example, to enter 'scheme://my-service/intro', you need to set 'scheme://my-service' as the prefix.
+   */
+  prefix: string;
+  /**
+   * @name canGoBack
+   * @description
+   * Whether navigation back is possible. Default is true, and when set to true, you can use the back gesture or back button from @react-navigation/native.
+   * @default true
+   */
+  canGoBack?: boolean;
+  /**
+   * @name onBack
+   * @description
+   * Callback function called when navigating back.
+   */
+  onBack?: () => void;
+  /**
+   * @name container
+   * @description
+   * Container component that wraps the Navigator from @react-navigation/native.
+   */
+  container: ComponentType<PropsWithChildren<InitialProps>>;
+  initialProps: InitialProps;
+}
+
+export type RouterProps = StackNavigatorProps & NavigationContainerProps;
+
+interface StackNavigatorProps {
+  /**
+   * @name navigationContainerRef
+   * @description
+   * You can create and pass a NavigationContainerRef from @react-navigation/native externally. This allows external control of the router.
+   */
+  navigationContainerRef?: NavigationContainerRefWithCurrent<any>;
+  /**
+   * @name defaultScreenOption
+   * @description
+   * Default options for screens. You can set options to be applied commonly to screens, such as title or headerStyle.
+   */
+  defaultScreenOption?:
+    | NativeStackNavigationOptions
+    | ((props: { route: RouteProp<ParamListBase>; navigation: any }) => NativeStackNavigationOptions);
+  /**
+   * @name screenContainer
+   * @description
+   * Container component that wraps each Screen component.
+   */
+  screenContainer?: ComponentType<PropsWithChildren<any>>;
+}
+
+type NavigationContainerProps = Pick<
+  ComponentProps<typeof NavigationContainer>,
+  'ref' | 'documentTitle' | 'fallback' | 'onReady' | 'onUnhandledAction' | 'onStateChange'
+>;
+
+/**
+ * @category Components
+ * @kind function
+ * @name Router
+ * @description
+ * Router component for page navigation in React Native environment.
+ * Automatically assigns appropriate paths to screens based on file naming rules in pages/*.
+ * Using this component, you can manage screens in a way similar to Next.js's file-based routing.
+ *
+ * @param {string} prefix Prefix to use when the scheme is executed. For example, to enter 'scheme://my-service/intro', you need to set 'scheme://my-service' as the prefix.
+ * @param {RequireContext} context Object containing information about screens for file-based routing.
+ * @param {NavigationContainerRefWithCurrent<any>} [navigationContainerRef] You can create and pass a NavigationContainerRef from @react-navigation/native externally. This allows external control of the router.
+ * @param {NativeStackNavigationOptions | ((props: { route: RouteProp<ParamListBase>; navigation: any }) => NativeStackNavigationOptions)} [defaultScreenOption] Default options for screens. You can set options to be applied commonly to screens, such as title or headerStyle.
+ * @param {boolean} [canGoBack=true] Whether navigation back is possible. Default is true, and when set to true, you can use the back gesture or back button from @react-navigation/native.
+ * @param {() => void} [onBack] Callback function called when the user presses the back button or uses the back gesture. For example, you can set it to log when the user presses the back button.
+ * @param {ComponentType<{ children: ReactNode }>} [container=Fragment] Container component that wraps the Navigator from @react-navigation/native.
+ * @param {NavigationContainerProps} [navigationContainerProps] - You can set props to be passed to NavigationContainer from @react-navigation/native.
+ *
+ * @returns {ReactElement} - Returns the router component.
+ * @example
+ * ```tsx
+ * import { Router } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * function App() {
+ *  return <Router context={context} prefix={'scheme://testbench'} />;
+ * }
+ * ```
+ */
+export function Router({
+  // Internal props
+  prefix,
+  context,
+  canGoBack = true,
+  onBack,
+  container: Container = Fragment,
+  initialProps,
+  // Public props (NavigationContainer)
+  navigationContainerRef,
+  defaultScreenOption,
+  screenContainer,
+  // Public props (StackNavigator)
+  ...navigationContainerProps
+}: InternalRouterProps & RouterProps): ReactElement {
+  const initialRouteName = useInitialRouteName(prefix);
+  const { Screens, linkingOptions } = useRouterControls({ prefix, context, screenContainer });
+
+  const ref = useMemo(() => navigationContainerRef ?? createNavigationContainerRef<any>(), [navigationContainerRef]);
+
+  const headerLeft = useCallback(
+    (backButtonProps: Omit<RouterBackButtonProps, 'navigationContainerRef'>) => (
+      <RouterBackButton {...backButtonProps} onBack={onBack} canGoBack={canGoBack} navigationContainerRef={ref} />
+    ),
+    [onBack, canGoBack, ref]
+  );
+
+  const screenOptions = useCallback(
+    (screenProps: any) => ({
+      ...BASE_STACK_NAVIGATOR_STYLE,
+      gestureEnabled: canGoBack,
+      headerLeft,
+      ...(typeof defaultScreenOption === 'function' ? defaultScreenOption(screenProps) : defaultScreenOption),
+    }),
+    [canGoBack, defaultScreenOption, headerLeft]
+  );
+
+  return (
+    <NavigationContainer ref={ref} {...navigationContainerProps} linking={linkingOptions}>
+      <CanGoBackGuard canGoBack={canGoBack} onBack={onBack}>
+        <Container {...initialProps}>
+          <StackNavigator.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
+            {Screens}
+          </StackNavigator.Navigator>
+        </Container>
+      </CanGoBackGuard>
+    </NavigationContainer>
+  );
+}

package/src/router/components/BackButton.tsx

@@ -0,0 +1,58 @@
+import { SvgXml } from '@granite-js/native/react-native-svg';
+import { Platform, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
+interface BackButtonProps extends TouchableOpacityProps {
+  tintColor?: string;
+  onPress?: () => void;
+}
+
+const DEFAULT_COLOR = '#191f28'; // grey900
+function BackButton({ tintColor, onPress }: BackButtonProps) {
+  return <NavbarBackButton onPress={onPress} color={tintColor ?? DEFAULT_COLOR} />;
+}
+
+function NavbarBackButton({ onPress, color }: { onPress?: () => void; color?: string }) {
+  return (
+    <TouchableOpacity
+      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+      style={{ width: 24, height: 24 }}
+      onPress={onPress}
+      accessible={true}
+      accessibilityLabel="Go back"
+      accessibilityRole="button"
+    >
+      <View style={{ width: 24, height: 24 }}>
+        <SvgXml
+          width={24}
+          height={24}
+          xml={BACK_BUTTON_XML.replace(/fill="#[0-9a-fA-F]{6}"/g, `fill="${color}"`)}
+          style={{
+            marginLeft: BACK_BUTTON_MARGIN,
+          }}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const ANDROID_BACK_BUTTON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="line-icon">
+<path fill="#B0B8C1" fill-rule="evenodd" d="M20.966 10.8H6.93l5.451-5.451a1.2 1.2 0 10-1.697-1.697l-7.5 7.5c-.003.002-.004.006-.007.009a1.2 1.2 0 00-.252 1.298c.06.143.145.27.252.38l.007.01 7.5 7.5c.235.234.542.35.848.35a1.2 1.2 0 00.849-2.048L6.931 13.2h14.036a1.2 1.2 0 100-2.4"/>
+</svg>`;
+
+const IOS_BACK_BUTTON = `<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="m20.8 20.7c-.3 0-.6-.1-.8-.4l-7.5-7.5c-.5-.5-.5-1.2 0-1.7l7.5-7.5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7l-6.8 6.7 6.7 6.7c.5.5.5 1.2 0 1.7-.2.2-.5.3-.8.3z" fill="#b0b8c1"/>
+</svg>`;
+
+const BACK_BUTTON_XML = Platform.select<string>({
+  android: ANDROID_BACK_BUTTON,
+  ios: IOS_BACK_BUTTON,
+  default: IOS_BACK_BUTTON,
+});
+
+const BACK_BUTTON_MARGIN = Platform.select<number>({
+  android: -4,
+  ios: -12,
+  default: -12,
+});
+
+export { BackButton };