bootstrap-rn 0.4.6 → 0.4.7

package/lib/typescript/utils.d.ts

@@ -1,13 +1,12 @@
-import type { ExtendedStyle, ThemeVariables, StyleValue, PlacementAxis, TransformedPlacementAxis } from './types';
+import type { ExtendedStyle, ThemeVariables, StyleValue } from './types';
 export declare function each<T extends Record<string, string | ((t: ThemeVariables) => StyleValue)>>(source: T, apply: (key: keyof T, resolve: (t: ThemeVariables) => StyleValue) => Record<string, any>): Record<string, any>;
 export declare function normalize(value: object[]): object;
 export declare function makeProxy<T extends (string | number)[]>(name: string, keys: T): { [key in T[number]]: (t: ThemeVariables) => StyleValue; };
 export declare function makeArray(length: number, callback: (index: number) => object): object[];
 type FalsyValue = false | undefined | null | '' | 0;
 export declare function getStyles<T extends string>(styles: Record<string, ExtendedStyle>, keys: (T | FalsyValue)[]): ExtendedStyle[];
-export declare function concatRefs<T>(...refs: React.Ref<T>[]): React.Ref<T>;
+export declare function concatRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.Ref<T>;
 export declare function optional(condition: boolean, value: object): object | undefined;
 export declare function getElementId(identifier: string, name: string): string;
-export declare function transformPlacement(placement: PlacementAxis): TransformedPlacementAxis;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,aAAa,EACb,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,wBAAgB,IAAI,CAClB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,CAAC,CAAC,EAEtE,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CACL,GAAG,EAAE,MAAM,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,KAEvC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAQzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAExC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EACrD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,MAOI,GAAG,oBAAoB,cAAc,KAAK,UAAU,IAEhE;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,YAE5E;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AAEpD,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,mBAKzB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAWnE;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAEzD;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAE5D;AAED,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,aAAa,GACvB,wBAAwB,CAS1B"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEzE,wBAAgB,IAAI,CAClB,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,CAAC,CAAC,EAEtE,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CACL,GAAG,EAAE,MAAM,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,UAAU,KAEvC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAQzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,UAExC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EACrD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,CAAC,MAOI,GAAG,oBAAoB,cAAc,KAAK,UAAU,IAEhE;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,YAE5E;AAED,KAAK,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AAEpD,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,mBAKzB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAC1B,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,GACpC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAWd;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAEzD;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAE5D"}

package/package.json

