React native round button with icon

React native circle button with icon & Icon Inside the React Native Button

Installation:

npm add react-native-paper
npm add react-native-vector-icons

react-native link react-native-vector-icons

IconButton.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  View,
  StyleSheet,
} from 'react-native';
import { IconButton, Colors } from 'react-native-paper';


export default class IconButton extends Component {
  render() {
    return(
      <View style={{flex:1,justifyContent:"center",flexDirection:"column",alignSelf:"center"}}>
        <IconButton
        icon={{ uri: 'https://firebasestorage.googleapis.com/v0/b/reactjsweb-f7417.appspot.com/o/whiteqrcode.png?alt=media&token=8b7bd97f-85cc-41ca-9b11-1b7695417385'}}
        color="grey"
        size={50}
        style={{borderColor:"grey"}}
        onPress={() => console.log('Pressed')}
      />

        <IconButton
        icon="power"
        color="#19ad79"
        size={50}
        style={{borderColor:"#19ad79",borderWidth:2}}
        onPress={() => console.log('Pressed')}
      />

    <IconButton
        icon="power"
        color="red"
        size={50}
        style={{borderColor:"red",borderWidth:2}}
        onPress={() => console.log('Pressed')}
      />

      </View>
    );
  }
}