I’m evaluating whether ReasonML is a good fit for my React Native project, and I got stuck when trying to create a more-specific component that uses a base component, but changes its props slightly. For example, this is my AppTextInput
that renders the React Native TextInput
and has exactly the same props, but taps into it’s style
prop in order to respect the current theme:
const AppTextInput = props => {
const theme = useTheme();
return (
<TextInput
{...props}
style={[
{
color: theme.textColors.primary
}, // default theme styles are provided
props.style // given style is respected, and can override the above
]}
/>
);
};
I could of course re-declare the numerous TextInput
's props (https://github.com/reason-react-native/react-native/blob/master/src/components/TextInput.re), but this way I would need to change AppTextInput
anytime the original component updates. I use this pattern quite a lot to create different flavors of components.
Is there a way to do this more elegantly in ReasonML? I’ve explored currying and using TextInput.makeProps
, but I need to access my hook in order to get current theme color, which I’ll merge with the given style
.
Thanks!