Is there an easy way to add a "back" navigation button above the routes? Can't seem to find a flag.

[emptyopen]

I've seen this in other tab views, but I don't see it as an option under TabBar. Currently I'm rendering the TabBar in a custom manner like:

renderTabBar(props) {
	return (
	      <View>
	        <TabBar
	          {...props}
		indicatorStyle={{ backgroundColor: 'white' }}
		style={{ backgroundColor: Colors.semidark,  }}
		scrollEnabled={ true }
		/>
	      </View>
	    )
	}

[itzsaga]

@emptyopen what do you mean by "above the routes"? If you're talking about something like this:

Then that's outside the scope of what this library provides to my understanding.

[emptyopen]

gotcha, no problem.

[ibedwi]

I've seen this in other tab views, but I don't see it as an option under TabBar. Currently I'm rendering the TabBar in a custom manner like:

renderTabBar(props) {
	return (
	      <View>
	        <TabBar
	          {...props}
		indicatorStyle={{ backgroundColor: 'white' }}
		style={{ backgroundColor: Colors.semidark,  }}
		scrollEnabled={ true }
		/>
	      </View>
	    )
	}

I achieve what you wanted by using react-navigation 's stackNavigator and add this library (react-native-tab-view). The steps are:

1. Create router using react-navigation's stackNavigator, make sure you have 2 pages which is the source page and the destination page. The destination page contains the tabs.
2. Inside the source page, create a navigation to the destination page.
3. In the destination page, add the tabs.

This is a simple example how I achieve it using TabView :

// app router
import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';

// import origin page
import SourcePage from './sourcepage.js';
// import destination page which contain tabs
import DestinationPage from './destinationpage.js'

const stackNavigator = createStackNavigator({
  source: {
    screen: SourcePage,
  },
  // it's important to remember the route's name!
  destination: {
    screen: DestinationPage,
    navigationOptions: {
      title: 'Text only top bar' // this will be the title with back button
    }
  }
}, {
  initialRouteName: 'source',
})

const Router = createAppContainer( stackNavigator );
export default Router; // This will be the router of your app.

Then add navigation on your source page:

// source.js

import React, { Component } from 'react';
import {
  StatusBar, 
  View, 
  Text,
  ImageBackground,
  TextInput,
  TouchableOpacity
} from 'react-native'
import { NavigationActions } from 'react-navigation';


class SourcePage extends Component {

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View 
          style={{ flex: 1 }}
          style={{ 
          flex: 1, 
          alignItems: 'center', 
          justifyContent: 'center' }}
       >
          
          <TouchableOpacity 
              // insert your destination page's route name
              onPress={() => navigate('destination')}
           >
              <Text> Go to the destination page </Text>
          </TouchableOpacity>
      </View>
    )
  }
}

export default SourcePage;

Finally add your destination page:

// destination.js

import React from 'react';
import {
  View,
  Text,
  Dimensions,
  StatusBar
} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const Tab1 = () => {
  return (
    <View>
      <Text> Tab 1 </Text>
    </View>
  )
}
const Tab2 = () => {
  return (
    <View>
      <Text> Tab 2 </Text>
    </View>
  )
}
const Tab3 = () => {
  return (
    <View>
      <Text> Tab 3 </Text>
    </View>
  )
}

class DestinationPage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      index: 0,
      routes: [
        {key: 'tab1', title: 'Tab 1'},
        {key: 'tab2', title: 'Tab 2'},
        {key: 'tab3', title: 'Tab 3'},
      ]
    }
  }

  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={SceneMap({
          tab1: Tab1,
          tab2: Tab2,
          tab3: Tab3
        })}
        onIndexChange={index => this.setState({ index })}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    )
  }
}

export default DestinationPage

This answer may not be exactly what you wanted, but I hope this give you insight about how to achieve what you want. You may have to dig deeper on react-navigation library if you wanted learn about the navigation. Good luck! 😄

The final result should be looks like this: