React Native Touchable Action

A simple floating action button component for any React Native project using Expo

iOS | Android :------------------:|:------------------: |

Installation

npm install --save react-native-touchable-action

or

yarn add react-native-touchable-action

Reference

For a list of IconSources and iconNames, please refer to https://icons.expo.fyi

Import the FloatingActionButton component

import FloatingActionButton from 'react-native-touchable-action';

Usage

import React from 'react';
import {
  Text,
  View,
  StyleSheet,
} from 'react-native';

import FloatingActionButton from 'react-native-touchable-action';

const App = () => {
  return (
    <View
      style={styles.container}
    >
      <Text>React Native Touchable Action</Text>

      <FloatingActionButton
        IconSource='Ionicons'
        iconName='rocket'
        onPress={() => {
          console.log('You pressed the rocket button');
        }}
        style={{
          position: 'absolute',
          bottom: 75,
          right: 50,
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App;

Props:

| Prop | Type | Required | Description | :--- | :--- | :--- | :--- | IconSource | String | Yes | The source of the icon | iconName | String | Yes | The name of the icon | onPress | Object({Function}) | No | The action when the user presses the button | buttonColor | String - Default: #480ca8 | No | The color of the button | buttonColorPressed | String - Default: #6a4c93 | No | The color of the button when pressed in | buttonSize | Object({Number}) - Default: 65 | No | The size of the button | iconSize | Object({Number}) - Default: 40 | No | The size of the icon inside the button | iconColor | String - Default: #edf6f9 | No | The color of the icon inside the button | iconColorPressed | String - Default: #e2eafc | No | The color of the icon color when the button is pressed | shaded | Object({Boolean}) - Default: false | No | The shadow underneath the button when not pressed in. Works best in Light Mode

IconSource (required)

type: String

The source of the icon

IconSource='Ionicons'

iconName (required)

type: String

The name of the icon

iconName='rocket'

onPress

type: Object({Function})

The action when the user presses the button

onPress={() => {
  console.log('You pressed the rocket button');
}

buttonColor

type: String - Default: #480ca8

The color of the button

buttonColor='#0F044C'

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
/>

buttonColorPressed

type: String - Default: #6a4c93

The color of the button when pressed in

| :------------------:|:------------------: ButtonColor | ButtonColorPressed

buttonColorPressed='#693C72'

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
  buttonColorPressed='#693C72'
/>

buttonSize

type: Object({Number}) - Default: 65

The size of the button

| :--------------:|:--------------: Button Size 75 | Button Size 55

buttonSize={75}

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
  buttonColorPressed='#693C72'
  buttonSize={75}
/>

iconSize

type: Object({Number}) - Default: 40

The size of the icon inside the button

This only changes the size of the icon inside the button, not the size of the button itself

| :------------:|:------------: Icon Size 50 | Icon Size 35

iconSize={35}

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
  buttonColorPressed='#693C72'
  buttonSize={75}
  iconSize={35}
/>

iconColor

type: String - Default: #edf6f9

The color of the icon inside the button

iconColor='#edf6f9'

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
  buttonColorPressed='#693C72'
  buttonSize={75}
  iconSize={35}
  iconColor='#edf6f9'
/>

iconColorPressed

type: String - Default: #e2eafc

The color of the icon color when the button is pressed

| :------------------:|:------------------: Icon color | Icon Color Pressed

iconColorPressed='#c9ccd5'

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
  buttonColorPressed='#693C72'
  buttonSize={75}
  iconSize={35}
  iconColor='#edf6f9'
  iconColorPressed='#c9ccd5'
/>

shaded

type: Object({Boolean}) - Default: false

The shadow underneath the button when not pressed in. Works best in Light Mode

| :----------:|:----------: Shaded | Not Shaded

shaded={true}

<FloatingActionButton
  IconSource='Ionicons'
  iconName='rocket'
  onPress={() => {
    console.log('You pressed the rocket button');
  }}
  style={{
    position: 'absolute',
    bottom: 75,
    right: 50,
  }}
  buttonColor='#0F044C'
  buttonColorPressed='#693C72'
  buttonSize={75}
  iconSize={35}
  iconColor='#edf6f9'
  iconColorPressed='#c9ccd5'
  shaded={true}
/>

License

React Native Floating Action Button is under the MIT License. See bundled LICENSE file for details.