Tabs showing wrong title

Question

I am working on react-native mobile app. After upgrading RN version and react-native-router-flux ^4.0.6. I am using tabs similar to ]

It has to show Tabs with title HOME , CATEGORIES , Success stories. But it has been observed that it is continuously fetching title of drawer and tabs look like this Home, mainTitle , mainTitle. where main title is title set on drawer.

Only tab its showing right is the one which has initial tag in it.

Expectation: Tabs will show the their title on the screen under the drawer. Reality : Title of Drawer menu is showing everytime. Here is my code.

    <Drawer
                initial
                navigationBarStyle={Styles.navigationBarStyle} key="drawer"
                contentComponent={DrawerMenu} drawerWidth={220}
                drawerIcon={<Icon name='menu' color={Colors.black} size={30}
                                  style={{marginTop: Platform.OS === 'ios' ? -5 : 0}}
                                  onPress={this.handleDrawerIconPress}/>}
                title='main Title' rightTitle=' '
              >
                <Tabs
                  initial
                  tabBarPosition="top"
                  key="tabbar"
                  swipeEnabled
                  showLabel={false}
                  activeBackgroundColor={Colors.pink}
                  activeTintColor={Colors.pink}
                  inActiveTintColor={Colors.black}
                  inactiveBackgroundColor={Colors.black}
                  tabBarStyle={Styles.tabBar}
                  indicatorStyle={Styles.indicatorStyle}
                  iconStyle={Styles.iconStyle}
                  showIcon={true}
                >
                  <Scene
                    initial
                    key="home"
                    component={Home}
                    icon={TabsIcon}
                    title="HOME"
                    iconName='home'
                    hideNavBar
                  />
                  <Scene
                    key="categories"
                    component={Categories}
                    title="CATEGORIES"
                    icon={TabsIcon}
                    iconName='categories'
                    hideNavBar
                  />
                  <Scene
                    key="success"
                    component={SuccessStories}
                    title="SUCCESS STORIES"
                    icon={TabsIcon}
                    iconName='success-stories'
                    hideNavBar
                  />
                </Tabs>
              </Drawer>

Answer 1

After spending couple of hours I was able to fix it. Actually react-native-router-flux does not has any property of title as mentioned in their docs. react-native-router-flux-documentation. So I just got a hack to fix my problem and that is I have used getTitle instead of title in drawer. My code looks like this now

    <Drawer
        initial
        navigationBarStyle={Styles.navigationBarStyle} key="drawer"
        contentComponent={DrawerMenu} drawerWidth={220}
        drawerIcon={<Icon name='menu' color={Colors.black} size={30}
                          style={{marginTop: Platform.OS === 'ios' ? -5 : 0}}
                          onPress={this.handleDrawerIconPress}/>}
        getTitle="Main Title"  rightTitle=' '
     >

It solved my problem. Thanks to everyone who gave a look on it.