react-native-normalize

    1.0.1 • Public • Published

    License: MIT PRs Welcome

    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,...

    // 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

    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 (
          <View style={styles.container}>
            <View style={styles.box}>
              <Text style={styles.text}>React Native Normalize</Text>
            </View>
          </View>
        );
      }
    }
     
    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',
      },
    });

    Install

    npm i react-native-normalize

    DownloadsWeekly Downloads

    1,272

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    498 kB

    Total Files

    62

    Last publish

    Collaborators

    • newbiebr