Enabling a prop based on some condition in react native?

Question

I want to apply prop bordered for a native base button, if menuIndex == menus.house.

<Button bordered>
    <Text uppercase={false}>House</Text>
</Button>

Here is what i tried,

<Button {menuIndex == menus.house? '' : bordered}>
    <Text uppercase={false} style={styles.menuTextButtonActive}>
        House 
    </Text>
</Button>

Answer 1

<Button bordered>
    ...
</Button>

can be understand as below

<Button bordered={true}>
  ...
</Button>

So, you can perform boolean expression as below

<Button bordered={menuIndex == menus.house}>
    <Text uppercase={false} style={styles.menuTextButtonActive}>
        House 
    </Text>
</Button> 

Answer 2

Alternatively, you could store the value as a constant in the render function:

class FooBar extends React.Component {
    [...]
    render() {
        const indexIsHouse = menuIndex == menus.house;
        return (
            <Button bordered={indexIsHouse}>
                <Text uppercase={false} style={styles.menuTextButtonActive}>
                    House 
                </Text>
            </Button> 
        )
    }
}

Doing this allows you to reuse that condition. indexIsHouse evaluates to a boolean.