react-native-bottom-safe-area 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# react-native-bottom-safe-area
+
+A lightweight, zero-native-dependency React Native library that creates a bottom container which automatically adapts to Safe Area insets (iPhone X+ Home Indicator) and Keyboard visibility.
+
+Perfect for "Continue", "Submit", or "Checkout" buttons that need to sit at the bottom of the screen but never get hidden behind the keyboard or system navigation.
+
+## Why this exists?
+
+Even with `react-native-safe-area-context`, handling the keyboard interactions along with safe area insets often leads to:
+- Boilerplate code in every screen.
+- Buttons jumping or getting hidden behind the keyboard.
+- Double padding issues (Safe Area + Keyboard Cushion).
+- Manual calculations for different devices.
+
+This library encapsulates that logic into a single simple component wrapping your button.
+
+## Features
+
+- 🚀 **Auto-handling**: Automatically applies `paddingBottom` based on Safe Area or Keyboard height.
+- ⌨️ **Keyboard Aware**: Smoothly animates padding when keyboard opens/closes.
+- 📱 **Cross Platform**: Works on iOS (Home Indicator) and Android (Navigation Bar).
+- ⚡ **Lightweight**: No native code to link, just pure JS/TS + `react-native-safe-area-context`.
+- 🛡️ **TypeScript**: Fully typed.
+
+## Installation
+
+```sh
+npm install react-native-bottom-safe-area
+# OR
+yarn add react-native-bottom-safe-area
+```
+
+This library requires `react-native-safe-area-context` as a peer dependency. If you haven't installed it yet:
+
+```sh
+npm install react-native-safe-area-context
+cd ios && pod install && cd ..
+```
+
+## Usage
+
+Wrap your functionality (like a Button) with `BottomSafeArea`. It acts as a View that adds dynamic bottom padding.
+
+```tsx
+import React from 'react';
+import { Button, View, Text } from 'react-native';
+import { BottomSafeArea } from 'react-native-bottom-safe-area';
+
+export default function MyScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'space-between' }}>
+      <View style={{ padding: 20 }}>
+        <Text>Some content here...</Text>
+      </View>
+
+      {/* Place this at the bottom of your container */}
+      <BottomSafeArea extraSpacing={10} backgroundColor="white">
+        <Button title="Continue" onPress={() => console.log('Pressed')} />
+      </BottomSafeArea>
+    </View>
+  );
+}
+```
+
+## API
+
+### `<BottomSafeArea />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | **Required** | The content to render (Buttons, Text, etc.). |
+| `extraSpacing` | `number` | `0` | Additional padding (in pixels) to add on top of the calculated safe area/keyboard offset. |
+| `backgroundColor` | `string` | `'transparent'` | Background color of the container view. |
+| `style` | `ViewStyle` | `undefined` | Custom styles for the container view. |
+
+## Android Parsing
+
+On Android, ensure your `android/app/src/main/AndroidManifest.xml` has `windowSoftInputMode="adjustResize"` for best results, although this library attempts to handle padding manually as well.
+
+## License
+
+MIT

