How to create round button with text inside

user_8918662 0
Viewed 10942

How to create round button with text or char inside. It should look like this: It should look like this, image below:

img example

So far I made this, but it's not so round:

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Icon from 'react-native-vector-icons/FontAwesome'; // 4.4.2

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => null}>
                <Icon
                  name="chevron-left"
                  icon={{ name: 'rss', type: 'font-awesome' }}
                  style={styles.button}
                  size={25}
                />
              </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  button: {
    padding: 25,
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 50,
  },
});
react-native css
2 Answers
<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>
user_79814780

Create a button that is square all the time, than add border-radius: 50; I suggest you go with some min-width / width or padding on it. You don't need to add height;

button {
  background: red;
  border: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; 
}

button::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
<button>test</button>

user_64791120
Related