I want to make a circle with buttons in react native

Question

I am developing a react native project and I want to create a circle shape with the buttons.

Picture

There is a central button and the other buttons must shape a circle like in the picture.

Answer 1

Final result:

Here is how you can do it:

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const handleClick = (num) => {
    alert(`${num} clicked`);
  };
  return (
    <View style={styles.container}>
    <View style={styles.btnContainer}>
      <View style={styles.btnContainerMiddle}>
        <TouchableOpacity
          onPress={() => handleClick(1)}
          style={[
            styles.button,
            { position: 'absolute', left: -100, top: 50 },
          ]}>
          <Text>1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(2)}
          style={[styles.button]}>
          <Text>2</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(3)}
          style={[styles.button, { position: 'absolute', left: 100, top: 50 }]}>
          <Text>3</Text>
        </TouchableOpacity>
      </View>
      <View style={[styles.btnContainerMiddle, { justifyContent: 'center' }]}>
        <TouchableOpacity
          onPress={() => handleClick(4)}
          style={[
            styles.button,
            { height: 100, width: 100, borderRadius: 50, margin: 10 },
          ]}>
          <Text>4</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.btnContainerMiddle}>
        <TouchableOpacity
          onPress={() => handleClick(5)}
          style={[
            styles.button,
            { position: 'absolute', left: -100, bottom: 60 },
          ]}>
          <Text>5</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(6)}
          style={[styles.button]}>
          <Text>6</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(7)}
          style={[
            styles.button,
            { position: 'absolute', right: -100, bottom: 60 },
          ]}>
          <Text>7</Text>
        </TouchableOpacity>
      </View>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  btnContainer: {
    // flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'grey',
    padding: 8,
    width: 400,
    height: 400,
    borderRadius: 100,
    alignItems: 'center',
  },
  btnContainerMiddle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  button: {
    margin: 10,
    width: 70,
    height: 70,
    backgroundColor: 'white',
    borderRadius: 35,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Here is Live Demo of the app, you can play around with it to make further adjustments.

Answer 2

This is a sample code of creating rounded button

<TouchableOpacity 
  style={{ borderWidth:1,
    borderColor:'rgba(0,0,0,0.2)',
    alignItems:'center',
    justifyContent:'center',
    width:100,
    height:100,
    backgroundColor:'#fff',
    borderRadius:100,
  }}
  >
  <Icon name={"chevron-right"}
    size={30}
    color="#01a699" />
</TouchableOpacity>

Answer 3

You can use TouchableOpacity to create custom buttons. Heres and example

  <TouchableOpacity
    style={{borderColor:"red",width:50,backgroundColor:"red",borderRadius:100}}
    onPress={onPress}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>

You can tune the width and borderRadius to get a proper circle