Example Code for Generating Stylesheet in React Native using Functions

The final approach taken was:
– Solution 1:
– It is important to note that StyleSheet is a part of React-Native, and not a part of regular ReactJS. In order to learn more about it, you can refer to this tutorial: https://www.toptal.com/ios/cold-dive-into-react-native-a-beginners-tutorial.
– Alternatively, you can use it as follows in the render() method:
– Solution 2:
– Another solution can be found here: https://stackoverflow.com/a/65259425/8142053. This involves creating a customHook and using it within the hook.


Solution:

Ended up doing this:

import {StyleSheet} from 'react-native';
import {Dimensions} from 'react-native';
const {
    width,
    height
} = Dimensions.get('window');
const widthScale = width / 320;
const heightScale = height / 568;
const widthRatioKeys = {
    fontSize: true,
    paddingHorizontal: true,
    paddingLeft: true,
    paddingRight: true,
    padding: true,
    marginHorizontal: true,
    marginRight: true,
    marginLeft: true,
    margin: true,
    borderRadius: true,
    borderWidth: true,
    right: true,
    left: true,
}
const heightRatioKeys = {
    paddingVertical: true,
    paddingTop: true,
    paddingBottom: true,
    marginVertical: true,
    marginTop: true,
    marginBottom: true,
    height: true,
    minHeight: true,
    lineHeight: true,
    top: true,
    bottom: true,
}
Object.keys(widthRatioKeys).forEach(key => {
    StyleSheet.setStyleAttributePreprocessor(key, (value) => {
        return value * widthScale;
    });
});
Object.keys(heightRatioKeys).forEach(key => {
    StyleSheet.setStyleAttributePreprocessor(key, (value) => {
        return value * heightScale;
    });
});

Frequently Asked Questions