How to create round buttons in React Native

Updated: June 25, 2022 By: A Goodman 2 comments

The example below will show you how to create round buttons in React Native. We will use TouchableOpacity instead of the basic built-in Button component.

The Code

Replace the default code in App.js with the following:

// App.js
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';

function App() {
  const buttonClickedHandler = () => {
    console.log('You have been clicked a button!');
    // do something
  };

  return (
    <View style={styles.screen}>
      <TouchableOpacity
        onPress={buttonClickedHandler}
        style={styles.roundButton1}>
        <Text>I'm a button</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={buttonClickedHandler}
        style={styles.roundButton2}>
        <Text>I'm another button</Text>
      </TouchableOpacity>
    </View>
  );
}

// Styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  roundButton1: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  roundButton2: {
    marginTop: 20,
    width: 150,
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: '#ccc',
  },
});

export default App;

Here’s how our round buttons look like and interact when pressed on iOS and Android:

That’s it, my friend. Have a nice day with your React Native project. If you would like to learn more, take a look at the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

2 Comments
Inline Feedbacks
View all comments
Séléna
Séléna
2 years ago

Thank you so much 🙂

Nice
Nice
2 years ago

Nice

Related Articles