1

This works fine(the icon is white and has the correct size):

// Logo definition
import { Icon } from '@ui-kitten/components'

const Logo = props => <Icon {...props} name='logo' pack='app' />

// index.js

  <Logo style={{
    width: 200,
    height: 200,
    tintColor: theme["basic-color-100"]
  }}/>

Then, I turned the element into a styled-component:

// index.js:

    <StyledLogo />

// styles.js

    export const StyledLogo = styled(Logo)`
      width: 200px;
      height: 200px;
      tint-color: ${({theme}) => {theme["basic-color-100"]}
    `

NOTE: if I change StyledLogo's color using inline style, it doesn't work neither

tint-color property is now completely ignored (the icon has the right size, but is completely black). How can I solve it?

Improve this question
2
  • Is the problem tint-color or use of the UI Kitten? If you use tint-color: red; does it change your icon to red? Commented Aug 4, 2021 at 14:51
  • No, it doesn't change(I infer you are referring to StyledLogo in styles.js). I don't know if the problem involves tint-color or UI Kitten. I believe it is more probable that it involves styled and tint-color Commented Aug 4, 2021 at 15:48
Related questions
0
React-native not applying styles
0
React Native - ignores styles
8
Styles not getting Applied in React Native
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.