I'm submitting a ... (check one with "x")
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
OS, device, package version
insert information here
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
Most helpful comment
I ended up going with this: