react-native-responsive-scalability

KO | EN

gitlite — search

#javascript #ai #golang #android #machine-learning #deep-learning #docker #nodejs #awesome #vue #mcp #ios #openai #open-source

react-native-responsive-scalability

(★ 9)

The package provides utility hooks that help React Native developers create responsive, cross-platform applications that are aware of orientation changes.

react-native-responsive-scalability 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <a name="title"></a>
  <h3 align="center">React Native Responsive Scalability</h3>
  
  <p align="center">
    The package provides utility hooks that help React Native developers create responsive, cross-platform applications that are aware of orientation changes.
    <br />
    <br />
    <a href="https://github.com/chsdwn/react-native-responsive-scalability/issues">Report Bug</a>
    ·
    <a href="https://github.com/chsdwn/react-native-responsive-scalability/issues">Request Feature</a>
  </p>
</div>

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li><a href="#about-the-project">About The Project</a></li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#peer-dependencies">Peer Dependencies</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li>
      <a href="#api">API</a>
      <ul>
        <li><a href="#responsivescalabilityprovider">ResponsiveScalabilityProvider</li>
        <li><a href="#useorientation">useOrientation</li>
        <li><a href="#useresponsivescalability">useResponsiveScalability</li>
        <li><a href="#usesafeareawindow">useSafeAreaWindow</li>
        <li><a href="#usescale">useScale</li>
        <li><a href="#usestyle">useStyle</li>
      </ul>
    </li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>

## About the Project

<p align="center">Take a look at the images below and compare scaled and not scaled screenshots on both iOS and Android devices for landscape and portrait modes.</p>

### Portrait

