I have a component that looks like this:
type VehicleContainerProps = { //vehicles: Vehicle[]; vehicles: any[]; //styles?};export const VehicleContainer: React.FunctionComponent<VehicleContainerProps> = ({ vehicles,}) => { return (<View> {vehicles.map((item: Vehicle) => (<View style={styles.container} key={item.id}><Thumbnail style={styles.thumbnail} source={{ uri:'https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/car-512.png', }}></Thumbnail><View style={styles.carDetails}><Text style={styles.carModel}>Volkswagen Golf 8</Text></View></View> ))}</View> );};export const styles = StyleSheet.create({ container: { paddingTop: 20, paddingRight: moderateScale(25), paddingLeft: moderateScale(25), flexDirection: 'row', },)}
usually when I use this component, I don't need to add styles. However, in one particular case, I want to change the styling. Is there any way I can pass multiple styles together such that whichever new styles are provided (eg carModel, thumbnail) etc are used. While for those which have no new styles, the old normal ones should be used.
I passed additional styles like this:
tripVehicleStyles?: any;
export const VehicleContainer: React.FunctionComponent<VehicleContainerProps> = ({ vehicles, tripVehicleStyles,}) => {
and used them like this:
style={[styles.thumbnail, tripVehicleStyles.thumbnail]}
Such that if If I pass tripVehicleStyles, they are applied. However, on the screens where I do not pass tripVehicleStyles, I get an error because they are undefined. Even though I am using a question mark in the props.
How can I make this parameter optional? The first style in the array should work if the second is not given