React-native-touchable-action NPM

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

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