A Custom Tab bar with two images in each tab using react navigation?

Question

I am creating an app using React Native for ios. Instead of having an active tintColor I want to have two little triangles (another image/icon) which appears when you are on the selected tab. It is important that the center y axis of the triangles is = to the y axis of the bottom of the tabbar image and that the tab icon is in the center of the triangles as seen below. At the moment I have the tab bar, the icons and navigation working - I just don't know how to make the triangles appear:

ICON TABS

import React, {Component} from 'react';
import {
     Image,
     TouchableOpacity,
     View
} from 'react-native';

class IconTab extends Component {
    render() {
        let icon = require('./Assets/Settings.png');
        const {press, focused, index} = this.props;
        if (index === 0) {
           icon = require('./Assets/Settings.png');
        } else if (index === 1) {
           icon = require('./Assets/Home.png');
        } else if (index === 2) {
           icon = require('./Assets/Search.png');
        } else if (index === 3) {
          icon = require('./Assets/Inbox.png');
        } else {
          icon = require ('./Assets/Profile.png');
        }
        return (
            <TouchableOpacity onPress={press}>
                <Image source={icon} resizeMode={'contain'}/>
            </TouchableOpacity>
        );
     }
  }
 export default IconTab;

TAB BAR

import React, { Component } from 'react';
import { View, Platform, StyleSheet, Image, TouchableOpacity } from 'react 
native';
import {SafeAreaView} from 'react-navigation';
import IconTab from "./IconTab";

class TabBar extends Component {
   render() {
     const {
        navigation,
        jumpToIndex,
     } = this.props;
     const {
        routes
     } = navigation.state;
     return (
        <SafeAreaView forceInset={{ top: 'always' }}>
           <View style={styles.tabbarcontainer}>
               <Image
                  style={styles.bg}
                  source={require('./Assets/Header.png')}
                  resizeMode={'stretch'}/>
               <View style={styles.tabbar}>
                  {routes && routes.map((route, index) => {
                  const focused = index === navigation.state.index;
                  const tabKey = route.key;
                return <IconTab
                      press={() => jumpToIndex(index)}
                      key={route.key}
                      index={index}
                      focused={focused}
                      />
                   })}
               </View>
            </View>
         </SafeAreaView>
       );
     }
  }

 const styles = StyleSheet.create({
    tabbarcontainer: {
       height: 50,
    },
    bg: {
       position: 'absolute',
       width: '100%',
       height: 44,
       alignSelf: 'center',
    },
    tabbar: {
       margin: 5,
       height: 34,
       flexDirection: 'row',
       justifyContent: 'space-around',
       alignItems: 'center',
       alignContent: 'center',
       backgroundColor: 'transparent',
       borderTopColor: 'transparent',
    },

 });

 export default TabBar;

THE TAB NAVIGATOR

import {TabNavigator} from 'react-navigation';
import TabBar from "./TabBar";
import Settings from "./Settings";
import Home from "./Home";
import Search from "./Search";
import Inbox from "./Inbox";
import Profile from "./Profile";

export const TabRouter = TabNavigator({
    Settings: {
            screen: Settings,
    },
    Home: {
            screen: Home,
    },
    Search: {
            screen: Search,
    },
    Inbox: {
            screen: Inbox,
    },
    Profile: {
            screen: Profile,
    },
 }, {

    initialRouteName: 'Home',
    tabBarComponent: TabBar,
    tabBarPosition: 'top',

 });

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import {TabRouter} from "./Components/TabRouter";

export default class App extends Component {
   render() {
      return <TabRouter/>;
    }
}

The SETTINGS, HOME, SEARCH, INBOX, MESSAGE, PROFILE screens are a basic mockup as follows - this is an example of the home screen:

 import React, {Component} from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';

 export default class Home extends Component {
    render () {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 30}}>Home Screen</Text>
      </View>
    );
  }
}

The reference I used to build this is https://github.com/tuanson45/react-native-custom-tab

I really appreciate any replies and help with this! Thanks

Answer 1

TABBAR

import React, { Component } from 'react';
import { View, Platform, StyleSheet, Image, TouchableOpacity } from 'react- 
native';
import {SafeAreaView} from 'react-navigation';
import IconTab from "./IconTab";

class TabBar extends Component {
  render() {
    const {
      navigation,
      jumpToIndex,
    } = this.props;
    const {
      routes
    } = navigation.state;
    return (
        <SafeAreaView style={{zIndex: 10}} forceInset={{ top: 'always' }}>
          <View style={styles.tabbarcontainer}>
                <Image
                   style={styles.bg}
                   source={require('./Assets/Header.png')}
                   resizeMode={'stretch'}/>
            <View style={styles.tabbar}>
              {routes && routes.map((route, index) => {
                const focused = index === navigation.state.index;
                const tabKey = route.key;
                return <View key={route.key} style={{ alignItems: 'center' }}>
                  <IconTab
                    press={() => jumpToIndex(index)}
                    key={route.key}
                    index={index}
                    focused={focused}
                  />
                  {focused && <Image source= {require('./Assets/Triangles.png')}
                                     style={{ position: 'absolute', top: 38 }} />}
                </View>;
              })}
            </View>
          </View>
      </SafeAreaView>
       );
    }
}

const styles = StyleSheet.create({
  tabbarcontainer: {
    height: 44,
  },
  bg: {
    position: 'absolute',
    width: '100%',
    height: 44,
    alignSelf: 'center',
  },
  tabbar: {
    margin: 5,
    height: 34,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    alignContent: 'center',
    backgroundColor: 'transparent',
    borderTopColor: 'transparent',
  },

});

export default TabBar;