react-native-smart-layout 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yashvi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# react-native-smart-layout 📱
+
+Adaptive, measurement-aware layout utilities for React Native. Build responsive, orientation-aware, and keyboard-friendly UIs with ease.
+
+## Installation
+
+```bash
+npm install react-native-smart-layout
+# or
+yarn add react-native-smart-layout
+```
+
+## Features
+
+- 📏 **Responsive Scaling**: Scale sizes automatically based on screen dimensions.
+- 🔄 **Orientation Detection**: Real-time landscape/portrait state.
+- ⌨️ **Keyboard Avoidance**: Simple hook to get keyboard height/offset.
+- 📐 **Easy Measurement**: Simplified `onLayout` handling for elements.
+
+## Usage
+
+### Responsive Scaling
+
+```tsx
+import { useResponsiveScale } from 'react-native-smart-layout';
+
+const MyComponent = () => {
+  const rs = useResponsiveScale();
+  
+  return (
+    <View style={{ width: rs(100), height: rs(50) }} />
+  );
+};
+```
+
+### Orientation Detection
+
+```tsx
+import { useOrientation } from 'react-native-smart-layout';
+
+const MyComponent = () => {
+  const isLandscape = useOrientation();
+  
+  return (
+    <View style={{ flexDirection: isLandscape ? 'row' : 'column' }}>
+       {/* content */}
+    </View>
+  );
+};
+```
+
+### Keyboard Offset
+
+```tsx
+import { useKeyboardOffset } from 'react-native-smart-layout';
+
+const MyComponent = () => {
+  const offset = useKeyboardOffset();
+  
+  return (
+    <View style={{ paddingBottom: offset }}>
+      <TextInput placeholder="Type here..." />
+    </View>
+  );
+};
+```
+
+### Element Measurement
+
+```tsx
+import { useMeasure } from 'react-native-smart-layout';
+
+const MyComponent = () => {
+  const { width, height, onLayout } = useMeasure();
+  
+  return (
+    <View onLayout={onLayout}>
+      <Text>Width: {width}</Text>
+    </View>
+  );
+};
+```
+
+## License
+
+MIT

package/dist/hooks/useKeyboardOffset.d.ts

@@ -0,0 +1 @@
+export declare const useKeyboardOffset: () => number;

package/dist/hooks/useKeyboardOffset.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+export const useKeyboardOffset = () => {
+    const [offset, setOffset] = useState(0);
+    useEffect(() => {
+        const show = Keyboard.addListener("keyboardDidShow", (e) => setOffset(e.endCoordinates.height));
+        const hide = Keyboard.addListener("keyboardDidHide", () => setOffset(0));
+        return () => {
+            show.remove();
+            hide.remove();
+        };
+    }, []);
+    return offset;
+};

package/dist/hooks/useMeasure.d.ts

@@ -0,0 +1,6 @@
+import { LayoutChangeEvent } from "react-native";
+export declare const useMeasure: () => {
+    onLayout: (event: LayoutChangeEvent) => void;
+    width: number;
+    height: number;
+};

package/dist/hooks/useMeasure.js

@@ -0,0 +1,12 @@
+import { useState, useCallback } from "react";
+export const useMeasure = () => {
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
+    const onLayout = useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setLayout({ width, height });
+    }, []);
+    return {
+        ...layout,
+        onLayout,
+    };
+};

package/dist/hooks/useOrientation.d.ts

@@ -0,0 +1 @@
+export declare const useOrientation: () => boolean;

package/dist/hooks/useOrientation.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+import { Dimensions } from "react-native";
+export const useOrientation = () => {
+    const getValue = () => {
+        const { width, height } = Dimensions.get("window");
+        return width > height;
+    };
+    const [isLandscape, setIsLandscape] = useState(getValue());
+    useEffect(() => {
+        const sub = Dimensions.addEventListener("change", () => {
+            setIsLandscape(getValue());
+        });
+        return () => sub.remove();
+    }, []);
+    return isLandscape;
+};

package/dist/hooks/useResponsiveScale.d.ts

@@ -0,0 +1 @@
+export declare const useResponsiveScale: () => (size: number) => number;

package/dist/hooks/useResponsiveScale.js

