Access theme variables outside withStyles function (react-native-ui-kitten)

Question

I want to use theme variables to style my Icon accordingly. However i cant use style property to fill the Icon element of react-native-ui-kitten but instead have to use the fill property. How can I access theme variables outside of the withStyles function of react-native-ui-kitten

Answer 1

@xk2tm5ah5c You can use theme property if you wrap your component into withStyles.

Here is an example code:

import React from 'react';
import { View } from 'react-native';
import { Button, Icon, withStyles } from 'react-native-ui-kitten';

const ScreenComponent = (props) => {

  const iconColor = props.theme['color-primary-default'];

  const FacebookIcon = (style) => (
    <Icon {...style} fill={iconColor} name='facebook' />
  );

  return (
    <View>
      <Button icon={FacebookIcon}>LOGIN WITH FACEBOOK</Button>
    </View>
  );
};

export const Screen = withStyles(ScreenComponent);