How to display count of notifications in toolbar icon in react native

Question

I am wanting to create a react native badge count for my app. I have been searching the last week with out any luck. I am wanting to do something like the image below. Any guidance or reports would be appreciated.

image

import React, {Component} from 'react';
import {Image, TouchableHighlight, Button, Platform, StyleSheet, Text, View, AppRegistry} from 'react-native';
import {createStackNavigator, createDrawerNavigator} from 'react-navigation';

const StackNav = createStackNavigator(
  {
   Home:{
  screen: HomeScreen,
  navigationOptions: ({navigation}) => ({
    headerRight: (
      <TouchableHighlight onPress={() => navigation.openDrawer()}>
          <Image source=.{require('./images/baseline_menu_black_48dp.png')} style={{height:50, width:50}}/>
      <Badge count={4}/>
      </TouchableHighlight>
    )
  })
},
 const styles = StyleSheet.Create({
circle:{
width:36,
height:36,
borderRadius:18,   //half radius will make it cirlce,
backgroundColor:'red'
},
count:{color:'#FFF'}
})
const Badge = ({count})=>(
<View style ={styles.cirlce}>
<Text style={style.count}>{count}</Text>
</View>
);

Answer 1

Just create a component that has a circle with a text.

const styles = StyleSheet.Create({
  circle:{
   width:36,
   height:36,
   borderRadius:18,   //half radius will make it cirlce,
   backgroundColor:'red'
  },
  count:{color:'#FFF'}
})
const Badge = ({count})=>(
  <View style ={styles.cirlce}>
    <Text style={style.count}>{count}</Text>
  </View>
);

now just use anywhere like

<Badge count={4}/>