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>

[kMygUfvVdbVsuvYjNcZEQEMrMpecJL]

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,
})
}
}
>

</ActionButton.Item>
)
: [ ]
}
<ActionButton.Item buttonColor='#159C23'
onPress={() => {
this.props.navigation.navigate('search'),
this.setState({
indexicon: 0,
})
}
}
>

</ActionButton.Item>
<ActionButton.Item buttonColor='#D8A829' onPress={() => this.gotoprofile()}>

</ActionButton.Item>
<ActionButton.Item buttonColor='#DB0030'
onPress={() => {
this.props.navigation.navigate('notification'),
this.setState({
indexicon: 0,
})
}
}
>

</ActionButton.Item>

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