ViewerPage selectedIndex={2} has no effect

Issue type

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request

Issue description

Current behavior: ViewPager does not select a page when selectedIndex is set.

Expected behavior: ViewPager to show the specified page instead of first page.

Steps to reproduce: Create a ViewPager with 5 View inside it and try to set selectedIndex to any value (at start or via state)

Notice:

When I swipe the ViewPager, the top bar is updated (with an ugly delay). When I click the top bar, the top bar is updated, but the ViewPager won't "navigate" to the desired index.

Related code: My (partial) view:

<Layout style={styles.mainLayout}>
                <TopNavigation title="Olá, visitante" rightControls={topNavigationRightControls} />

                <View style={styles.topNavigationContainer}>
                    <BottomNavigation style={styles.topNavigation} indicatorStyle={styles.topNavigationIndicator} selectedIndex={this.state.topTabSelectedIndex} onSelect={(e) => this.onTopTabSelect(e)}>
                        <BottomNavigationTab style={styles.topNavigationTab} titleStyle={styles.topNavigationTabTitle} title="Cronograma" />
                        <BottomNavigationTab style={styles.topNavigationTab} titleStyle={styles.topNavigationTabTitle} title="Calendário" />
                        <BottomNavigationTab style={styles.topNavigationTab} titleStyle={styles.topNavigationTabTitle} title="Receitas" />
                        <BottomNavigationTab style={styles.topNavigationTab} titleStyle={styles.topNavigationTabTitle} title="Histórico" />
                        <BottomNavigationTab style={styles.topNavigationTab} titleStyle={styles.topNavigationTabTitle} title="Produtos" />
                    </BottomNavigation>
                </View>

                <ViewPager style={styles.viewPager} selectedIndex={this.state.topTabSelectedIndex} onSelect={(e) => this.onTopTabSelect(e)}>
                    <View>
                        <Text>Tab 1</Text>
                    </View>

                    <View>
                        <Text>Tab 2</Text>
                    </View>

                    <View>
                        <Text>Tab 3</Text>
                    </View>

                    <View>
                        <Text>Tab 4</Text>
                    </View>

                    <View>
                        <Text>Tab 5</Text>
                    </View>
                </ViewPager>

(notice: selectedIndex={this.state.topTabSelectedIndex} or selectedIndex={4} has the same bug.

ViewModel:


interface IHomePageState
{
    bottomTabSelectedIndex: number;
    topTabSelectedIndex: number;
}

export default class HomePageViewModel extends React.Component<IHomePageState>
{
    public state: IHomePageState =
        {
            topTabSelectedIndex: 0,
            bottomTabSelectedIndex: 0,
        };

    protected onTopTabSelect(topTabSelectedIndex: number)
    {
        this.setState({ ...this.state, topTabSelectedIndex });
    }

    protected onBottomTabSelect(bottomTabSelectedIndex: number)
    {
        this.setState({ ...this.state, bottomTabSelectedIndex });
    }
}

Other information:

Both Android and iOS (iPhone5, Moto G 1st gen, Nexus 5 Emulator).

"dependencies": {
    "@eva-design/eva": "^1.0.1",
    "expo": "^33.0.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-native": "^0.59.9",
    "react-native-ui-kitten": "^4.0.5",
    "react-native-web": "^0.11.4"
  },
  "devDependencies": {
    "@types/react": "^16.8.22",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^5.2.0",
    "react-native-svg-transformer": "^0.13.0",
    "sharp": "^0.22.1",
    "tslint": "^5.18.0",
    "typescript": "^3.5.2",
    "typescript-tslint-plugin": "^0.5.3"
  },

akveo / react-native-ui-kitten