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

Basic Usage

To position your floating action, use the React Native style prop

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

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

Props:

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'

Example:

<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'

Example:

<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}

Example

<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}

Example

<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'

Example

<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'

Example

<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}

Example

<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.