ViewPager does not load when using a Map function

🐛 Bug Report

When using a map function to populate the ViewPager, i keep getting the error

I am generating the viewpager like so

<ViewPager
    selectedIndex={this.state.currentSection}
onSelect={(index) => this.setCurrentSection(index)}
>
{
    this.state.audit.sections.map((section, index) => {
        return (
            <Layout>
                <Text style={auditFormScreenStyles.sectionHeaderText}>{section.label}</Text>
        </Layout>
    )
    })
}
</ViewPager>

I know the data is valid because i can use a horizontal flatlist and it works and renders just fine. I can get the ViewPager to render two other ways as well. 1, by copying the doc examples like so

<ViewPager
    selectedIndex={this.state.currentSection}
onSelect={(index) => this.setCurrentSection(index)}
>
   <Layout>
      <Text>Hello</Text>
   </Layout>
   <Layout>
      <Text>World</Text>
   </Layout>
</ViewPager>

and by modfiying the onSelect prop to

<ViewPager
    selectedIndex={this.state.currentSection}
onSelect={(index) => () => this.setCurrentSection(index)}
>
{
    this.state.audit.sections.map((section, index) => {
        return (
            <Layout>
                <Text style={auditFormScreenStyles.sectionHeaderText}>{section.label}</Text>
        </Layout>
    )
    })
}
</ViewPager>

Modifying the onSelect prop will get it to render, but swiping doesn’t work properly of course

To Reproduce

Steps to reproduce the behavior: Generate a ViewPager using the map method on an array

Expected behavior

ViewPager renders and swipes normally

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package	Version
@eva-design/eva	4.4.0
@ui-kitten/components	4.4.0

Environment information

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    npm: 6.13.7 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5

[eyalyoli]

There is another problem in the same situation, on initial render index 0 is selected, the map that I’m using is based on an async function, so the initially selected index 0 is selected from empty array or null, it throws a weird animation error randomly.

what I did is to is:

onSelect={
          results
            ? (i) => {
                if (!isNaN(i)) setSelectedIndex(i);
              }
            : null
        }

[wigleyj]

I seemed to have fixed this error. For some reason when iterating over a map function, the onSelect method would pass a NaN value. I fixed this by changing the onSelect method to

onSelect={(index) => {
    if(!isNaN(index)){
        this.setCurrentSection(index)
    }
}}

still unsure as to why it was only when using the map function.