Pinned Left Navigation example

PinnedNav.js

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import {createSwitchNavigator, createAppContainer, SwitchActions} from 'react-navigation';
import { Ionicons } from '@expo/vector-icons';
import LeftTabs from './LeftTabs';

const contentStyles = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
};
const Home = () => {
  return (
    <View style={[contentStyles, {backgroundColor: '#3BC'}]}>
      <Ionicons name='ios-planet' size={32} color='pink' />
    </View>
  );
}

const Places = () => {
  return (
    <View style={[contentStyles, {backgroundColor: '#81A'}]}>
      <Ionicons name='ios-pin' size={32} color='red' />
    </View>
  );
}
const People = () => {
  return (
    <View style={[contentStyles, {backgroundColor: '#A53'}]}>
      <Ionicons name='ios-contacts' size={32} color='blue' />
    </View>
  );
}
const Me = () => {
  return (
    <View style={[contentStyles, {backgroundColor: '#FAA'}]}>
      <Ionicons name='ios-contact' size={32} color='turquoise' />
    </View>
  );
}

const AppContent = createSwitchNavigator(
  {
    'Home': {
      screen: Home,
    },
    'Places': {
      screen: Places
    },
    'People': {
      screen: People
    },
    'Me': {
      screen: Me
    }
  },
  {
    resetOnBlur: false
  }
);
class App extends React.PureComponent {
  static router = AppContent.router;
  constructor() {
    super();
    this.state = {
      selectedTab: 'Home'
    }
  }
  onTabPressed = (routeName) => {
    this.setState({
      selectedTab: routeName
    });
    this.props.navigation.dispatch(SwitchActions.jumpTo({routeName}));
  }
  render() {
    const {
      navigation
    } = this.props;
    const tabs = [
      {
        tabName: 'Home',
        tabIcon: 'ios-planet'
      },
      {
        tabName: 'Places',
        tabIcon: 'ios-pin'
      },
      {
        tabName: 'People',
        tabIcon: 'ios-contacts'
      },
      {
        tabName: 'Me',
        tabIcon: 'ios-contact'
      }
    ]
    return (
      <View style={styles.box}>
        <LeftTabs
          tabs={tabs}
          onTabPressed={this.onTabPressed}
          selectedTab={this.state.selectedTab}/>
        <View style={styles.content}>
          <AppContent navigation={navigation}/>
        </View>
      </View>
    );
  }
}

export default createAppContainer(App)
const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    flex: 1
  }
});