@@ -1,85 +1,92 @@
-{
-  "name": "bootstrap-rn",
-  "version": "0.4.6",
-  "description": "Bootstrap RN provides Bootstrap components for React Native.",
-  "author": "Markus Wetzel <markuswetzel@gmx.net>",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "native",
-    "react-native",
-    "bootstrap",
-    "ui",
-    "style"
-  ],
-  "repository": "https://github.com/examunity/bootstrap-rn.git",
-  "bugs": {
-    "url": "https://github.com/examunity/bootstrap-rn/issues"
-  },
-  "main": "lib/module/index.js",
-  "module": "lib/module/index.js",
-  "source": "src/index.ts",
-  "types": "./lib/typescript/index.d.ts",
-  "scripts": {
-    "check-types": "tsc --noEmit",
-    "build": "bob build",
-    "prepare": "packsy validate && yarn build",
-    "lint": "packsy pre-commit && yarn check-types"
-  },
-  "files": [
-    "src",
-    "lib"
-  ],
-  "dependencies": {
-    "@react-native-aria/focus": "^0.2.7",
-    "@react-native-aria/overlays": "^0.3.5",
-    "css-to-react-native": "^3.2.0",
-    "tiny-invariant": "^1.3.1"
-  },
-  "devDependencies": {
-    "@types/react": "~19.0.10",
-    "cpy-cli": "^5.0.0",
-    "packsy": "^0.2.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.2",
-    "react-native-builder-bob": "^0.40.10",
-    "react-native-svg": "15.11.2",
-    "react-native-web": "^0.20.0",
-    "typescript": "~5.8.3"
-  },
-  "peerDependencies": {
-    "@types/react": ">=17",
-    "react": ">=17",
-    "react-dom": ">=17",
-    "react-native": ">=0.63.0",
-    "react-native-svg": ">=12.3.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    }
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "packsy pre-commit"
-    }
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      "typescript"
-    ]
-  },
-  "engines": {
-    "node": ">= 8",
-    "npm": ">= 5"
-  }
-}
+{
+  "name": "bootstrap-rn",
+  "version": "0.4.7",
+  "description": "Bootstrap RN provides Bootstrap components for React Native.",
+  "author": "Markus Wetzel <markuswetzel@gmx.net>",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "native",
+    "react-native",
+    "bootstrap",
+    "ui",
+    "style"
+  ],
+  "repository": "https://github.com/examunity/bootstrap-rn.git",
+  "bugs": {
+    "url": "https://github.com/examunity/bootstrap-rn/issues"
+  },
+  "main": "lib/module/index.js",
+  "module": "lib/module/index.js",
+  "source": "src/index.ts",
+  "types": "./lib/typescript/index.d.ts",
+  "scripts": {
+    "check-types": "tsc --noEmit",
+    "build": "bob build",
+    "prepare": "packsy validate && yarn build",
+    "lint": "packsy pre-commit && yarn check-types"
+  },
+  "files": [
+    "src",
+    "lib"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "^0.27.16",
+    "@react-aria/focus": "^3.21.3",
+    "@rn-primitives/hooks": "^1.3.0",
+    "@rn-primitives/portal": "^1.3.0",
+    "css-to-react-native": "^3.2.0",
+    "tiny-invariant": "^1.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "@types/react-dom": "~19.1.10",
+    "packsy": "^0.2.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-web": "^0.21.0",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-native": ">=0.78",
+    "react-native-safe-area-context": ">=5",
+    "react-native-svg": ">=15",
+    "react-native-web": ">=0.20"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "packsy pre-commit"
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "engines": {
+    "node": ">= 16",
+    "npm": ">= 8"
+  }
+}

package/src/Context.ts

@@ -1,38 +1,37 @@
-import React from 'react';
-import { View as BaseView } from 'react-native';
-import type { ExtendedStyle, Viewport } from './types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ModifierProps = any;
-
-export type Modifier = (
-  props: ModifierProps,
-  ref: React.Ref<unknown>,
-) => ModifierProps & { ref?: React.Ref<unknown> };
-
-export type Modifiers = {
-  useFormField?: Modifier;
-  useTabbable?: Modifier;
-  useActionable?: Modifier;
-};
-
-export type BootstrapRNContextType = {
-  utilities: Record<string, ExtendedStyle>;
-  modifiers: Modifiers;
-  scrollbars: {
-    hide: () => void;
-    show: () => void;
-  };
-  fixed: React.RefObject<BaseView>[];
-  getViewport(): Viewport;
-  addFixedElement: (ref: unknown) => {
-    remove: () => void;
-  };
-  generateKey(prefix: string): string;
-};
-
-const Context = React.createContext<BootstrapRNContextType | null>(null);
-
-Context.displayName = 'BootstrapRNContext';
-
-export default Context;
+import React from 'react';
+import { View as BaseView } from 'react-native';
+import type { ExtendedStyle, Viewport } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ModifierProps = any;
+
+export type Modifier = (
+  props: ModifierProps,
+  ref: React.Ref<unknown>,
+) => ModifierProps & { ref?: React.Ref<unknown> };
+
+export type Modifiers = {
+  useFormField?: Modifier;
+  useTabbable?: Modifier;
+  useActionable?: Modifier;
+};
+
+export type BootstrapRNContextType = {
+  utilities: Record<string, ExtendedStyle>;
+  modifiers: Modifiers;
+  scrollbars: {
+    hide: () => void;
+    show: () => void;
+  };
+  fixed: React.RefObject<BaseView>[];
+  getViewport(): Viewport;
+  addFixedElement: (ref: unknown) => {
+    remove: () => void;
+  };
+};
+
+const Context = React.createContext<BootstrapRNContextType | null>(null);
+
+Context.displayName = 'BootstrapRNContext';
+
+export default Context;

