Theming in react-native #1955
Description
The problem
In web, I can do following with css props:
import React from "react";
import { css } from "@emotion/core";
const myStyle = theme => css`
background-color: ${theme.backgroundColor};
`;
const MyComponent = () => <div css={myStyle}>Foo</div>;
export default MyComponent;The theme object is abstracted from the component.
However, on react-native I need to explicitly provide the theme object using useTheme:
import React from "react";
import { View, Text } from "react-native";
import { css } from "@emotion/native";
import { useTheme } from "emotion-theming";
const myStyle = (theme) => css`
background-color: ${theme.backgroundColor};
`;
const MyComponent = () => {
const theme = useTheme();
return <View style={myStyle(theme)}><Text>Foo</Text></View>;
};
export default MyComponent;I think it is more consistent if we also abstract the theme object on react-native.