MapTools.js

// MapTools Component
<View style={[styles.container, top && styles.top,]}>
  <TouchableOpacity hitSlop={{ top: 8, left: 8, right: 8, bottom: 8, }} onPress={onPress}>
    {children}
  </TouchableOpacity>
</View>
             
             
// MapTools styles
export default StyleSheet.create({
  container: {
    ...Platform.select({
      android: {
        backgroundColor: 'white',
        borderRadius:    40,
        elevation:       2,
        height:          40,
        marginTop:       8,
        width:           40,
      },
      ios: {
        borderTopColor: colors.border,
        borderTopWidth: 1,
        height:         48,
        width:          48,
      },
    }),

    alignItems:     'center',
    justifyContent: 'center',
  },
  top: Platform.select({
    android: { marginTop: 0, },
    ios:     { borderTopWidth: 0, },
  }),
})
             
// Integration with the map:   
<View style={styles.container}>
  <MapTools onLocatePress={this.onLocateMe} tracking={this.state.isTracking} />
  {mapbox}         
</View>
             
// Map container styles
const styles = StyleSheet.create({
  container: {
    // <MapboxGL.MapView> doesn't seem to like other position absolute views
    ...StyleSheet.absoluteFillObject,
    alignItems:        'flex-end',
    flex:              1,
    paddingHorizontal: Platform.select({ android: 16, ios: 8, }),
    paddingVertical:   16,
    zIndex:            1,
  }
})