how to optionally hide an item?

[shie-erlich]

my setup requires certain ActionButton.Items to be shown or not, depending on context. i tried to use renderIf (https://github.com/ajwhite/render-if) which works as long as it's rendering, but results in an exception if it doesn't render ("null is not an object" while evaluating ActionButton.props).

any thoughts?

code:

<ActionButton buttonColor="blue">
          <ActionButton.Item buttonColor='#9b59b6' title="Edit" onPress={() => {}}>
            <Icon name="edit" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          {renderIf(memory.names.length + memory.emails.length > 0) (() => (
            <ActionButton.Item buttonColor='#3498db' title="Do Something Else" onPress={() => {}}>
              <Icon name="" style={styles.actionButtonIcon} />
            </ActionButton.Item>
          ))}
          <ActionButton.Item buttonColor='red' title="Delete" onPress={() => {}}>
            <Icon name="delete" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>

[allenmanning]

It seems like an enabled or visible property for ActionButton.Item is a clean approach here it could default to true.

[denisftw]

I think the problem is this line in ActionButton.js:

actionButtons = actionButtons.filter( actionButton => (typeof actionButton == 'object') )

Since typeof null returns object, nulls are not filtered out. If it was

actionButtons = actionButtons.filter(actionButton => actionButton)

nulls and undefineds would be removed from the array.

As a workaround, we can use an empty string instead of null to conditionally disable the item, but in theory, it should accept nulls (and later filter them out) as it seems to be a common approach in React or React Native.

[noelsp]

any updates?

[bikashsahucbnits]

I have tried with the Below solutions that work fine with a condition to render no of <Action.items>

{this.props.getCurrentDeviceWidthAction < 750 ? ( <ActionButton.Item buttonColor={'#0440BD'} onPress={() => { this.props.navigation.navigate('bookmark'), this.setState({ indexicon: 0, }) } } > <Icon name="bookmark" type='entypo' iconStyle={styles.actionButtonIcon} color="#fff" /> </ActionButton.Item> ) : [ ] } <ActionButton.Item buttonColor='#159C23' onPress={() => { this.props.navigation.navigate('search'), this.setState({ indexicon: 0, }) } } > <Icon name="search" type='font-awesome' iconStyle={styles.actionButtonIcon} color="#fff" /> </ActionButton.Item> <ActionButton.Item buttonColor='#D8A829' onPress={() => this.gotoprofile()}> <Icon name="user" type='font-awesome' iconStyle={styles.actionButtonIcon} color="#fff" /> </ActionButton.Item> <ActionButton.Item buttonColor='#DB0030' onPress={() => { this.props.navigation.navigate('notification'), this.setState({ indexicon: 0, }) } } > <Icon name="notifications" iconStyle={styles.actionButtonIcon} color="#fff" /> </ActionButton.Item>

As a workaround, I am using an empty Array instead of null to conditionally disable the item,