react-native-adapt-screen

Welcome to react-native-adapt-screen

Achieve pixel-perfect UI dimensions and font sizes in your React Native app effortlessly with React Native Adapt Screen. Say goodbye to manual tweaking and ensure your app's UI matches your Figma or Adobe XD designs seamlessly.

Features

• Pixel-Perfect UI Dimensions: Utilize WidthShouldBe() and HeightShouldBe() functions to set exact dimensions based on your design files.
• Precise Font Sizing: Set font sizes using SizeShouldBe() for optimal readability and aesthetics.
• Seamless Integration: Easily integrate with your existing React Native projects.
• Time-Saving: Eliminate the need for manual adjustments, saving valuable development time.

Version 1.0.18

• Added Full Width and Full Height props - Now you can easily create full screen

Installation

Install React Native Adapt Screen via npm:

npm install react-native-adapt-screen

Usage

Import the necessary functions from React Native Adapt Screen:

import {
  WidthShouldBe,
  HeightShouldBe,
  SizeShouldBe,
  FullWidth,
  FullHeight,
} from "react-native-adapt-screen";

Use these functions with exact size integers from your Figma or Adobe XD designs:

<View style={{ width: FullWidth(), height: FullHeight() }}>
  <View style={{ width: WidthShouldBe(100), height: HeightShouldBe(200) }}>
    <Text style={{ fontSize: SizeShouldBe(18) }}>
      Hello, React Native Adapt Screen!
    </Text>
  </View>
</View>

Author

Harsh Sharma

• Github: @hs19991215
• LinkedIn: @hs19991215

Give a ️ if this project helped you!