[Solved] I want to make a circle with buttons in react native

by


Final result:

enter image description here

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.

2

solved I want to make a circle with buttons in react native