package/lib/commonjs/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BottomSafeArea = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+  _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/**
+ * Props for the BottomSafeArea component.
+ */
+
+/**
+ * A component that automatically handles bottom safe area insets and keyboard avoidance.
+ *
+ * It listens to keyboard events and adjusts the bottom padding accordingly,
+ * ensuring that the content (e.g., action buttons) is always visible and clickable,
+ * never hidden behind the keyboard or the home indicator.
+ *
+ * @example
+ * <BottomSafeArea>
+ *   <Button title="Continue" onPress={...} />
+ * </BottomSafeArea>
+ */
+const BottomSafeArea = ({
+  children,
+  extraSpacing = 0,
+  backgroundColor = 'transparent',
+  style
+}) => {
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [bottomPadding, setBottomPadding] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    // Function to handle keyboard showing
+    const onKeyboardShow = e => {
+      // Configure animation for smooth transition
+      _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+
+      // When keyboard shows, we want to pad by the keyboard height
+      // However, on iOS, the keyboard sits on top of the view, so we might need to adjust logic based on where this component is placed.
+      // But typically for a bottom-anchored view, we want to lift it up.
+      // The `e.endCoordinates.height` gives the keyboard height.
+      // We subtract insets.bottom because the keyboard covers the safe area too.
+      // If we are already respecting safe area, we don't want to double count it when keyboard appears.
+
+      const keyboardHeight = e.endCoordinates.height;
+      if (_reactNative.Platform.OS === 'ios') {
+        setBottomPadding(keyboardHeight);
+      } else {
+        setBottomPadding(keyboardHeight);
+      }
+    };
+
+    // Function to handle keyboard hiding
+    const onKeyboardHide = () => {
+      _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+      setBottomPadding(0);
+    };
+
+    // Subscriptions
+    const showSubscription = _reactNative.Keyboard.addListener(_reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', onKeyboardShow);
+    const hideSubscription = _reactNative.Keyboard.addListener(_reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', onKeyboardHide);
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+  const finalBottomPadding = Math.max(bottomPadding, insets.bottom) + extraSpacing;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      paddingBottom: finalBottomPadding,
+      backgroundColor: backgroundColor
+    }, style]
+  }, children);
+};
+exports.BottomSafeArea = BottomSafeArea;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    // Default style: full width, acting as a container at the bottom
+    width: '100%'
+    // We don't enforce absolute positioning here to allow flexibility, 
+    // but often this component is used at the bottom of a flex:1 container.
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSafeAreaContext","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental","BottomSafeArea","children","extraSpacing","backgroundColor","style","insets","useSafeAreaInsets","bottomPadding","setBottomPadding","useState","useEffect","onKeyboardShow","LayoutAnimation","configureNext","Presets","easeInEaseOut","keyboardHeight","endCoordinates","height","onKeyboardHide","showSubscription","Keyboard","addListener","hideSubscription","remove","finalBottomPadding","Math","max","bottom","createElement","View","styles","container","paddingBottom","exports","StyleSheet","create","width"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,2BAAA,GAAAF,OAAA;AAAmE,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEnE,IACIkB,qBAAQ,CAACC,EAAE,KAAK,SAAS,IACzBC,sBAAS,CAACC,qCAAqC,EACjD;EACED,sBAAS,CAACC,qCAAqC,CAAC,IAAI,CAAC;AACzD;;AAEA;AACA;AACA;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAAc,GAAGA,CAAC;EAC3BC,QAAQ;EACRC,YAAY,GAAG,CAAC;EAChBC,eAAe,GAAG,aAAa;EAC/BC;AACiB,CAAC,KAAK;EACvB,MAAMC,MAAM,GAAG,IAAAC,6CAAiB,EAAC,CAAC;EAClC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAErD,IAAAC,gBAAS,EAAC,MAAM;IACZ;IACA,MAAMC,cAAc,GAAIlC,CAAgB,IAAK;MACzC;MACAmC,4BAAe,CAACC,aAAa,CAACD,4BAAe,CAACE,OAAO,CAACC,aAAa,CAAC;;MAEpE;MACA;MACA;MACA;MACA;MACA;;MAEA,MAAMC,cAAc,GAAGvC,CAAC,CAACwC,cAAc,CAACC,MAAM;MAE9C,IAAItB,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;QACvBW,gBAAgB,CAACQ,cAAc,CAAC;MACpC,CAAC,MAAM;QACHR,gBAAgB,CAACQ,cAAc,CAAC;MACpC;IACJ,CAAC;;IAED;IACA,MAAMG,cAAc,GAAGA,CAAA,KAAM;MACzBP,4BAAe,CAACC,aAAa,CAACD,4BAAe,CAACE,OAAO,CAACC,aAAa,CAAC;MACpEP,gBAAgB,CAAC,CAAC,CAAC;IACvB,CAAC;;IAED;IACA,MAAMY,gBAAgB,GAAGC,qBAAQ,CAACC,WAAW,CACzC1B,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAG,kBAAkB,GAAG,iBAAiB,EAC9Dc,cACJ,CAAC;IACD,MAAMY,gBAAgB,GAAGF,qBAAQ,CAACC,WAAW,CACzC1B,qBAAQ,CAACC,EAAE,KAAK,KAAK,GAAG,kBAAkB,GAAG,iBAAiB,EAC9DsB,cACJ,CAAC;IAED,OAAO,MAAM;MACTC,gBAAgB,CAACI,MAAM,CAAC,CAAC;MACzBD,gBAAgB,CAACC,MAAM,CAAC,CAAC;IAC7B,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGC,IAAI,CAACC,GAAG,CAACpB,aAAa,EAAEF,MAAM,CAACuB,MAAM,CAAC,GAAG1B,YAAY;EAEhF,oBACI9B,MAAA,CAAAe,OAAA,CAAA0C,aAAA,CAACtD,YAAA,CAAAuD,IAAI;IACD1B,KAAK,EAAE,CACH2B,MAAM,CAACC,SAAS,EAChB;MACIC,aAAa,EAAER,kBAAkB;MACjCtB,eAAe,EAAEA;IACrB,CAAC,EACDC,KAAK;EACP,GAEDH,QACC,CAAC;AAEf,CAAC;AAACiC,OAAA,CAAAlC,cAAA,GAAAA,cAAA;AAEF,MAAM+B,MAAM,GAAGI,uBAAU,CAACC,MAAM,CAAC;EAC7BJ,SAAS,EAAE;IACP;IACAK,KAAK,EAAE;IACP;IACA;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, Keyboard, Platform, LayoutAnimation, UIManager } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/**
+ * Props for the BottomSafeArea component.
+ */
+
+/**
+ * A component that automatically handles bottom safe area insets and keyboard avoidance.
+ *
+ * It listens to keyboard events and adjusts the bottom padding accordingly,
+ * ensuring that the content (e.g., action buttons) is always visible and clickable,
+ * never hidden behind the keyboard or the home indicator.
+ *
+ * @example
+ * <BottomSafeArea>
+ *   <Button title="Continue" onPress={...} />
+ * </BottomSafeArea>
+ */
+export const BottomSafeArea = ({
+  children,
+  extraSpacing = 0,
+  backgroundColor = 'transparent',
+  style
+}) => {
+  const insets = useSafeAreaInsets();
+  const [bottomPadding, setBottomPadding] = useState(0);
+  useEffect(() => {
+    // Function to handle keyboard showing
+    const onKeyboardShow = e => {
+      // Configure animation for smooth transition
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+
+      // When keyboard shows, we want to pad by the keyboard height
+      // However, on iOS, the keyboard sits on top of the view, so we might need to adjust logic based on where this component is placed.
+      // But typically for a bottom-anchored view, we want to lift it up.
+      // The `e.endCoordinates.height` gives the keyboard height.
+      // We subtract insets.bottom because the keyboard covers the safe area too.
+      // If we are already respecting safe area, we don't want to double count it when keyboard appears.
+
+      const keyboardHeight = e.endCoordinates.height;
+      if (Platform.OS === 'ios') {
+        setBottomPadding(keyboardHeight);
+      } else {
+        setBottomPadding(keyboardHeight);
+      }
+    };
+
+    // Function to handle keyboard hiding
+    const onKeyboardHide = () => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setBottomPadding(0);
+    };
+
+    // Subscriptions
+    const showSubscription = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', onKeyboardShow);
+    const hideSubscription = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', onKeyboardHide);
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+  const finalBottomPadding = Math.max(bottomPadding, insets.bottom) + extraSpacing;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      paddingBottom: finalBottomPadding,
+      backgroundColor: backgroundColor
+    }, style]
+  }, children);
+};
+const styles = StyleSheet.create({
+  container: {
+    // Default style: full width, acting as a container at the bottom
+    width: '100%'
+    // We don't enforce absolute positioning here to allow flexibility, 
+    // but often this component is used at the bottom of a flex:1 container.
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","View","StyleSheet","Keyboard","Platform","LayoutAnimation","UIManager","useSafeAreaInsets","OS","setLayoutAnimationEnabledExperimental","BottomSafeArea","children","extraSpacing","backgroundColor","style","insets","bottomPadding","setBottomPadding","onKeyboardShow","e","configureNext","Presets","easeInEaseOut","keyboardHeight","endCoordinates","height","onKeyboardHide","showSubscription","addListener","hideSubscription","remove","finalBottomPadding","Math","max","bottom","createElement","styles","container","paddingBottom","create","width"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAmB,OAAO;AAC7D,SACIC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EAGfC,SAAS,QACN,cAAc;AACrB,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE,IACIH,QAAQ,CAACI,EAAE,KAAK,SAAS,IACzBF,SAAS,CAACG,qCAAqC,EACjD;EACEH,SAAS,CAACG,qCAAqC,CAAC,IAAI,CAAC;AACzD;;AAEA;AACA;AACA;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC3BC,QAAQ;EACRC,YAAY,GAAG,CAAC;EAChBC,eAAe,GAAG,aAAa;EAC/BC;AACiB,CAAC,KAAK;EACvB,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,MAAM,CAACS,aAAa,EAAEC,gBAAgB,CAAC,GAAGjB,QAAQ,CAAC,CAAC,CAAC;EAErDD,SAAS,CAAC,MAAM;IACZ;IACA,MAAMmB,cAAc,GAAIC,CAAgB,IAAK;MACzC;MACAd,eAAe,CAACe,aAAa,CAACf,eAAe,CAACgB,OAAO,CAACC,aAAa,CAAC;;MAEpE;MACA;MACA;MACA;MACA;MACA;;MAEA,MAAMC,cAAc,GAAGJ,CAAC,CAACK,cAAc,CAACC,MAAM;MAE9C,IAAIrB,QAAQ,CAACI,EAAE,KAAK,KAAK,EAAE;QACvBS,gBAAgB,CAACM,cAAc,CAAC;MACpC,CAAC,MAAM;QACHN,gBAAgB,CAACM,cAAc,CAAC;MACpC;IACJ,CAAC;;IAED;IACA,MAAMG,cAAc,GAAGA,CAAA,KAAM;MACzBrB,eAAe,CAACe,aAAa,CAACf,eAAe,CAACgB,OAAO,CAACC,aAAa,CAAC;MACpEL,gBAAgB,CAAC,CAAC,CAAC;IACvB,CAAC;;IAED;IACA,MAAMU,gBAAgB,GAAGxB,QAAQ,CAACyB,WAAW,CACzCxB,QAAQ,CAACI,EAAE,KAAK,KAAK,GAAG,kBAAkB,GAAG,iBAAiB,EAC9DU,cACJ,CAAC;IACD,MAAMW,gBAAgB,GAAG1B,QAAQ,CAACyB,WAAW,CACzCxB,QAAQ,CAACI,EAAE,KAAK,KAAK,GAAG,kBAAkB,GAAG,iBAAiB,EAC9DkB,cACJ,CAAC;IAED,OAAO,MAAM;MACTC,gBAAgB,CAACG,MAAM,CAAC,CAAC;MACzBD,gBAAgB,CAACC,MAAM,CAAC,CAAC;IAC7B,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGC,IAAI,CAACC,GAAG,CAACjB,aAAa,EAAED,MAAM,CAACmB,MAAM,CAAC,GAAGtB,YAAY;EAEhF,oBACId,KAAA,CAAAqC,aAAA,CAAClC,IAAI;IACDa,KAAK,EAAE,CACHsB,MAAM,CAACC,SAAS,EAChB;MACIC,aAAa,EAAEP,kBAAkB;MACjClB,eAAe,EAAEA;IACrB,CAAC,EACDC,KAAK;EACP,GAEDH,QACC,CAAC;AAEf,CAAC;AAED,MAAMyB,MAAM,GAAGlC,UAAU,CAACqC,MAAM,CAAC;EAC7BF,SAAS,EAAE;IACP;IACAG,KAAK,EAAE;IACP;IACA;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/index.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+/**
+ * Props for the BottomSafeArea component.
+ */
+export interface BottomSafeAreaProps {
+    /**
+     * The content to render inside the safe area container.
+     * Typically a button or a row of buttons.
+     */
+    children: ReactNode;
+    /**
+     * Additional spacing (padding) to add to the bottom, in pixels.
+     * Useful if you want more space than just the safe area/keyboard height.
+     * Defaults to 0.
+     */
+    extraSpacing?: number;
+    /**
+     * Background color of the safe area container.
+     * Defaults to 'transparent'.
+     */
+    backgroundColor?: string;
+    /**
+     * Optional custom style for the container.
+     */
+    style?: ViewStyle;
+}
+/**
+ * A component that automatically handles bottom safe area insets and keyboard avoidance.
+ *
+ * It listens to keyboard events and adjusts the bottom padding accordingly,
+ * ensuring that the content (e.g., action buttons) is always visible and clickable,
+ * never hidden behind the keyboard or the home indicator.
+ *
+ * @example
+ * <BottomSafeArea>
+ *   <Button title="Continue" onPress={...} />
+ * </BottomSafeArea>
+ */
+export declare const BottomSafeArea: ({ children, extraSpacing, backgroundColor, style, }: BottomSafeAreaProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAMH,SAAS,EAGZ,MAAM,cAAc,CAAC;AAUtB;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GAAI,qDAK5B,mBAAmB,sBAgErB,CAAC"}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "react-native-bottom-safe-area",
+  "version": "1.0.0",
+  "description": "A reusable BottomSafeArea component that handles safe area insets and keyboard avoidance automatically.",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "build": "bob build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "safe-area",
+    "keyboard",
+    "bottom-sheet",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/user/react-native-bottom-safe-area.git"
+  },
+  "author": "Sakshi Bheda <sakshibheda@example.com> (https://github.com/sakshibheda)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/user/react-native-bottom-safe-area/issues"
+  },
+  "homepage": "https://github.com/user/react-native-bottom-safe-area#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@react-native/eslint-config": "^0.73.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "eslint": "^8.51.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "^0.73.4",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-safe-area-context": "^4.9.0",
+    "release-it": "^17.0.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-safe-area-context": "*"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.json"
+        }
+      ]
+    ]
+  }
+}

