Customizing styles
React Native Propel Kit has been built from the ground up to be extendable.
Objectives
- Be able to easily override a component styles globally
- Be able to easily extend a specific style via passing props
- Be able to build upon these components while guarding against upstream style changes
Guides
Globally override styles
Every component that uses styles do export a defaultStyles
object that is statically used to set default styles.
You can easily override/customize these styles using basic Object.assign
operations.
For instance, here is the actual configuration of our sandbox examples app:
import {StyleSheet} from 'react-native';
import {buttonDefaultStyles, inputButtonDefaultStyles} from 'react-native-propel-kit';
Object.assign(buttonDefaultStyles, {
view: {
...buttonDefaultStyles.view,
backgroundColor: 'white',
borderRadius: 4,
elevation: 4,
minWidth: 200
},
text: {
color: 'black',
padding: 12,
fontSize: 18
}
});
Object.assign(inputButtonDefaultStyles, {
view: {
...inputButtonDefaultStyles.view,
backgroundColor: 'white',
marginBottom: 12,
borderRadius: 4,
elevation: 4,
minWidth: 200,
borderColor: '#C5CAE9',
borderWidth: StyleSheet.hairlineWidth
},
text: {
color: 'black',
padding: 12,
fontSize: 18
}
});
Locally extend styles
For every default style, you can also pass the associated prop to locally extend these defaults.
For instance if we check the <Select />
props you can find a lot of xxxStyle
props:
export type Props = {
// [...]
defaultStyles?: typeof defaultStyles;
cancelStyle?: StyleProp<TextStyle>;
confirmStyle?: StyleProp<TextStyle>;
modalStyle?: StyleProp<ViewStyle>;
containerStyle?: StyleProp<ViewStyle>;
headerStyle?: StyleProp<ViewStyle>;
bodyStyle?: StyleProp<ViewStyle>;
footerStyle?: StyleProp<ViewStyle>;
titleStyle?: StyleProp<TextStyle>;
messageStyle?: StyleProp<TextStyle>;
};
Just use them locally to extend the styles:
// MyComponent.jsx
import React from 'react';
import {Button} from 'react-native';
import {ModalDialog, ModalDialogHandle} from 'react-native-propel-kit';
const MyComponent = () => {
const modalDialogRef = useRef<ModalDialogHandle>(null);
return (
<Select headerStyle={{marginBottom: 32}} titleStyle={{fontSize: 32}}>
<SelectItem label="Java" value="java" />
<SelectItem label="JavaScript" value="js" />
</Select>
);
};
export default MyComponent;
Fork away styles
Let's say you want to use the awesome <ModalDialog />
to build an <ActionSheet />
component.
You want to make sure that any future change to the base <ModalDialog />
defaultStyles
won't break your higher level compoennt silently.
That's why every component that uses defaultStyles
do also accept prop with this same name that will replace every style defaults.
export type Props = {
// [...]
defaultStyles?: typeof defaultStyles;
};
In fact the actual <ActionSheet />
source code used by <ActionSheetProvider />
works just like this.