@tapston/react-native-styles
📱
Make your styles very similar for any device screen Installation
yarn add @tapston/react-native-styles
Usage
- Import
import RNStyles from '@tapston/react-native-styles';
- Initialize you config for RNStyles in index.js
// If you need your own config:
RNStyles.init({
designWidth: 428, // default value is 428
designHeight: 926, // default value is 926
minimalFactor: 1, // default value is 1
});
// designWidth - Width of your design. Default value is 414 (iPhone 12 Pro Max).
// designHeight - Height of your design. Default value is 896 (iPhone 12 Pro Max).
// minimalFactor - Factor is the value all numeric styles are multiplied by. The default minimal factor is 1.
Create your styles
const myStyles = RNStyles.create({
// Get a rectangle if the screen of your device is not square
container: {
width: 100,
height: 100,
},
// Square with average relativity to width and height
squareContainer: {
square: 100,
},
});
Static values
If you want your value to be static, use a string value instead of a number
{
width: '100', // Width will be equal to 100 on all devices
height: 100, // Height will depend on the size of a device
}
screenHeight or screenWidth
If you want to use screenHeight or screenWidth in your project, please look at the example:
// In your global styles.js file:
const { width, height } = Dimensions.get('window');
export const screenWidth = width;
export const screenHeight = height;
// In your screen-view.js file:
import { screenWidth, screenHeight } from '../../styles';
...
{
width: `${screenWidth / 2}`,
height: `${screenHeight + 24}`,
}
Factor (multiplier)
If you want to change all the sizes of the entire project, change minimalFactor in the constructor
{
...,
minimalFactor: 1.2, // To increase the size of all elements by 20%
}
Percents
block: {
width: '75%',
},
Media queries
block: {
width: '75%',
'@media (min-width: 375) and ios': {
width: '50%',
height: 36,
borderRadius: '6',
},
},
Media queries can operate with the following values:
- media type: ios/android
- width, min-width, max-width
- height, min-height, max-height
- orientation (landscape/portrait)
- aspect-ratio
- direction (ltr/rtl)
Math operations
container: {
maxWidth: 4 * (192 + (96/2)),
},
Q&A
If you have any troubles with 'react-native-extended-stylesheet', try this:
yarn add react-native-extended-stylesheet