react-native-smart-layout 📱

Adaptive, measurement-aware layout utilities for React Native. Build responsive, orientation-aware, and keyboard-friendly UIs with ease.

Installation

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

import { useResponsiveScale } from 'react-native-smart-layout';

const MyComponent = () => {
  const rs = useResponsiveScale();
  
  return (
    <View style={{ width: rs(100), height: rs(50) }} />
  );
};

Orientation Detection

import { useOrientation } from 'react-native-smart-layout';

const MyComponent = () => {
  const isLandscape = useOrientation();
  
  return (
    <View style={{ flexDirection: isLandscape ? 'row' : 'column' }}>
       {/* content */}
    </View>
  );
};

Keyboard Offset

import { useKeyboardOffset } from 'react-native-smart-layout';

const MyComponent = () => {
  const offset = useKeyboardOffset();
  
  return (
    <View style={{ paddingBottom: offset }}>
      <TextInput placeholder="Type here..." />
    </View>
  );
};

Element Measurement

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