React-native-ui-kitten: Theming example does not work

Created on 28 Aug 2019  路  2Comments  路  Source: akveo/react-native-ui-kitten

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
Help wanted Components Needs info

Most helpful comment

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"]};
`;

All 2 comments

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"]};
`;

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

domsterthebot picture domsterthebot  路  3Comments

RWOverdijk picture RWOverdijk  路  3Comments

gimli01 picture gimli01  路  3Comments

sovannvin picture sovannvin  路  3Comments

betodasilva picture betodasilva  路  3Comments