https://github.com/lomray-software/react-native-responsive
Helper functions for adaptive layout on react native.
https://github.com/lomray-software/react-native-responsive
adaptive calculations layout react-native
Last synced: 4 months ago
JSON representation
Helper functions for adaptive layout on react native.
- Host: GitHub
- URL: https://github.com/lomray-software/react-native-responsive
- Owner: Lomray-Software
- License: apache-2.0
- Created: 2020-09-10T10:18:42.000Z (almost 6 years ago)
- Default Branch: prod
- Last Pushed: 2024-02-09T01:12:11.000Z (over 2 years ago)
- Last Synced: 2024-11-18T04:42:33.227Z (over 1 year ago)
- Topics: adaptive, calculations, layout, react-native
- Language: TypeScript
- Homepage:
- Size: 390 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Responsive
[](https://sonarcloud.io/summary/new_code?id=react-native-responsive)
[](https://sonarcloud.io/summary/new_code?id=react-native-responsive)
[](https://sonarcloud.io/summary/new_code?id=react-native-responsive)
[](https://sonarcloud.io/summary/new_code?id=react-native-responsive)
[](https://sonarcloud.io/summary/new_code?id=react-native-responsive)
[](https://sonarcloud.io/summary/new_code?id=react-native-responsive)
## Why is this library useful?
For the layout to look the same proportions on any device, we can’t just use pixel values for padding and sizes.
The best way is to convert pixels to screen percentages.
Only in this case will each element of the design look in the same proportions, regardless of how wide or elongated the device’s screen is.
There is also a built-in ability to set styles for different orientations conveniently.
## How it works?
We most often know the dimensions of the device on which the design was made (for example, in Figma).
Therefore, relative to the maximum height and width of the device, we can calculate what percentage of the width or height should be occupied by a specific layout element.
## Installation
npm or yarn
```sh
npm install --save @lomray/react-native-responsive
yarn add @lomray/react-native-responsive
```
## How to use
Initialize ResponsiveManager with your device parameters by design to get helper functions.
```typescript
/**
* src/services/responsive-manager.ts
*/
import { ResponsiveManager } from '@lomray/react-native-responsive';
const { fs, hp, wp } = new ResponsiveManager({ height: 844, width: 390 });
export { fs, hp, wp };
```
| Helper | Description |
|:-------|:-----------------------------------------------------------------------|
| wp | Calculates width value from px to independent pixel (screen percent). |
| hp | Calculates height value from px to independent pixel (screen percent). |
| fs | Works as 'wp', but for the fonts size. |
Each function has the same parameters:
`(value: number, disableRatio = false) => number`.
By default, DIMENSIONS_RATIO is used to reduce the layout for devices with larger screens.
Therefore, we don't need to do the layout based on breakpoints with these helpers.
But we still have the option to disable this for specific layout cases.
More details can be found in `src/constants:getDimensionsRatio.`
### [Demo project](https://github.com/Lomray-Software/react-native-responsive-example)
### 1. Base example (without orientation changing).
#### 1.1. Create styles.
```typescript
import { StyleSheet } from 'react-native';
import { fs, hp, wp } from '@services/responsive-manager';
const styles = StyleSheet.create({
section: {
paddingHorizontal: wp(24),
height: hp(200),
margin: hp(5),
width: wp(380),
},
title: {
fontSize: fs(24),
fontWeight: '600',
},
});
export default styles;
```
#### 1.2. Use created styles in the component.
```typescript jsx
import React, { FC } from 'react';
import { Text, View } from 'react-native';
import styles from './styles';
interface ISection {
title: string;
}
const Section: FC = ({ title }) => (
{title}
);
export default Section;
```
### 2. Advanced example (with orientation changing).
#### 2.1. Use styles as a function to access additional parameters.
```typescript
import { TParams } from '@lomray/react-native-responsive';
import { StyleSheet } from 'react-native';
import { fs, hp, wp } from '@services/responsive-manager';
const styles = ({ orientation }: TParams) => StyleSheet.create({
section: {
paddingHorizontal: wp(24),
height: hp(200),
margin: hp(5),
justifyContent: 'center',
borderWidth: 1,
...(orientation === 'portrait'
? {
backgroundColor: 'white',
borderColor: 'black',
}
: {
backgroundColor: 'black',
borderColor: 'white',
width: wp(220),
}),
},
title: {
fontSize: fs(24),
fontWeight: '600',
color: orientation === 'portrait' ? 'black' : 'white',
},
description: {
marginTop: hp(8),
fontSize: fs(18),
fontWeight: '400',
color: orientation === 'portrait' ? 'black' : 'white',
},
});
export default styles;
```
#### 2.2. Use created styles in the component using the useStyles hook.
```typescript jsx
import { useStyles } from '@lomray/react-native-responsive';
import React, { FC } from 'react';
import { Text, View } from 'react-native';
import stylesheet from './styles';
interface ISection {
title: string;
}
const Section: FC = ({ title }) => {
const styles = useStyles(stylesheet);
return (
{title}
);
};
export default Section;
```
### 3. Additional features.
#### 3.1. Parameters from the component can be passed to the stylesheet.
The parameters will always contain "orientation" and also custom props that you pass by the second argument of the useStyles hook.
```typescript jsx
/**
* index.tsx
*/
import { useStyles } from '@lomray/react-native-responsive';
import React from 'react';
import { View } from 'react-native';
import stylesheet from './styles';
const Component = () => {
const styles = useStyles(stylesheet, { isWhite: true });
return ;
};
export default Component;
```
```typescript jsx
/*
* styles.ts
*/
import { TParams } from '@lomray/react-native-responsive';
import { StyleSheet } from 'react-native';
interface ICustomParams {
isWhite: boolean;
}
const styles = ({ isWhite }: TParams) => StyleSheet.create({
wrapper: {
color: isWhite ? 'white' : 'black',
},
});
export default styles;
```