React-native-ui-kitten: Button: unsupported configuration.

[mannegobot]

🐛 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 |

[artyorsh]

When using TopNavigation, you should use TopNavigationAction, not Button

[yckbilly1929]

Is it possible to use Button (specifically, Text inside) instead of TopNavigation?
As I found it quite common that on iOS devices, top right action will be a text button instead of icon button.

[artyorsh]

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

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

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

[yckbilly1929]

yes, sorry for inconvenience caused, tested and worked great

and i encountered another use case, is it possible to use image (like avatar) instead of text as centered title?

[artyorsh]

@yckbilly1929

and i encountered another use case, is it possible to use image (like avatar) instead of text as centered title?

No. But it was requested in #777 and could be potentially implemented in future releases. You can subscribe for that issue

[yckbilly1929]

@artyorsh no problem, thanks for your prompt reply

[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

[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.

[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.