React Native Action Button - Unable to Add buttons Dynamically - react-native

Question

Unable to Add ActionButton Items dynamically.
I have the following setup --
<ActionButton>
<ActionButton.item name={constant_btn1} />
<ActionButton.item name={constant_btn2} />
</ActionButton>
I want to add dynamic buttons to this list. (The list is received from backend)
I have created a function that returns me views of these buttons.
getDynamicBtns() {
return dynamicButtonsList.map(item, key) => {(
return <ActionButton.item name={item.btnName} />;
)};
}
and I have used it in this way -->
<ActionButton>
<ActionButton.item name={constant_btn1} />
<ActionButton.item name={constant_btn2} />
{this.getDynamicBtns()}
</ActionButton>
So this is rendering my constant buttons, but not the dynamic buttons.
EDIT -
I am returning the map from the getDynamicBtns() function and calling invoking the function call too from within render(). This is just some simplified sample code that I have wriiten.
EDIT2 -
To prevent any confusion, changing original question's code.

Answer 1

I figured it out.
The problem was that the .map function returns an array of Objects.
So the final element that was going to be rendered was a React element ActionButton.
The ActionButton had only 3 children, irrespective of the size of my dynamic list.
ActionButton.children: [
staticButton1,
staticButton2,
[dynamicButton1, dynamicButton2, dynamicButton3, ....]
];
As a solution, I took them into separate lists and found a union of the lists.
And then rendered the list inside <ActionButton>
Something like this ->
let listA = [<ActionButton.Item name='staticBtn1.name' />];
let listB = this.getDynamicBtns();
let finalList = _.union(listA, listB);
And then rendered it as -->
<ActionButton>
{finalList}
</ActionButton>

Answer 2

You are no returning anything in getDynamicBtns function. You should return the result of your map:
getDynamicBtns() {
return dynamicButtonsList.map(item => <ActionButton.item name={item.btnName} />)
}