0.1.2 • Published 5 years ago
react-native-style-scale v0.1.2
react-native-style-scale
Replacement for React Native's StyleSheet
that performs automatic scaling.
Main Feature:
- Scale dimensions based on height ratio, width ratio or their average dependending on the style property.
How to use:
- Make sure you develop or set your static sizes on a iPhone 5 or comparable size device so your app can scale upwards and beyond.
Installation instructions
$ yarn add react-native-style-scale
Example usage
import StyleSheet, { scale, shouldScale } from 'react-native-style-scale';
// Toggle scaling use this as soon as possible. Before calling your Stylesheet.create
shouldScale(false) // default set to true. Pass in either true of false to disable scaling across your application
export const styles = StyleSheet.create({
view: {
height: 50, // scaled automatically
width: 100 // scaled automatically,
borderRadius: 3 // scaled automatically
},
text: {
fontSize: 18 // scaled automatically
}
}, disableScale: ['fontSize', 'width']); // optional list of property names that ignore scaling
// util usage scaled automatically
const myInlineStyle = {width: scale(30), height: scale(30)};