fab-with-touchable.js

import React from 'react';
import {
  StyleSheet,
  View,
  Platform,
  TouchableOpacity,
  TouchableNativeFeedback,
} from 'react-native';

const FAB_SIZE = 56;
const ICON_SIZE = 24;

const Touchable =
  Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback;
const background = Platform.OS === 'ios' ? null : TouchableNativeFeedback.Ripple('#fff', true);   // set borderLess true to make the ripple border less


const Fab = () => {
  return (
    <View style={styles.fab}>
      <Touchable background={background}>
        <View style={styles.iconContainer}>
          <MaterialIcons name="share" size={ICON_SIZE} color="#fff" />
        </View>
      </Touchable>
    </View>
  );
};

const styles = StyleSheet.create({
  fab: {
    width: FAB_SIZE,
    height: FAB_SIZE,
    borderRadius: FAB_SIZE / 2,
    backgroundColor: '#2196F3',
    elevation: 6,
  },
  iconContainer: {
    width: FAB_SIZE,
    height: FAB_SIZE,
    alignItems: 'center',
    justifyContent: 'center',
  },
});