Can't overwrite external stylesheet property with inline style in React Native - react-native

Question

I have a custom TextInput component that takes in two stylesheets and appends any inline styles afterwards and passes those to the TextInput style property:
class WSTextInput extends React.Component<TextInputProps> {
render() {
return (
<TextInput
style={[styles.defaultText, styles.defaultTextInput, this.props.style] as StyleProp<TextStyle>}
{...this.props}
/>
);
}
}
These are the stylesheets it uses:
defaultText: {
fontSize: 24,
fontFamily: 'cardenio-modern'
},
defaultTextInput: {
flex: 1,
alignSelf: 'stretch',
textAlign: 'center',
backgroundColor: '#fafafa',
borderBottomWidth: 1,
margin: 10
}
The code works fine so as long as this.props.style does not attempt to overwrite any of the existing properties in defaultText or defaultTextInput.
When I do try to do so, e.g. with this element (note that styles.defaultTextInput's borderBottomWidth and backgroundColor are overwritten):
<WSTextInput style={{ borderBottomWidth: 0, backgroundColor: 'transparent' }}
editable={false}
value={this.state.total.toString()}
/>
Then this is the result:
The top right element is a WSTextInput rendering correctly without inline overrides; the bottom right element is a WSTextInput with the above inline overrides rendering incorrectly.
When I open reactnative-tools and inspect the element tree, I see this for the top right element:
And this for the bottom right element:
So it seems that for the bottom right element, the inline style survives, but both stylesheets are lost.
I have tried different ways of coalescing the properties in WSTextInput.render, e.g. using Object.assign or the spread operator, but the result is the same. Any insights would be appreciated.

Answer 1

I'm still not exactly clear on what the desired outcome is because it's not great to not allow the font size and some others to not be overridden. But, I think this is just as simple as moving the props to the first arg so they are overridden by yours.
render() {
const {style, ...theRest} = this.props;
return (
<TextInput
{...this.props}
style={[styles.defaultText, styles.defaultTextInput] as StyleProp<TextStyle>}
/>
);
}
For more control try removing the style from the props and passing it where desired in the style props so font is overridden but other stuff isn't.
render() {
const {style, ...theRest} = this.props;
return (
<TextInput
style={[styles.defaultText, style, styles.defaultTextInput] as StyleProp<TextStyle>}
{...theRest}
/>
);
}
Finally, you can explicitly remove the ones you don't want overridden thru deconstruction and pass thru anything else.
const {style, ...theRest} = this.props;
const {backgroundColor, borderBottomWidth, ...theRestOfStyle} = style;
Then use it in your style:
<TextInput
style={[styles.defaultText, styles.defaultTextInput, theRestOfStyle] as StyleProp<TextStyle>}
{...theRest}
/>