Skip to main content
Version: 0.1.5

Creating StyleSheets

Importing​

First, import the SmartStyles from the package:

import {SmartStyles} from 'react-native-smart-styles';

Creating Styles​

Use SmartStyles.create() to pass your styling object. This method formats the styles according to different screen sizes:

const styles = SmartStyles.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
    },
});

Helper Function​

SmartStyles.helper() assists in writing stylesheets by providing autocomplete features but does not format the styles:

const unformattedStyles = SmartStyles.helper({
    button: {
        padding: 10,
        margin: 5,
    },
});
Please Note

This function does not do anything to the styles you write, it is only a helper for autocomplete. In order to format the styles inside unformattedStyles you have to pass it to the useTheme hook