Theming in react-native

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.

[Andarist]

Did I miss anything? Btw I am using emotion@10.0.27

Your code looks fine so not sure what’s happening. I will try to look into this, but cant promise when - this shouldn’t be hard to debug so if you could check this out I would highly appreciate it.

Add css prop in react-native so that we can use something like <Text css={myStyleFunction} /> (i.e. without the styled API usage), or

Probably this.

[elramus]

Hi, just checking that I understand where things stand with this currently. In React Native, the only way to incorporate your theme (outside of the component, anyway) is with the styled syntax? Getting ahold of theme using the css syntax is not supported?

Thanks for the awesome library 🙌