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.