@granite-js/react-native 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @granite-js/react-native
 
+## 0.1.3
+
+### Patch Changes
+
+- 1adad4c: add StatusBar API
+- a4783c8: expose keyboard utils
+  - @granite-js/cli@0.1.3
+  - @granite-js/image@0.1.3
+  - @granite-js/jest@0.1.3
+  - @granite-js/lottie@0.1.3
+  - @granite-js/mpack@0.1.3
+  - @granite-js/native@0.1.3
+  - @granite-js/style-utils@0.1.3
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -15,5 +15,6 @@ export * from './react';
 export * from './router/createRoute';
 export * from './event';
 export * from './video';
+export * from './status-bar';
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/dist/keyboard/index.d.ts

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

package/dist/status-bar/StatusBar.android.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarProps } from './types';
+export declare function StatusBar({ style, animated, hidden, backgroundColor, translucent }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function useStatusBar({ style, animated, hidden, backgroundColor, translucent }: StatusBarProps): void;

package/dist/status-bar/StatusBar.ios.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarProps } from './types';
+export declare function StatusBar(props: StatusBarProps): null;
+export declare function useStatusBar({ style, hidden }: StatusBarProps): void;

package/dist/status-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBar, useStatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarStyle } from './types';

package/dist/status-bar/types.d.ts

@@ -0,0 +1,20 @@
+export type StatusBarStyle = 'light' | 'dark' | 'auto' | 'inverted';
+export type StatusBarProps = {
+    /**
+     * @default 'auto'
+     */
+    style?: StatusBarStyle;
+    hidden?: boolean;
+    /**
+     * @platform android
+     */
+    animated?: boolean;
+    /**
+     * @platform android
+     */
+    backgroundColor?: string;
+    /**
+     * @platform android
+     */
+    translucent?: boolean;
+};

package/dist/status-bar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarStyle } from './types';
+import type { ColorPreference } from '../initial-props';
+export declare function toStatusBarContentStyle(statusBarStyle?: StatusBarStyle, colorPreference?: ColorPreference): 'light-content' | 'dark-content';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -56,7 +56,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.2",
+    "@granite-js/native": "0.1.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -82,12 +82,12 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.2",
-    "@granite-js/image": "0.1.2",
-    "@granite-js/jest": "0.1.2",
-    "@granite-js/lottie": "0.1.2",
-    "@granite-js/mpack": "0.1.2",
-    "@granite-js/style-utils": "0.1.2",
+    "@granite-js/cli": "0.1.3",
+    "@granite-js/image": "0.1.3",
+    "@granite-js/jest": "0.1.3",
+    "@granite-js/lottie": "0.1.3",
+    "@granite-js/mpack": "0.1.3",
+    "@granite-js/style-utils": "0.1.3",
     "es-toolkit": "^1.34.1",
     "react-native-url-polyfill": "1.3.0"
   }

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './react';
 export * from './router/createRoute';
 export * from './event';
 export * from './video';
+export * from './status-bar';
 
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/src/keyboard/index.ts

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

package/src/status-bar/StatusBar.android.tsx

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from 'react';
+import { StatusBar as BaseStatusBar, useColorScheme } from 'react-native';
+import type { StatusBarProps } from './types';
+import { toStatusBarContentStyle } from './utils';
+
+export function StatusBar({ style, animated, hidden, backgroundColor, translucent = true }: StatusBarProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const translucentWithNoBackgroundColor = translucent && backgroundColor == null;
+
+  return (
+    <BaseStatusBar
+      translucent={translucent}
+      barStyle={toStatusBarContentStyle(style, colorScheme)}
+      backgroundColor={translucentWithNoBackgroundColor ? 'transparent' : backgroundColor}
+      animated={animated}
+      hidden={hidden}
+    />
+  );
+}
+
+export function useStatusBar({ style, animated, hidden, backgroundColor, translucent = true }: StatusBarProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const translucentWithNoBackgroundColor = translucent && backgroundColor == null;
+
+  useLayoutEffect(() => {
+    BaseStatusBar.setTranslucent(translucent);
+    BaseStatusBar.setBarStyle(toStatusBarContentStyle(style, colorScheme));
+    BaseStatusBar.setBackgroundColor(
+      translucentWithNoBackgroundColor ? 'transparent' : (backgroundColor ?? 'transparent')
+    );
+
+    if (hidden !== undefined) {
+      BaseStatusBar.setHidden(hidden);
+    }
+  }, [colorScheme, translucentWithNoBackgroundColor, style, animated, hidden, backgroundColor, translucent]);
+}

package/src/status-bar/StatusBar.d.ts

@@ -0,0 +1,4 @@
+import type { StatusBarProps } from './types';
+
+export declare function StatusBar(props: StatusBarProps): JSX.Element;
+export declare function useStatusBar(props: StatusBarProps): void;

package/src/status-bar/StatusBar.ios.tsx

@@ -0,0 +1,34 @@
+import { useLayoutEffect } from 'react';
+import { useColorScheme } from 'react-native';
+import type { StatusBarProps } from './types';
+import { toStatusBarContentStyle } from './utils';
+import { useNavigation } from '../router/createRoute';
+
+export function StatusBar(props: StatusBarProps) {
+  useStatusBar(props);
+
+  return null;
+}
+
+export function useStatusBar({ style, hidden }: StatusBarProps) {
+  const navigation = useNavigation();
+  const colorScheme = useColorScheme() ?? 'light';
+
+  useLayoutEffect(() => {
+    let statusBarStyle: 'light' | 'dark';
+
+    switch (toStatusBarContentStyle(style, colorScheme)) {
+      case 'light-content':
+        statusBarStyle = 'light';
+        break;
+      case 'dark-content':
+        statusBarStyle = 'dark';
+        break;
+    }
+
+    navigation.setOptions({
+      statusBarStyle,
+      statusBarHidden: hidden,
+    });
+  }, [navigation, colorScheme, style, hidden]);
+}

package/src/status-bar/index.ts

@@ -0,0 +1,2 @@
+export { StatusBar, useStatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarStyle } from './types';

package/src/status-bar/types.ts

@@ -0,0 +1,21 @@
+export type StatusBarStyle = 'light' | 'dark' | 'auto' | 'inverted';
+
+export type StatusBarProps = {
+  /**
+   * @default 'auto'
+   */
+  style?: StatusBarStyle;
+  hidden?: boolean;
+  /**
+   * @platform android
+   */
+  animated?: boolean;
+  /**
+   * @platform android
+   */
+  backgroundColor?: string;
+  /**
+   * @platform android
+   */
+  translucent?: boolean;
+};

package/src/status-bar/utils.ts

@@ -0,0 +1,20 @@
+import type { StatusBarStyle } from './types';
+import type { ColorPreference } from '../initial-props';
+
+export function toStatusBarContentStyle(
+  statusBarStyle: StatusBarStyle = 'auto',
+  colorPreference: ColorPreference = 'light'
+): 'light-content' | 'dark-content' {
+  const resolvedStyle = (() => {
+    switch (statusBarStyle) {
+      case 'auto':
+        return colorPreference === 'light' ? 'dark' : 'light';
+      case 'inverted':
+        return colorPreference === 'light' ? 'light' : 'dark';
+      default:
+        return statusBarStyle;
+    }
+  })();
+
+  return resolvedStyle === 'light' ? 'light-content' : 'dark-content';
+}