Package Exports

react-native-normalize

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-normalize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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',
  },
});