package/src/Provider.tsx

@@ -1,66 +1,61 @@
-import React, { useMemo, useRef } from 'react';
-import { View as BaseView } from 'react-native';
-import { OverlayProvider } from '@react-native-aria/overlays';
-import useViewport from './hooks/useViewport';
-import useScrollbarEffects from './hooks/useScrollbarEffects';
-import Context, { Modifiers } from './Context';
-import type { ExtendedStyle, Viewport } from './types';
-
-type ProviderProps = {
-  children: React.ReactNode;
-  utilities?: Record<string, ExtendedStyle>;
-  modifiers?: Modifiers;
-  ssrViewport: Viewport;
-};
-
-function Provider({
-  children,
-  utilities = {},
-  modifiers = {},
-  ssrViewport,
-}: ProviderProps) {
-  const viewport = useViewport(ssrViewport);
-
-  const fixed: React.RefObject<BaseView>[] = useMemo(() => [], []);
-
-  const counter = useRef(0);
-
-  const scrollbars = useScrollbarEffects(fixed);
-
-  const context = useMemo(
-    () => ({
-      utilities,
-      modifiers,
-      scrollbars,
-      fixed,
-      getViewport() {
-        return viewport;
-      },
-      addFixedElement(ref: React.RefObject<BaseView>) {
-        fixed.push(ref);
-
-        return {
-          remove() {
-            const index = fixed.findIndex((item) => item === ref);
-
-            fixed.splice(index, 1);
-          },
-        };
-      },
-      generateKey(prefix: string) {
-        counter.current += 1;
-
-        return `ui-${prefix}-${counter.current}`;
-      },
-    }),
-    [utilities, modifiers, scrollbars, fixed, viewport, fixed, counter],
-  );
-
-  return (
-    <Context.Provider value={context}>
-      <OverlayProvider>{children}</OverlayProvider>
-    </Context.Provider>
-  );
-}
-
-export default Provider;
+import React, { useMemo, useRef } from 'react';
+import { View as BaseView } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import useViewport from './hooks/useViewport';
+import useScrollbarEffects from './hooks/useScrollbarEffects';
+import Context, { Modifiers } from './Context';
+import type { ExtendedStyle, Viewport } from './types';
+
+type ProviderProps = {
+  children: React.ReactNode;
+  utilities?: Record<string, ExtendedStyle>;
+  modifiers?: Modifiers;
+  ssrViewport: Viewport;
+};
+
+function Provider({
+  children,
+  utilities = {},
+  modifiers = {},
+  ssrViewport,
+}: ProviderProps) {
+  const viewport = useViewport(ssrViewport);
+
+  const fixed: React.RefObject<BaseView>[] = useMemo(() => [], []);
+
+  const counter = useRef(0);
+
+  const scrollbars = useScrollbarEffects(fixed);
+
+  const context = useMemo(
+    () => ({
+      utilities,
+      modifiers,
+      scrollbars,
+      fixed,
+      getViewport() {
+        return viewport;
+      },
+      addFixedElement(ref: React.RefObject<BaseView>) {
+        fixed.push(ref);
+
+        return {
+          remove() {
+            const index = fixed.findIndex((item) => item === ref);
+
+            fixed.splice(index, 1);
+          },
+        };
+      },
+    }),
+    [utilities, modifiers, scrollbars, fixed, viewport, fixed, counter],
+  );
+
+  return (
+    <Context.Provider value={context}>
+      <SafeAreaProvider>{children}</SafeAreaProvider>
+    </Context.Provider>
+  );
+}
+
+export default Provider;

package/src/components/Body.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import StyleSheet from '../style/StyleSheet';
 import css from '../style/css';
 import { getStyles } from '../utils';
