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

Displaying API response array object in React application

What is the best way to modify the font color of DialogTitle and DialogContent in Material UI within a react.js environment?

Troubleshooting: Angular Custom Elements malfunction on Firefox, Microsoft Edge, and Internet Explorer

The input field malfunctioned after the clear button was pressed

Leverage the `dispatch` hook within a useEffect function

The MUI theme seems to be missing its application

Asynchronous operations in Node.js with Express

"Upon calling prefetchInfiniteQuery, the function yields a result of

Sending a string of HTML elements to a Vue custom directive is causing problems with the eslint code analysis

Using jQuery's .load() method to load a PHP file can result in an exponential increase in XHR finished loading time with each subsequent load

Activate a function in the parent component to initiate the componentDidMount lifecycle method in the child component

Dynamic binding in AngularJS with ng-repeat allows for seamless updating of data

The test suite encountered an error (EBUSY: resource busy or locked) and unfortunately failed to run at Nx version 14.5.10 and Jest version 27.5.1. It seems there was an

What is the best way to address caching fonts and files within CSS?

Inline CSS alignment

The functionality of the Bootstrap tabbed pane is not functioning correctly

Creating specific CSS classes for individual slides in a basic slider framework

Introduction to AJAX: Conditional Statements

What is the best way to loop through the contents of this JSON document?

Limit the types of components allowed as children in a React component by utilizing TypeScript