react-native-adapt-screen
v1.0.18
Published
The index.js file provides utility functions for implementing responsive design in React Native applications. Leveraging the Dimensions and PixelRatio modules from react-native, it offers functions such as SizeShouldBe, WidthShouldBe, and HeightShouldBe t
Downloads
139
Maintainers
Readme
Welcome to react-native-adapt-screen 👋
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()
andHeightShouldBe()
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!