React Native floating button

react native floating button

In this lesson I will show you how to create a customizable floating button from material design using pure react code.

First of all we need to use TouchableHighlight element to render an interactable element inside your current View tag.

<View>
  <TouchableHighlight style={styles.addButton}
      underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
      <Text style={{fontSize: 50, color: 'white'}}>+</Text>
  </TouchableHighlight>
</View>

In the code above we used a style property to specify styles¬†that are described below. We also added the underlayColor that sets the color of button when it’s pressed. And finally, onPress parameter sets a callback-function that is called when floating button is pressed.

Styling a React Native floating button

Now we need some styling to make it look like a real material design floating button. For that we need 3 things:

  • make it rounded using borderRadius property
  • add a shadow to make it look ‘floating’
  • make button’s position fixed in the right bottom corner
addButton: {
    backgroundColor: '#ff5722',
    borderColor: '#ff5722',
    borderWidth: 1,
    height: 100,
    width: 100,
    borderRadius: 50,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 20,
    right:20,
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 0
    }
  }

When you apply that styles your button will look like this:

react native floating button example

If you need to change anything (colors, shadow, size) – go ahead and play with styles.

There is also a npm-library called react-native-action-button that already implements look and behavior of floating button. You can find it here.

Leave a Reply

1 Comment on "React Native floating button"


Guest
Dinith
5 months 3 days ago

Helpful, Thanks