How to customize button of react native

Question

I am trying to make my application button in react-native like below

I am using inbuilt Button view of react native where I see that it does not allow to change the height also. I want to change the height as well rounded like expected image.

This is how my button is looking :

  <Button
    title="CONTINUE"
    color="#FE434C"
    onPress={() => navigate("EnableNotification")}
  />

What i usually do is avoid using the button view and use a TouchableOpacity implementation. In your instance id fill it with a red view, then set borderRadius = 15 or so. Interested to see if there is a better way. Try setting style = borderRadius 15 and see if that works — Ryan Turnbull
– Ryan Turnbull, Commented Apr 25, 2017 at 9:21
I have tried <Button title="ENABLE NOTIFICATION" color="#FE434C" onPress={null} style={{ borderRadius: 40 }} /> but it not making buttons rounded — N Sharma
– N Sharma, Commented Apr 25, 2017 at 9:28
Documentation does not have borderRadius attribute facebook.github.io/react-native/docs/button.html — N Sharma
– N Sharma, Commented Apr 25, 2017 at 9:41

Orlyyn · Accepted Answer · 2021-05-29 10:43:57Z

18

So this is what I usually do:

<TouchableOpacity onPress={() => {/* do this */}}>
  <View style={{
      backgroundColor: 'red',
      alignItems: 'center', 
      justifyContent: 'center',
      borderRadius: 15
    }}
  >
    <Text style={{ color: 'white' }}>Button</Text>
  </View>
</TouchableOpacity>

I find using this method makes buttons much more customisable, but if you do some digging there could be a library which implements something similar (I never really found the need to search for it).

NOTE: Obviously you will have to adjust the height/width of the button to your flavor.

EDIT: My mistake... I had put the onPress prop in the view, woops.

edited May 29, 2021 at 10:43

Orlyyn

2,6222 gold badges25 silver badges40 bronze badges

answered Apr 25, 2017 at 9:55

Ryan Turnbull

3,9741 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

N Sharma Over a year ago

I find this is good to go. Thanks :) How to set height here ?

Ryan Turnbull Over a year ago

Do so in the <View style = {{height: ...}}> area. I'd suggest looking into flex-box however, which is great for multiple screen-sizes.

N Sharma Over a year ago

Now I see click is not working onPress={() => navigate("EnableNotification")}

Ryan Turnbull Over a year ago

@Williams im guessing navigate is a function in your component? If so use onPress={() => {this.navigate("EnableNotifcation")}

Ryan Turnbull Over a year ago

@stakantin TouchableOpacity has a disabled prop

|

JulienRioux · Accepted Answer · 2018-07-10 18:29:31Z

Here is my solution to easily style buttons using TouchableOpacity, Text and StyleSheet:

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

export default class CustomButton extends Component {
  render(){
    return (
      <View style={styles.container}>

        /* Custom Button */
        <TouchableOpacity
          style={styles.customBtnBG}
          onPress={() => {}}  >
          <Text style={styles.customBtnText}>Button</Text>
        </TouchableOpacity>

      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
        justifyContent: "center",
    alignItems: "center"
  },

  /* Here, style the text of your button */
    customBtnText: {
        fontSize: 40,
        fontWeight: '400',
        color: "#fff",
    },

  /* Here, style the background of your button */
    customBtnBG: {
    backgroundColor: "#007aff",
    paddingHorizontal: 30,
    paddingVertical: 5,
    borderRadius: 30
    }
});

samtax01 · Accepted Answer · 2019-09-02 13:02:41Z

1

@Ryan Turnbull, Well, i think a little padding and fontSize will do.

<TouchableOpacity onPress={() => this.onLogin()}>
  <View
    style={{
      backgroundColor: 'black',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 15,
      padding: 15,
    }}>
    <Text style={{color: 'white', fontSize: 20, fontWeight: '800'}}>
      Button
    </Text>
  </View>
</TouchableOpacity>

answered Sep 2, 2019 at 13:02

samtax01

9501 gold badge9 silver badges13 bronze badges

Comments

Mangus K. · Accepted Answer · 2020-08-18 05:21:53Z

1

<TouchableOpacity onPress = {() => {/* do this */}}>
<View style = {{backgroundColor: 'red', alignItems: 'center', 
                justifyContent: 'center', borderRadius: 15}}
       >
    <Text style = {{color: 'white'}}>Button</Text>
</View>

answered Aug 18, 2020 at 5:21

Mangus K.

112 bronze badges

Comments

UdayanBKamble · Accepted Answer · 2021-06-05 17:11:10Z

In React-native, we can customise user defined button component and call it from anywhere. So that we can have structured approach throughout the program or application.

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

const MyButton = props => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
    >
      <View style={{...styles.buttonStyle, ...props.style,
         backgroundColor:props.buttonColor, 
         borderColor:props.buttonColor}}>
        <Text style={{...styles.TextStyle, ...props.style, 
          color:props.fontColor}}>
          {props.children}
        </Text>
      </View>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  buttonStyle: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 10,
    borderWidth: 2,
  },
  TextStyle: {
    textAlign: "center",
  },
});
export default MyButton;

In style ... spread operator is used to integrate all the styles from same components and incoming styles from parent component through props.

props.children is used here to pass button title, so that title text is displayed on the button.

When button is pressed then instead of handling this press event inside of the button but inside of the component where we use this button. So we pass a fitting function reference on the button.

This MyButton button component can be called anywhere inside the program like:

<MyButton onPress={() => onPressFunction()}
 buttonColor="red" fontColor="white">Button Title</MyButton>

user4636003 · Accepted Answer · 2019-07-15 09:23:32Z

0

You can use Touchable Opacity and it's prop border radius to adjust it's curve.

https://facebook.github.io/react-native/docs/touchableopacity

answered Jul 15, 2019 at 9:23

user4636003

Comments

SDushan · Accepted Answer · 2018-07-12 09:06:50Z

-2

You can use this library https://github.com/APSL/react-native-button to create a customizable button in react native.

<View>
    <Button
        style={{
            backgroundColor: "#FE434C",
            borderColor: "transparent",
            borderRadius: 20,
            width: 250,
            height: 50,
        }}
        textStyle={{ color: "#FFFFFF" }}
        onPress={() => { }}
    >
        CONTINUE
  </Button>
</View>

edited Jul 12, 2018 at 9:06

answered Jul 11, 2018 at 11:05

SDushan

4,6512 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to customize button of react native

7 Answers 7

11 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

11 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related