In my file register.js, I have a UI component.
import CustomHeader from '../components/Header';
...
static navigationOptions = ({navigation, navigation: { state } }) => {
return {
title: '',
headerStyle: CustomHeader
}
};
I am attempting to create and utilize the CustomHeader style from another constant file.
import { getStatusBarHeight } from "react-native-safearea-height";
import { Platform } from 'react-native';
var iosMarginTop = getStatusBarHeight(true);
const headerStyle = ({backgroundColor = '#000'}) => {
backgroundColor: backgroundColor,
marginTop: Platform.OS == 'ios' ? iosMarginTop : 0
}
export default headerStyle;
How can I dynamically call the CustomHeader style and pass parameters for specific UI styles, such as backgroundColor? By default, if no parameter is passed, it will remain at the default value of "#000".