Theming example does not work

EdmundMai commented 5 years ago

Issue type

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request

Issue description

I am trying to create a label with a custom background color. Like the one described here: https://akveo.github.io/react-native-ui-kitten/docs/design-system/use-theme-variables#declare-custom-component

Current behavior: The background color is not blue

Expected behavior: The background color should be blue

Steps to reproduce: Copy the lines below

Related code:

Given I have a file in src/components/shared/Label.tsx

import * as React from "react";
import { View } from "react-native";
import { withStyles } from "react-native-ui-kitten";

const AwesomeView = props => {
  const { themedStyle, style, ...restProps } = props;

  return <View {...restProps} style={[themedStyle, style]} />;
};

export default withStyles(AwesomeView, theme => ({
  backgroundColor: "blue", // theme["color-primary-500"],
}));

When I use it like this:

                      <Label>
                        <Text>How do you identify?</Text>
                      </Label>

Then it should render render And have a different background color

Other information:

OS, device, package version

insert information here

EdmundMai commented 5 years ago

I ended up going with this:

import * as React from "react";
import { Text } from "react-native";
import styled from "styled-components";

import theme from "../../../theme";

export default styled(Text)`
  color: ${theme["color-primary-700"]};
`;

artyorsh commented 5 years ago

omg, that's a quite strange solution :) sorry for late reply. I guess checking this issue can solve your trouble. Please leave feedback if so

akveo / react-native-ui-kitten