package/src/index.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState, ReactNode } from 'react';
+import {
+    View,
+    StyleSheet,
+    Keyboard,
+    Platform,
+    LayoutAnimation,
+    ViewStyle,
+    KeyboardEvent,
+    UIManager,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+if (
+    Platform.OS === 'android' &&
+    UIManager.setLayoutAnimationEnabledExperimental
+) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/**
+ * Props for the BottomSafeArea component.
+ */
+export interface BottomSafeAreaProps {
+    /**
+     * The content to render inside the safe area container.
+     * Typically a button or a row of buttons.
+     */
+    children: ReactNode;
+
+    /**
+     * Additional spacing (padding) to add to the bottom, in pixels.
+     * Useful if you want more space than just the safe area/keyboard height.
+     * Defaults to 0.
+     */
+    extraSpacing?: number;
+
+    /**
+     * Background color of the safe area container.
+     * Defaults to 'transparent'.
+     */
+    backgroundColor?: string;
+
+    /**
+     * Optional custom style for the container.
+     */
+    style?: ViewStyle;
+}
+
+/**
+ * A component that automatically handles bottom safe area insets and keyboard avoidance.
+ *
+ * It listens to keyboard events and adjusts the bottom padding accordingly,
+ * ensuring that the content (e.g., action buttons) is always visible and clickable,
+ * never hidden behind the keyboard or the home indicator.
+ *
+ * @example
+ * <BottomSafeArea>
+ *   <Button title="Continue" onPress={...} />
+ * </BottomSafeArea>
+ */
+export const BottomSafeArea = ({
+    children,
+    extraSpacing = 0,
+    backgroundColor = 'transparent',
+    style,
+}: BottomSafeAreaProps) => {
+    const insets = useSafeAreaInsets();
+    const [bottomPadding, setBottomPadding] = useState(0);
+
+    useEffect(() => {
+        // Function to handle keyboard showing
+        const onKeyboardShow = (e: KeyboardEvent) => {
+            // Configure animation for smooth transition
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+
+            // When keyboard shows, we want to pad by the keyboard height
+            // However, on iOS, the keyboard sits on top of the view, so we might need to adjust logic based on where this component is placed.
+            // But typically for a bottom-anchored view, we want to lift it up.
+            // The `e.endCoordinates.height` gives the keyboard height.
+            // We subtract insets.bottom because the keyboard covers the safe area too.
+            // If we are already respecting safe area, we don't want to double count it when keyboard appears.
+
+            const keyboardHeight = e.endCoordinates.height;
+
+            if (Platform.OS === 'ios') {
+                setBottomPadding(keyboardHeight);
+            } else {
+                setBottomPadding(keyboardHeight);
+            }
+        };
+
+        // Function to handle keyboard hiding
+        const onKeyboardHide = () => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+            setBottomPadding(0);
+        };
+
+        // Subscriptions
+        const showSubscription = Keyboard.addListener(
+            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+            onKeyboardShow
+        );
+        const hideSubscription = Keyboard.addListener(
+            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+            onKeyboardHide
+        );
+
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, []);
+
+    const finalBottomPadding = Math.max(bottomPadding, insets.bottom) + extraSpacing;
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    paddingBottom: finalBottomPadding,
+                    backgroundColor: backgroundColor,
+                },
+                style,
+            ]}
+        >
+            {children}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        // Default style: full width, acting as a container at the bottom
+        width: '100%',
+        // We don't enforce absolute positioning here to allow flexibility, 
+        // but often this component is used at the bottom of a flex:1 container.
+    },
+});