Unable to Iterate and create ActionButton.Items

Trying to perform the following , but no success

  <ActionButton buttonColor="red" verticalOrientation="down" position="right" offsetX={10} offsetY={5} hideShadow={true}>
        <ActionButton.Item buttonColor='#9b59b6' title="All Offers" onPress={() => this.filterAdverts(0,"All Offers")}>
        <Icon name="md-create" style={styles.actionButtonIcon} />
        </ActionButton.Item>
        {
           allUserInterests.map((AUL, x) => {
             <ActionButton.Item
                key={x}
                buttonColor='#9b59b6' title={<Text>{AUL.interestName}</Text>}
                onPress={() => this.filterAdverts(AUL.interestID,AUL.interestName)}>
                <Icon name="md-create" style={styles.actionButtonIcon} />
            </ActionButton.Item>
          })
        }
        </ActionButton>

[mauricioaraldi]

I see. The problem is that I had the array.map AND an item. Like:

<ActionButton>
  array.map(
    //...
  )

  <ActionButton.Item>
    //...
  </ActionButton.Item>
</ActionButton>

If I left only the array.map, it works. Thanks for showing me this @DimitrisTzimikas

[mazenchami]

if you do all your logic prior to the return in render it works;

render = () => {
  let actionButtons = [];
  actionButtons.push(<ActionButton.Item key={'a'}>{...}</ActionButton.Item>);
  array.map(x =>
    actionButtons.push(<ActionButton.Item key={x.id}>{...}</ActionButton.Item>);
  )
  actionButtons.push(<ActionButton.Item key={'z'}>{...}</ActionButton.Item>);
  return (
      ...
      <ActionButton>
        {actionButtons}
      </ActionButton>
      ...
  );
}