CODEWITHSUNDEEP
reactjsnative
Gisa
Gisa

Reputation: 473

change button color react native

I want to simply change the color of the button, but i can't. I tried to change directly in the button, and pass a style to it. But neither of them worked. Here's my very simple code.

 export default class Dots extends Component {
  render() {
    return (
      <Image style={styles.container}  source={require('./background3.png')}>
      <Button title='play' style = {{color:'red'}}/>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:'transparent',
    resizeMode:'cover',
    justifyContent:'center',
    alignItems:'center',
    width:null,
    height:null
  },

  button:{
  backgroundColor:'#ff5c5c',
  }

});

Upvotes: 47

Views: 135813

Answers (4)

Manuel
Manuel

Reputation: 1

You can make it like this

<Button title="Hello World!" buttonStyle={styles.btnstylehere}/>

 const styles = StyleSheet.create({
 btnstylehere:{
        width: 75,
        height: 75,
        borderRadius: 0,
        backgroundColor: '#000',
        color: '#fff'

    }
})

Upvotes: -1

Aaron Ebinezer
Aaron Ebinezer

Reputation: 139

Yes button does not respond to styles. But alternative solution is that we can use react-native-element component.

First install the packages which is mentioned below

npm install react-native-elements npm i react-native-linear-gradient npm i react-native-vector-icons

And then import the packages to your code

    import { Button } from 'react-native-elements';
    import LinearGradient from 'react-native-linear-gradient';
    import Icon from 'react-native-vector-icons/FontAwesome';

    <Button ViewComponent={LinearGradient} // Don't forget this!
    linearGradientProps={{
    colors: ['#ffffff','blue', 'grey'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
    }} onPress={()=> this.props.navigation.navigate('First')} title="Click me"/>

For more info here is the link: https://react-native-elements.github.io/react-native-elements/docs/button.html

Upvotes: 4

Luchian Chivoiu
Luchian Chivoiu

Reputation: 331

I think it is definitely better to use TouchableOpacity instead of Button tag as Button is creating styling discrepancies in Android and iOS platforms .

You can use the code below and it looks very similar to a button and it acts like one:

 <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})

Upvotes: 12

Kevin Velasco
Kevin Velasco

Reputation: 4944

The react Button component renders the native button on each platform it uses. Because of this, it does not respond to the style prop. It has its own set of props.

The correct way to use it would have been

<Button color="#ff5c5c" title="I'm a button!" />

You can see the documentation at https://facebook.github.io/react-native/docs/button.html

Now, say you do want to make super customizable button, for that you'll have to use views and touchable opacity. Something along the lines of this.

<TouchableOpacity onPress={...}>
  {... button markup}
</TouchableOpacity>

You'll wrap that up in your own button component and use it.

Upvotes: 64

Related Questions