![React Native Responsive Scalability Portrait Overview](https://raw.githubusercontent.com/chsdwn/react-native-responsive-scalability/main/screenshots/overview.jpg 'React Native Responsive Scalability Portrait Overview')

### Landscape

![React Native Responsive Scalability Landscape Overview](https://raw.githubusercontent.com/chsdwn/react-native-responsive-scalability/main/screenshots/overview%20landscape.jpg 'React Native Responsive Scalability Landscape Overview')

## Getting Started

### Peer Dependencies

#### `react-native-safe-area-context`

##### React Native CLI

```sh
npm install react-native-safe-area-context
```

```sh
yarn add react-native-safe-area-context
```

- (MacOS only) Install Cocoa packages

```sh
  npx pod-install
  ```

##### Expo

```sh
npx expo install react-native-safe-area-context
```

Add `<SafeAreaProvider>` in your app root component.

```tsx
import { SafeAreaProvider } from 'react-native-safe-area-context';

export const App = () => {
  return <SafeAreaProvider>...</SafeAreaProvider>;
};
```

### Installation

```sh
npm install react-native-responsive-scalability
```

```sh
yarn add react-native-responsive-scalability
```

- Add following rules to your eslint config file:

```json
{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "error",
      {
        "additionalHooks": "(useStyle)"
      }
    ]
  }
}
```

## Usage

For usage details, please refer to the `src` folder of the example app. https://github.com/chsdwn/react-native-responsive-scalability/tree/main/example/src

For interactive demo: https://snack.expo.dev/@chsdwn/responsive-scalability-example

For a more complex example, please take a look at my demo project. https://github.com/chsdwn/FreeToGameApp

## API

### ResponsiveScalabilityProvider

You should to add `ResponsiveScalabilityProvider` in your app root component.

#### Props

`config`: Define your base device's dimensions, orientation, and breakpoints.

| Prop            | Type     |                                              Default |
| --------------- | -------- | ---------------------------------------------------: |
| baseHeight      | `number` |                                                `430` |
| baseWidth       | `number` |                                                `932` |
| baseOrientation | `string` |                                         `'portrait'` |
| breakpoints     | `object` | `{ sm: 640, md: 940, lg: undefined, xl: undefined }` |

#### Example

```tsx
import React from 'React';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  IResponsiveScalabilityConfig,
  ResponsiveScalabilityProvider,
} from 'react-native-responsive-scalability';

const config: IResponsiveScalabilityConfig = {
  // # Default device: iPhone 14 Pro Max.
  // baseWidth: 430,
  // baseHeight: 932,

// # "landscape" option can be selected. Default base orientation is "portrait".
  // baseOrientation: 'portrait',

breakpoints: {
    // # Default breakpoints
    // sm: 640,
    // md: 940,
    lg: 1280,
    xl: 1536,
  },
};

export const App = () => {
  return (
    <SafeAreaProvider>
      <ResponsiveScalabilityProvider config={config}>
        ...
      </ResponsiveScalabilityProvider>
    </SafeAreaProvider>
  );
};
```

### useOrientation

Use `useOrientation` hook to retrieve current orientation of the device.

#### Example

```tsx
import React from 'react';
import { useOrientation } from 'react-native-responsive-scalability';

export const Home = () => {
  const orientation = useOrientation();
  const isPortrait = orientation === 'portrait';

return <></>;
};
```

### useResponsiveScalability

Use `useResponsiveScalability` hook to retrieve `baseHeight`, `baseWidth`, `baseOrientation`, and `breakpoints` values.

#### Example

```tsx
import React from 'react';
import { FlatList } from 'react-native';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { useResponsiveScalability } from 'react-native-responsive-scalability';

export const Home = () => {
  const { width } = useSafeAreaFrame();
  const { baseHeight, baseWidth, baseOrientation, breakpoints } =
    useResponsiveScalability();

let numColumns = 1;
  if (width >= breakpoints.sm) numColumns = 2;

return (
    <FlatList
      key={`flatlist-column-${numColumns}`}
      numColumns={numColumns}
      ...
    />
  );
};
```

### useSafeAreaWindow

The `useSafeAreaWindow` hook provides the device's window dimensions, including `height` and `width`. These values are calculated by subtracting the height of the status bar and the height of the bottom navigation bar, depending on the current orientation of the device.

#### Example

```tsx
import React from 'react';
import { useSafeAreaWindow } from 'react-native-responsive-scalability';

export const Home = () => {
  const { height, width } = useSafeAreaWindow();

return <></>;
};
```

### useScale

The `useScale` hook returns scale utility functions `scaleByHeight` and `scaleByWidth`. The `scaleByHeight` function is NOT aware of orientation changes; it calculates window height based on the `baseOrientation` value and uses it for calculating scale changes.

#### Example

```ts
import React from 'react';
import { useScale } from 'react-native-responsive-scalability';

const size = 16;

export const Home = () => {
  const { scaleByHeight, scaleByWidth } = useScale();

console.log(`scaleByHeight(${size}) =`, scaleByHeight(size));
  console.log(`scaleByWidth(${size}) =`, scaleByWidth(size));

return <></>;
};
```

- On a iPhone 14 Pro Max device/simulator with default config values.

`Portrait Mode`

```
  scaleByHeight(16) = 16
  scaleByWidth(16) = 16
  ```

`Landscape Mode`

```
  scaleByHeight(16) = 16
  scaleByWidth(16) = 17.333333333333332
  ```

### useStyle

Use `useStyle` hook to memoize inline styles.

#### Example

```tsx
import React from 'react';
import { StyleSheet, Text as RNText } from 'react-native';
import { useScale, useStyle } from 'react-native-responsive-scalability';

export const Text = () => {
  const { scaleByWidth } = useScale();

return (
    <RNText
      style={useStyle(
        () => [styles.text, { fontSize: scaleByWidth(16) }],
        [scaleByWidth],
      )}
    >
      React Native Responsive Scalability
    </RNText>
  );
};

const styles = StyleSheet.create({
  text: { color: 'red' },
});
```

## Contributing

See the [contributing guide](https://github.com/chsdwn/react-native-responsive-scalability/blob/main/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

Distributed under the MIT License. See [`LICENSE`](https://github.com/chsdwn/react-native-responsive-scalability/blob/main/LICENSE) for more information.

## Acknowledgments

- Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

react-native-responsive-scalability

react-native-responsive-scalability 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-responsive-scalability

react-native-responsive-scalability 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README