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