StyleSheet.create() inside React Native component - reactjs

Question

I understand that I should normally use StyleSheet.create() outside of the component, but lets say that I want to set the backgroundColor based on theme received from useTheme() hook from react-navigation. Since I can't call this hook outside of the component, I have to invoke it inside the component then do something like this:
export default () => {
const { colors } = useTheme()
return <View style={[styles.container, {backgroundColor: colors.background}]}></View>
}
Now, what if I implement above like this:
export default () => {
const { colors } = useTheme()
const componentStyles = useMemo(
() =>
StyleSheet.create({
container: {
...styles.container,
background: colors.background
}
}),
[colors]
)
return <View style={componentStyles.container}></View>
}
Is this a good practice? Specially when I have lot of cases like this and it makes the code looks messy.

Answer 1

You can also use state for backgroundColor. See:
export default () => {
const { colors } = useTheme();
const [background, setBackground] = React.useState();
React.useEffect(() => {
setBackground(colors.background);
}, [colors])
return
<View style={[styles.container, {backgroundColor: background}]} />
}

Answer 2

It's worth adding that StyleSheet.create() is not mandatory for creating styles in react native. An interesting discussion on this topic can be found here: Is there a need to use StyleSheet.create? . Personally, I do not use StyleSheet.create() .
Using TypeScript in react native I just create an object with the correct types. Example:
type Styles = {
modalView: ViewStyle;
button: ViewStyle;
modalText: TextStyle;
};
const styles: Styles = {
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 35,
alignItems: 'center',
shadowRadius: 4,
elevation: 5,
},
button: {
padding: 10,
elevation: 2,
},
modalText: {
marginBottom: 15,
textAlign: 'center',
},
};

Answer 3

Hooks can only be used inside the components. If you need to add more styling from your theme into your components, as you know style prop takes an array. You can do something like this:
style={
[styles.container, //that comes from your StyleSheet created outside of the component
{
backgroundColor: theme.colors.your_color_choice, //Your theme values that comes from your useTheme hook
borderRadius: theme.borderRadius.your_radius_value,
},
]}
So that way you keep your styles object outside of the component, and they are not newly-created on each re-render.