Geek Answers Handbook

Change button color change

I want to just change the color of the button, but I can’t. I tried to go directly to the button and pass the style to it. But not one of them worked. Here is 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', } });
+18
reactjs native
source share
3 answers

The Responsive Button component displays its own button on each platform used. Because of this, it does not respond to the style support. He has his own set of props.

The correct way to use it would be

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

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

Now, let's say you want to make a super custom button, for this you have to use views and transparency. Something like that.

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

You wrap this in your own button component and use it.

+26
source share

I think it is definitely better to use TouchableOpacity instead of the Button tag, since Button creates style differences on Android and iOS platforms.

You can use the code below and it looks very much like a button and acts as a unit:

  <TouchableOpacity style={styles.button} onPress={this.onPress} > <Text> Touch Here </Text> </TouchableOpacity> const styles = StyleSheet.create({ button: { alignItems: 'center', backgroundColor: '#DDDDDD', padding: 10 } })
+1
source share

The Yes button does not respond to styles. But an alternative solution is that we can use a component of the reaction-native element.

Install the packages mentioned below first.

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

And then import the packages into 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 information, here is the link: https://react-native-elements.imtqy.com/react-native-elements/docs/button.html

0
source share

More articles:


All Articles