Button: unsupported configuration.

🐛 Bug Report

Can not use the prop to style the button. I’m getting the warning like below Button: unsupported configuration. Check one of the following prop values { "appearance": "default", "variants": [ "success", "tiny" ], "states": [] } 📖 Documentation: https://akveo.github.io/react-native-ui-kitten/docs/components/button/api

const renderRhs = () => {
  return (
    <Button size="tiny" appearance="outline" status="success">
      Take control
    </Button>
  );
};

Conversation.navigationOptions = {
  title: 'Conversation',
  header: ({scene}) => {
    const {options} = scene.descriptor;
    const {title} = options;
    return (
      <SafeAreaView>
        <TopNavigation
          title={title}
          alignment="center"
          rightControls={renderRhs()}
        />
      </SafeAreaView>
    );
  },
};

UI Kitten and Eva version

Package	Version
@eva-design/eva	^1.3.1
@ui-kitten/components	^4.3.2

[addic]

@yckbilly1929 why not just try before asking? 😸 It works

const renderButtonAction = () => (
  <Button appearance='ghost'>
    SAMPLE
  </Button>
);

<TopNavigation rightControls={[renderButtonAction()]} />

@artyorsh Sorry, I am a bit confused, just before that you said:

When using TopNavigation, you should use TopNavigationAction, not Button

So, is it possible to use a Button for the controls? I have tried my code as well as yours and got the same error as the OP.

"@eva-design/eva": "^1.4.0",
"@ui-kitten/components": "^4.4.1",

Error from yours:

Button: unsupported configuration.
Check one of the following prop values {
  "appearance": "default",
  "variants": [
    "primary",
    "medium"
  ],
  "states": []
}
📖 Documentation: https://akveo.github.io/react-native-ui-kitten/docs/components/button/api

@addic you can do like this:

<TopNavigation rightControls={renderRightControls()} />

const renderRightControls = () => <ButtonAction />;

const ButtonAction = (props) => (
    <TopNavigationAction {...props} icon={SomeButton} />
  );

const SomeButton = () => (
    <Button appearance="ghost">Example</Button>
  );

Doesn’t feel the right way, but at least dismiss the warning.

I tried that at first, but the button was nowhere to be found. Now after trying some things out, it seems I needed to set: {width: 'auto', height: 'auto'} for the button to appear.

Cheers.

[llcernicchiaro]

@yckbilly1929 why not just try before asking? 😸 It works

const renderButtonAction = () => (
  <Button appearance='ghost'>
    SAMPLE
  </Button>
);

<TopNavigation rightControls={[renderButtonAction()]} />

@artyorsh Sorry, I am a bit confused, just before that you said:

When using TopNavigation, you should use TopNavigationAction, not Button

So, is it possible to use a Button for the controls? I have tried my code as well as yours and got the same error as the OP.

"@eva-design/eva": "^1.4.0",
"@ui-kitten/components": "^4.4.1",

Error from yours:

Button: unsupported configuration.
Check one of the following prop values {
  "appearance": "default",
  "variants": [
    "primary",
    "medium"
  ],
  "states": []
}
📖 Documentation: https://akveo.github.io/react-native-ui-kitten/docs/components/button/api

@addic you can do like this:

<TopNavigation rightControls={renderRightControls()} />

const renderRightControls = () => <ButtonAction />;

const ButtonAction = (props) => (
    <TopNavigationAction {...props} icon={SomeButton} />
  );

const SomeButton = () => (
    <Button appearance="ghost">Example</Button>
  );

Doesn’t feel the right way, but at least dismiss the warning.