How To Implement Bottom Tab Navigation In RNN V2

I am trying to implement navigation with bottom tabs in my shiny new React Native application. I chose to start with React Native Navigation, version two.

Here is the code so far:

import React from 'react'
import { Navigation } from 'react-native-navigation'
import { Text, View } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

const prepareIcons = async () => {
    const [ home, trend, wifi, list, help ] = await Promise.all([
        Icon.getImageSource('ios-home', 30),
        Icon.getImageSource('ios-trending-up', 30),
        Icon.getImageSource('ios-wifi', 30),
        Icon.getImageSource('ios-list', 30),
        Icon.getImageSource('ios-help-buoy', 30)
    ])

    return { home, trend, wifi, list, help }
}

const Monitor = class extends React.Component {
    render() {
        return <View><Text>Monitor</Text></View>
    }
}

const Usage = class extends React.Component {
    render() {
        return <View><Text>Usage profile</Text></View>
    }
}

const Connection = class extends React.Component {
    render() {
        return <View><Text>WiFi connection</Text></View>
    }
}

const Reports = class extends React.Component {
    render() {
        return <View><Text>Reports log</Text></View>
    }
}

const Support = class extends React.Component {
    render() {
        return <View><Text>Support</Text></View>
    }
}

const main = async () => {
    const icons = await prepareIcons()

    Navigation.events().onAppLaunched(() => {
        Navigation.setRoot({
            bottomTabs: {
                children: [{
                    component: {
                        name: 'Monitor',
                        options: {
                            bottomTab: {
                                icon: icons.home,
                                title: 'Monitor',
                                visible: true
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Usage',
                        options: {
                            bottomTab: {
                                icon: icons.trend,
                                title: 'Usage'
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Connection',
                        options: {
                            bottomTab: {
                                icon: icons.wifi,
                                title: 'WiFi'
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Reports',
                        options: {
                            bottomTab: {
                                icon: icons.list,
                                title: 'Reports'
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Support',
                        options: {
                            bottomTab: {
                                icon: icons.help,
                                title: 'Support'
                            }
                        }
                    }
                }]
            }
        })
    })
}

Navigation.registerComponent('Monitor', () => Monitor)
Navigation.registerComponent('Usage', () => Usage)
Navigation.registerComponent('Connection', () => Connection)
Navigation.registerComponent('Reports', () => Reports)
Navigation.registerComponent('Support', () => Support)

main()

It produces this (Android emulator):

The application opens. No errors. The tabs do change when clicked, but as you can see in the screenshot, the contents of the current component, Connection, is not visible. What am I doing wrong? I feel there is something I'm missing, but this could be a bug.

• React Native Navigation version: 2.0.2125
• React Native version: 0.53.0
• Platform: Android
• Device: Nexus 5X, Android 8.1.0, Debug

The problem was on the selectTabAtIndex method of the com.reactnativenavigation.viewcontrollers.BottomTabsController class. Applying the diff below fixes it.

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsContr
index 87812bc5..69d45877 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
@@ -145,7 +145,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
     void selectTabAtIndex(final int newIndex) {
         getView().removeView(getCurrentView());
         bottomTabs.setCurrentItem(newIndex, false);
-        getView().addView(getCurrentView());
+        getView().addView(getCurrentView(), MATCH_PARENT, MATCH_PARENT);
     }

     @NonNull