CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Eunicorn
Eunicorn

Reputation: 621

React Native: Can't style the Button

I am quite new to React Native. I am familiar with React and use it for my work. React Native seems different in terms of applying styles to the components.

I am having issue applying styles to the button.

Here is my current code:

<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 }}
/>

I tried multiple ways, but the styles are not being applied the button that I have created.

Here is the screenshot of how it looks like: enter image description here

"Let's get started" is the button and no matter what it just has the default blue text. How can I fix this? Could anyone please help me with this?

Upvotes: 1

Views: 2203

Answers (3)

Mahdi Pourrostam
Mahdi Pourrostam

Reputation: 29

Use TouchableOpacity 

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
      },
    });

Upvotes: 0

Bk Santiago
Bk Santiago

Reputation: 1573

Button is very limited in react native. You can use TouchableOpacity instead to give you more flexibility See documentation here.

TouchableOpacity example:

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 also different kinds of "buttons" depending on what you need like TouchableHighlight, TouchableWithoutFeedback

Upvotes: 0

Isaac
Isaac

Reputation: 12874

Is your Button component imported from react-native? If yes then you can't style it because as stated on their documentation, below are the supported props, buttonStyle is not supported prop. Alternatively, maybe you can try other packages like Button from react-native-elements or NativeBase

  • onPress
  • title
  • accessibilityLabel
  • color
  • disabled
  • testID
  • hasTVPreferredFocus

Upvotes: 1

Related Questions