react-native-touchable-action

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.