Skip to content

Commit

Permalink
docs: rename react-native-responsive-design
Browse files Browse the repository at this point in the history
  • Loading branch information
kdn0325 committed Mar 15, 2024
1 parent 3580fcb commit 1a31c9b
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 13 deletions.
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# react-native-dimensions-util
# react-native-responsive-design

react-native-dimensions-util
react-native-responsive-design

- As a React Native developer, we need to determine the size of components with different display sizes for each device using the app
- Usually, when collaborating using Figma, calculating is annoying and there is a possibility of making mistakes. Even if it is modularized, it can be inaccurate sometimes. It is also difficult to cope with foldable phones or horizontal modes. And some components don't work with percentage
Expand All @@ -9,9 +9,9 @@ react-native-dimensions-util
## Installation

```sh
npm install react-native-dimensions-util
npm install react-native-responsive-design
# or
yarn add react-native-dimensions-util
yarn add react-native-responsive-design
```

## Usage
Expand All @@ -21,7 +21,7 @@ yarn add react-native-dimensions-util
Calculates the percentage value of the width relative to the screen width.

```javascript
import { widthPercentage } from 'react-native-dimensions-util';
import { widthPercentage } from 'react-native-responsive-design';

const screenWidth = 200; // Current screen width
const widthInPercentage = widthPercentage(screenWidth);
Expand All @@ -37,7 +37,7 @@ Calculates the percentage value of the height relative to the screen height.
Calculates the percentage value of the height relative to the screen height.

```javascript
import { heightPercentage } from 'react-native-dimensions-util';
import { heightPercentage } from 'react-native-responsive-design';
const screenHeight = 400; // Current screen height
const heightInPercentage = heightPercentage(screenHeight);
Expand All @@ -49,7 +49,7 @@ console.log(heightInPercentage); // Percentage value of the screen height
Calculates the percentage value of the font size

```javascript
import { fontPercentage } from 'react-native-dimensions-util';
import { fontPercentage } from 'react-native-responsive-design';
const fontSize = 20; // Font size
const fontSizeInPercentage = fontPercentage(fontSize);
Expand All @@ -61,7 +61,7 @@ console.log(fontSizeInPercentage); // Percentage value of the font size
Scales the value provided based on the horizontal size of the screen.

```javascript
import { fontPercentage } from 'react-native-dimensions-util';
import { fontPercentage } from 'react-native-responsive-design';
const fontSize = 20; // Font size
const fontSizeInPercentage = fontPercentage(fontSize);
Expand All @@ -72,7 +72,7 @@ console.log(fontSizeInPercentage); // Percentage value of the font size
Scales the value provided based on the horizontal size of the screen.

```javascript
import { horizontalScale, verticalScale } from 'react-native-dimensions-util';
import { horizontalScale, verticalScale } from 'react-native-responsive-design';
const widthValue = 100; // Value to scale horizontally
const heightValue = 100; // Value to scale vertically
Expand Down
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "react-native-dimensions-util-example",
"name": "react-native-responsive-design-example",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
fontSizeScale,
horizontalScale,
verticalScale,
} from 'react-native-dimensions-util';
} from 'react-native-responsive-design';
import { heightPercentage, widthPercentage } from './util/responsiveSize';

export default function App() {
Expand Down
2 changes: 1 addition & 1 deletion example/src/util/responsiveSize.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
fontSizeScale,
percentBaseHeight,
percentBaseWidth,
} from 'react-native-dimensions-util';
} from 'react-native-responsive-design';

// Screen size defined in your Figma design
const FIGMA_WINDOW_WIDTH = 375;
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"compilerOptions": {
"rootDir": ".",
"paths": {
"react-native-dimensions-util": ["./src/index"]
"react-native-responsive-design": ["./src/index"]
},
"allowUnreachableCode": false,
"allowUnusedLabels": false,
Expand Down

0 comments on commit 1a31c9b

Please sign in to comment.