@@ -0,0 +1,6 @@
+import { Dimensions } from "react-native";
+const { width } = Dimensions.get("window");
+const BASE_WIDTH = 375;
+export const useResponsiveScale = () => {
+    return (size) => (width / BASE_WIDTH) * size;
+};

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Hook to create a responsive scaling function.
+ * The scaling function takes a size and returns a value relative to the base screen width (375).
+ */
+export { useResponsiveScale } from "./hooks/useResponsiveScale";
+/**
+ * Hook to detect screen orientation.
+ * Returns true if landscape, false if portrait.
+ */
+export { useOrientation } from "./hooks/useOrientation";
+/**
+ * Hook to get the current keyboard height/offset.
+ * Useful for keyboard-avoiding views.
+ */
+export { useKeyboardOffset } from "./hooks/useKeyboardOffset";
+/**
+ * Hook to measure the dimensions and position of a component.
+ */
+export { useMeasure } from "./hooks/useMeasure";

package/dist/index.js

@@ -0,0 +1,19 @@
+/**
+ * Hook to create a responsive scaling function.
+ * The scaling function takes a size and returns a value relative to the base screen width (375).
+ */
+export { useResponsiveScale } from "./hooks/useResponsiveScale";
+/**
+ * Hook to detect screen orientation.
+ * Returns true if landscape, false if portrait.
+ */
+export { useOrientation } from "./hooks/useOrientation";
+/**
+ * Hook to get the current keyboard height/offset.
+ * Useful for keyboard-avoiding views.
+ */
+export { useKeyboardOffset } from "./hooks/useKeyboardOffset";
+/**
+ * Hook to measure the dimensions and position of a component.
+ */
+export { useMeasure } from "./hooks/useMeasure";

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-native-smart-layout",
+  "version": "1.0.0",
+  "description": "Adaptive, measurement-aware layout utilities for React Native with support for responsive scaling and keyboard avoidance.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.72.8",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react-native",
+    "layout",
+    "responsive",
+    "keyboard",
+    "orientation",
+    "hooks",
+    "adaptive-ui"
+  ],
+  "author": "Yashvi",
+  "license": "MIT"
+}

package/src/hooks/useKeyboardOffset.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+
+export const useKeyboardOffset = () => {
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    const show = Keyboard.addListener("keyboardDidShow", (e) =>
+      setOffset(e.endCoordinates.height),
+    );
+
+    const hide = Keyboard.addListener("keyboardDidHide", () => setOffset(0));
+
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  return offset;
+};

package/src/hooks/useMeasure.ts

@@ -0,0 +1,16 @@
+import { useState, useCallback } from "react";
+import { LayoutChangeEvent } from "react-native";
+
+export const useMeasure = () => {
+  const [layout, setLayout] = useState({ width: 0, height: 0 });
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setLayout({ width, height });
+  }, []);
+
+  return {
+    ...layout,
+    onLayout,
+  };
+};

package/src/hooks/useOrientation.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { Dimensions } from "react-native";
+
+export const useOrientation = () => {
+  const getValue = () => {
+    const { width, height } = Dimensions.get("window");
+    return width > height;
+  };
+
+  const [isLandscape, setIsLandscape] = useState(getValue());
+
+  useEffect(() => {
+    const sub = Dimensions.addEventListener("change", () => {
+      setIsLandscape(getValue());
+    });
+
+    return () => sub.remove();
+  }, []);
+
+  return isLandscape;
+};

package/src/hooks/useResponsiveScale.ts

@@ -0,0 +1,8 @@
+import { Dimensions } from "react-native";
+
+const { width } = Dimensions.get("window");
+const BASE_WIDTH = 375;
+
+export const useResponsiveScale = () => {
+  return (size: number) => (width / BASE_WIDTH) * size;
+};

package/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Hook to create a responsive scaling function.
+ * The scaling function takes a size and returns a value relative to the base screen width (375).
+ */
+export { useResponsiveScale } from "./hooks/useResponsiveScale";
+/**
+ * Hook to detect screen orientation.
+ * Returns true if landscape, false if portrait.
+ */
+export { useOrientation } from "./hooks/useOrientation";
+/**
+ * Hook to get the current keyboard height/offset.
+ * Useful for keyboard-avoiding views.
+ */
+export { useKeyboardOffset } from "./hooks/useKeyboardOffset";
+/**
+ * Hook to measure the dimensions and position of a component.
+ */
+export { useMeasure } from "./hooks/useMeasure";