@@ -29,7 +30,21 @@ const Body = React.forwardRef<ViewRef, BodyProps>((props, ref) => {
 
   const media = useMedia();
 
-  const resolveStyle = useStyle([classes, style], styleName);
+  const insets = useSafeAreaInsets();
+
+  const resolveStyle = useStyle(
+    [
+      classes,
+      {
+        marginTop: insets.top,
+        marginBottom: insets.bottom,
+        marginRight: insets.right,
+        marginLeft: insets.left,
+      },
+      style,
+    ],
+    styleName,
+  );
   const resolveTextStyle = useStyle([textClasses, textStyle]);
 
   const contextValue = useMemo(

package/src/components/TextInput.tsx

@@ -1,66 +1,66 @@
-import React, { useState } from 'react';
-import {
-  TextInput as BaseTextInput,
-  TextInputProps as BaseTextInputProps,
-  TextInputFocusEventData,
-  NativeSyntheticEvent,
-} from 'react-native';
-import useMedia from '../hooks/useMedia';
-import useStyle from '../hooks/useStyle';
-import type { ExtendedTextStyle, StyleProp, StyleName } from '../types';
-
-export type TextInputRef = BaseTextInput;
-
-export interface TextInputProps extends Omit<BaseTextInputProps, 'style'> {
-  onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  autoFocus?: boolean;
-  style?: StyleProp<ExtendedTextStyle>;
-  styleName?: StyleName;
-  disabled?: boolean;
-  readOnly?: boolean;
-  // Info: Property is not on BaseTextInputProps yet.
-  rows?: number;
-}
-
-const TextInput = React.forwardRef<TextInputRef, TextInputProps>(
-  (props, ref) => {
-    const {
-      onFocus = () => {},
-      onBlur = () => {},
-      autoFocus = false,
-      style,
-      styleName,
-      ...elementProps
-    } = props;
-
-    const [focused, setFocused] = useState(autoFocus);
-
-    const media = useMedia();
-    const resolveStyle = useStyle(style, styleName);
-
-    return (
-      <BaseTextInput
-        {...elementProps}
-        ref={ref}
-        onFocus={(event) => {
-          setFocused(true);
-          onFocus(event);
-        }}
-        onBlur={(event) => {
-          setFocused(false);
-          onBlur(event);
-        }}
-        autoFocus={autoFocus}
-        style={resolveStyle({
-          media,
-          interaction: { focus: focused, focusVisible: focused },
-        })}
-      />
-    );
-  },
-);
-
-TextInput.displayName = 'TextInput';
-
-export default TextInput;
+import React, { useState } from 'react';
+import {
+  TextInput as BaseTextInput,
+  TextInputProps as BaseTextInputProps,
+  FocusEvent,
+  BlurEvent,
+} from 'react-native';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import type { ExtendedTextStyle, StyleProp, StyleName } from '../types';
+
+export type TextInputRef = BaseTextInput;
+
+export interface TextInputProps extends Omit<BaseTextInputProps, 'style'> {
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: BlurEvent) => void;
+  autoFocus?: boolean;
+  style?: StyleProp<ExtendedTextStyle>;
+  styleName?: StyleName;
+  disabled?: boolean;
+  readOnly?: boolean;
+  // Info: Property is not on BaseTextInputProps yet.
+  rows?: number;
+}
+
+const TextInput = React.forwardRef<TextInputRef, TextInputProps>(
+  (props, ref) => {
+    const {
+      onFocus = () => {},
+      onBlur = () => {},
+      autoFocus = false,
+      style,
+      styleName,
+      ...elementProps
+    } = props;
+
+    const [focused, setFocused] = useState(autoFocus);
+
+    const media = useMedia();
+    const resolveStyle = useStyle(style, styleName);
+
+    return (
+      <BaseTextInput
+        {...elementProps}
+        ref={ref}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus(event);
+        }}
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur(event);
+        }}
+        autoFocus={autoFocus}
+        style={resolveStyle({
+          media,
+          interaction: { focus: focused, focusVisible: focused },
+        })}
+      />
+    );
+  },
+);
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;