withStyles doesn't inject styles correctly

Unexpected Behavior

• [x ] bug report
• feature request

Issue description

Current behavior: I created a wrapper for TopNavigation to auto display a back button as leftControl if the user can go back in navigationStack. So in such case, the leftControl would be:

leftControl = (
        <View>
          <TouchableOpacity onPress={() => goBack()}>
            <Feather name="chevron-left" size={32} color="white" />
          </TouchableOpacity>
        </View>
      );

Then I exported my component as following:

export const NavigationBar = withStyles(NavigationBarComponent, (theme: ThemeType) => ({
  color: theme['color-primary-default'],
}));

This should inject a themedStyle Object in my component’s props, that has a “color” property, which currently, I’m getting like this:

color: {
 "0": "$",
"1": "c",
"10": "m",
"11": "a",
"12": "r",
"13": "y",
"14": "-",
"15": "5",
"16": "0",
"17": "0",
"2": "o",
 "3": "l",
"4": "o",
"5": "r",
"6": "-",
"7": "p",
"8": "r",
"9": "i",
}

Expected behavior: “color” property should hold a value of e.g. “#f76a97”

Steps to reproduce: export a component wrapped with “withStyles” and check the themedStyle prop

Related code:

import React from 'react';
import { SafeAreaView, TouchableOpacity, View } from 'react-native';
import { NavigationScreenProp } from "react-navigation";
import { TopNavigation, TopNavigationProps, Layout, withStyles, ThemedComponentProps, ThemeType } from 'react-native-ui-kitten';
import { Feather } from '@expo/vector-icons';

interface NavigationBarProps extends TopNavigationProps, ThemedComponentProps {
  renderBackButton?: boolean;
  navigation?: NavigationScreenProp<any,any>;
}

const NavigationBarComponent = (props: NavigationBarProps) => {

  // Checking If There Should Be a Back Button As Left Control ------
  let leftControl: React.ReactElement | undefined;
  if (props && props.renderBackButton && props.navigation) {
    const parent: NavigationScreenProp<any, any> | undefined = props.navigation.dangerouslyGetParent();
    if (parent && parent.state && parent.state.index && parent.state.index > 0) {

      console.log(props.themedStyle.color);

      // Create GoBack Function -----
      const goBack: Function = () => {
        if (props.navigation) {
          props.navigation.goBack();
        }
      }

      // Create Back Button, left Control Element -----
      leftControl = (
        <View>
          <TouchableOpacity onPress={() => goBack()}>
            <Feather name="chevron-left" size={32} color="white" />
          </TouchableOpacity>
        </View>
      );
    }
  }

  // Create Default Props -----
  const defaultProps: NavigationBarProps = {
    alignment: "center",
    leftControl: leftControl
  };

  // Return Element -----
  return (
    <Layout level="1">
      <SafeAreaView>
        <TopNavigation {...{...defaultProps, ...props}} />
      </SafeAreaView>
    </Layout>
  );
};

// Export Component With Style Props From Theme ----
export const NavigationBar = withStyles(NavigationBarComponent, (theme: ThemeType) => ({
  color: theme['color-primary-default'],
}));

Other information:

Device: iPhone Xs Max
Device OS: iOS 12.3.1
Expo SDK: 33
Ui-Kitten: 4.0.1
@eva: 1.0.0
typescript: 3.4.5

[DaniShalash]

@artyorsh Thanks to the kitten tricks app I was able to track and fix the issue. It was solved by simply replacing:

export const NavigationBar = withStyles(NavigationBarComponent, (theme: ThemeType) => ({
  color: theme['color-primary-default'],
}));

With

export const NavigationBar = withStyles(NavigationBarComponent, (theme: ThemeType) => ({
  backButton: {
    color: theme['color-primary-default'],
  }
}));

Thank you very much for the quick replies

[artyorsh]

@YashGadle take more attention on the @DaniShalash answer. withStyles arrow function should return an object with nested objects (not single style entries), just like you do when using StyleSheet

It works because it iterates through the keys of object you return