React.Children.only expected to receive a single React element child.

[imhazige]

When use like this

<TabScreen key={i} label={name}>
            {renderFunc()}
</TabScreen>

some times it will throw this error.

[RichardLindhout]

This is a restriction in our library because I think it will result in bugs if we remove this restriction (for the native viewpager dependency)

I guess you are currently returning an array of elements?

[
    <element1 key="1" />
    <element2 key="2"  />
]

In your renderfunc instead of returning an array of elements you could use a around your array of elements

<React.Fragment>
    <element1 />
    <element2 />
</React.Fragment>

or a shorter version

 <>
    <element1 />
    <element2 />
</>

[RichardLindhout]

@imhazige did this fix it for you?

[imhazige]

Hi, @RichardLindhout renderFunc will return a single root component.

This will work

<Tabs>
  <TabScreen>
          <View></View>  
  </TabScreen>
  <TabScreen>
          <View></View>  
  </TabScreen>
</Tabs>

but when change to an iteration, it will throw the error.

<Tabs>
  {[someaaray].map(({renderFunc})=>{
    return (<TabScreen key={i} label={name}>
                {renderFunc()}
    </TabScreen>);
})}
</Tabs>