https://github.com/newbiebr/react-native-normalize

Small and simple package that helps make your React Native app responsive easily
https://github.com/newbiebr/react-native-normalize

normalize react-native responsive typescript

Last synced: 10 months ago
JSON representation

Small and simple package that helps make your React Native app responsive easily

• Host: GitHub
• URL: https://github.com/newbiebr/react-native-normalize
• Owner: NewBieBR
• Created: 2019-07-29T10:53:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:49:45.000Z (about 3 years ago)
• Last Synced: 2025-04-25T15:22:47.301Z (10 months ago)
• Topics: normalize, react-native, responsive, typescript
• Language: TypeScript
• Homepage:
• Size: 3.02 MB
• Stars: 152
• Watchers: 3
• Forks: 12
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md)

[![npm version](https://badge.fury.io/js/react-native-normalize.svg)](https://badge.fury.io/js/react-native-normalize)

### Without `normalize`



### With `normalize`



# React Native Normalize

**react-native-normalize** is a small and simple package that helps make your React Native app responsive easily.

It comes with a function `normalize` that will adapt a value depending on the screen's width or height so you can use it for `width, height, top, bottom, fontSize, borderRadius,...`

```javascript

// on iPhone 8

normalize(100)          // = 100

normalize(50, 'height') // = 50

// on iPhone 5s

normalize(100)          // = 86

normalize(50, 'height') // = 43

// on iPhoneXs Max

normalize(100)          // = 110

normalize(50, 'height') // = 67

```

## Quick example

```JSX

import React from 'react';

import { Text, View, StyleSheet } from 'react-native';

import normalize from 'react-native-normalize';

export default class App extends React.Component {

  render() {

    return (

      

        

          React Native Normalize

        

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  box: {

    alignItems: 'center',

    justifyContent: 'center',

    top: normalize(180, 'height'),

    left: normalize(40),

    width: normalize(300),

    height: normalize(300),

    borderRadius: normalize(150),

    backgroundColor: '#009fcd',

  },

  text: {

    fontSize: normalize(60),

    color: 'white',

  },

});

```