react-native-adaptive-stylesheet

A stylesheet for scaling the size of your app's UI across different sized devices。

Installation

npm install --save react-native-adaptive-stylesheet

Motivation

When developing with react-native, you need to manually adjust your app to look great on variety of different screen sizes. That's a tedious job. And additionally, designer offen gives you a guideline size base on a popular device, for example iphone 6/7/8. How could you adjust such a guideline size to other screen sizes? Don't worry, react-native-adaptive-stylesheet will help you make your scaling a whole lot easier.
As we all know, all dimensions in React Native are unitless, and represent density-independent pixels(dp). The IOS and Android system will help us to adjust actual size of dp in different devices. So the idea is to develop once on a baseline mobile device(like iphone 6) and then simply apply the scale util.
The core of this library is the ability of scaling guideline size to variety of different screen sizes. Example code is like follows:

import { Dimensions, PixelRatio } from 'react-native';
 
const WINDOW_WIDTH = Dimensions.get('window').width;
 
function scaleSize(size) {
  return WINDOW_WIDTH / guidelineBaseWidth * size;
}
function scaleFont(size) {
  return size * PixelRatio.getFontScale();
}

Api

The api of react-native-adaptive-stylesheet is just like StyleSheet of React Native.

• hairlineWidth
• absoluteFill
• absoluteFillObject
• flatten

The above four properities are the same as React Native StyleSheet.

• setGuidelineBaseWidth

Set the guideline screen width of your designer's layout, default is 375. All calculation of scaling will be based on the guideline width you set.

import StyleSheet from 'react-native-adaptive-stylesheet';
StyleSheet.setGuidelineBaseWidth(375);

• configure(options)

Set global configuratioin.

1. options.width
   Set the guideline screen width of your designer's layout
2. options.scaleFont
   If true, all font size will scale according to screen size just like other style properties. If false, scale according to PixelRatio.getFontScale(). Default is false.

import StyleSheet from 'react-native-adaptive-stylesheet';
StyleSheet.configure({
  width: 375,
  scaleFont: true,
});

• create
  The same as React Native StyleSheet.create, except doing scaling internally.

import StyleSheet from 'react-native-adaptive-stylesheet';
export default StyleSheet.create({
  container: {
    width: 375,
    borderWidth: StyleSheet.hairlineWidth,
    fontSize: 18,
  },
});

• scaleView / scaleFont
  A useful helper in component's style propertity.

import StyleSheet from 'react-native-adaptive-stylesheet';
<View style={{ width: StyleSheet.scaleView(60) }}>
  <Text style={{ fontSize: StyleSheet.scaleFont(18) }}>This is am example!</Text>
</View>