FortuneCookie:

I made a custom bottom navbar in React Native. The code is given below. I want to navigate through the pages in the navbar and when on a particular page the image(.png) which is the icon in the navbar should be active to indicate the current page. Help me to make the page active visible on the bottom navbar.

import React from 'react';
    import {
      Dimensions,
      View,
      Image,
      TouchableOpacity,
      Text,
      Platform,
    } from 'react-native';
    const { width, height } = Dimensions.get("window");
    import images from '../../images';
    import NormalizeSize from '../../styles/NormalizeSize'
    import common from '../../css/common'
    import NavigatorService from '../../lib/NavigatorService';
    const {normalize}=NormalizeSize;
    const Bottom=(props)=>{
      const {navigate, state}=props.navigation;

      const {isDrawer,isRightButton,isNotificationButton,title,navigation, isFilterButton, isDummyButton}=props;
      return(



              onPress={() => { NavigatorService.navigate('ExcerciseList') }}
              hitSlop= style={common.bottomNavBlock}>
                resizeMode='contain'
                style=
                source={images.excercise_icon} />


            ...........



      )
    }

    export default Bottom;