Resposive fontSize, height and width for react-native components, that automatically adjusts itself based on screen-size of the device.
Switch branches/tags
Clone or download
Latest commit b1aec1d Oct 11, 2018

README.md

react-native-responsive-dimensions

Responsive height, width and responsive fontSize for react native components that automatically adjust themselves based on the screen size of the device. The dimensions can be used for any components like View, Image, Text etc.

Responsive Font Size uses only the width of the device and auto adjusts to the screen. It will not depend on Height due to different aspect ratio across many devices.

Installation

#npm
npm install --save react-native-responsive-dimensions

#yarn
yarn add react-native-responsive-dimensions

The below snippet will create styles with a container of dynamic height, width and a sample text with dynamic font-size relative to the screen size of the device the app is run.

import { StyleSheet } from 'react-native';
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    height: responsiveHeight(50), // 50% of screen height
    width: responsiveWidth(50), // 50% of screen width
    alignItems: 'center',
  },
  sampleText: {
    fontSize: responsiveFontSize(2), // 2% of total screen size
  }
});

This will create a container(view/image) with height that is exactly 50% of the device's screen-height and width exactly 50% of the device's screen-height and a font with fontSize that occupies exactly 2% of the screen size.

License

MIT