React Native: Struggling with Button Styling

Question

React Native: Struggling with Button Styling

I am relatively new to React Native, although I have experience with React in my professional work. I'm finding that applying styles to components in React Native is a bit different than what I'm used to.

Specifically, I am struggling to apply styles to a button component.

Below is the code snippet I am currently working with:

<Button
  title="LET'S GET STARTED"

  onPress={() => {
    console.log('You tapped the Decrypt button!');
  }}
  buttonStyle={{
    backgroundColor: "#0A6ABB",
    width: 300,
    height: 45,
    borderColor: "#FFFFFF",
    borderWidth: 2,
    borderRadius: 5
  }}
  containerStyle={{ marginTop: 50 }}
/>

Despite trying various methods, I can't seem to get the styles to apply to my button as intended.

Here is a screenshot showing how it currently appears: https://i.stack.imgur.com/MEhpI.png

The text on the "Let's get started" button remains default blue, regardless of my styling attempts. Can someone please advise me on how to resolve this issue? Your help would be greatly appreciated.

javascript css reactjs react-native

Answer 1

Answer №1

Have you imported the Button component from react-native? If so, styling it may not be possible according to their documentation. The supported props listed do not include buttonStyle. You could consider using alternatives such as the Button component from react-native-elements or NativeBase

onPress
title
accessibilityLabel
color
disabled
testID
hasTVPreferredFocus

Answer 2

Have you imported the Button component from react-native? If so, styling it may not be possible according to their documentation. The supported props listed do not include buttonStyle. You could consider using alternatives such as the Button component from react-native-elements or NativeBase

onPress
title
accessibilityLabel
color
disabled
testID
hasTVPreferredFocus

Answer 3

Answer №2

Button has some limitations in react native, but you can use TouchableOpacity for more flexibility. Check out the documentation here.

Here's an example of using TouchableOpacity:

render () {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={this.onPress} >
      <Text> LETS GET STARTED </Text>
    </TouchableOpacity>
  )
}
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  },
});

There are other types of "buttons" available as well, like TouchableHighlight and TouchableWithoutFeedback.

Answer 4

Button has some limitations in react native, but you can use TouchableOpacity for more flexibility. Check out the documentation here.

Here's an example of using TouchableOpacity:

render () {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={this.onPress} >
      <Text> LETS GET STARTED </Text>
    </TouchableOpacity>
  )
}
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  },
});

There are other types of "buttons" available as well, like TouchableHighlight and TouchableWithoutFeedback.

Answer 5

Answer №3

To implement a touchable button, utilize the TouchableOpacity component.


import { StyleSheet, TouchableOpacity, Text }

render() {
      return (
        <TouchableOpacity
          style={styles.button}
          onPress={() => { console.log('You tapped the Decrypt button!'); }}
        >
          <Text> LET'S GET STARTED </Text>
        </TouchableOpacity>
      )
    }

const styles = StyleSheet.create({
      button: {
        alignItems: 'center',
        backgroundColor: "#0A6ABB",
        width: 300,
        height: 45,
        borderColor: "#FFFFFF",
        borderWidth: 2,
        borderRadius: 5,
        marginTop: 50
      },
    });

Answer 6

To implement a touchable button, utilize the TouchableOpacity component.


import { StyleSheet, TouchableOpacity, Text }

render() {
      return (
        <TouchableOpacity
          style={styles.button}
          onPress={() => { console.log('You tapped the Decrypt button!'); }}
        >
          <Text> LET'S GET STARTED </Text>
        </TouchableOpacity>
      )
    }

const styles = StyleSheet.create({
      button: {
        alignItems: 'center',
        backgroundColor: "#0A6ABB",
        width: 300,
        height: 45,
        borderColor: "#FFFFFF",
        borderWidth: 2,
        borderRadius: 5,
        marginTop: 50
      },
    });

React Native: Struggling with Button Styling

Answer №1

Answer №2

Answer №3

Similar questions

Generating a new object from a TypeScript class using JavaScript

How can I remove the div container every time the submit button is clicked?

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

The dependency tree could not be resolved by ERESOLVE during the installation of the npm package react-alert

Enabling ng-disabled within an ng-repeat loop

Loading a different webpage seamlessly without having to reload the current one

Containerize a ReactJS application and a Node/Express application integrated with AWS services

Showing a collection of articles on a webpage using Nuxt/content - Step by step guide

Tips for moving a polygon while dragging a marker within its boundaries

What is the best way to showcase my customized license plate on the following page?

Creating a dynamic image slider that smoothly glides across a webpage

Ways to retrieve text like innerText that functions across all web browsers

When a number is added to an array containing strings, the result is a string rather than a number

Utilize a Web Api controller to authenticate and verify the data input in

I would like for my element to increase and decrease in size while rotating when the button is clicked

Is a preloader needed in a Vue.js app?

Creating responsive tabs that transition into a drop-down menu for mobile devices is a useful feature for

creating a mixin for a box-shadow value of none in LESS CSS

Switch up the color of the following-mouse-div in real-time to perfectly complement the color that lies underneath it

Please ensure that the menu is included within the HTML file