CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativemobile
Aman Mehta
Aman Mehta

Reputation: 23

Unable to create round shape button in react native

I want to create round shape button for my app which is build upon react native. I had tried the code below but both of them didn't work out for me.

Code snippet 1: <Button title="+" rounded="true"/>

Code snippet 2: addButton: { width: 20, height: 20, borderRadius: 40 }

Upvotes: 1

Views: 861

Answers (1)

bmovement
bmovement

Reputation: 867

Basically, you have to style up Views and Touchables to look like the button you want. Here's an example of a circular button component:

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export default ({ title, onPress }) => <TouchableOpacity onPress={onPress} style={styles.button}>
  <Text style={styles.title}>{title}</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color: 'white',
  }
})

Upvotes: 2

Related Questions