react native button style not working

Question

I'm using react native to create a test App, There is no effect on a button when I do styling. can anyone tell me what I am doing wrong. For example, I am trying to put red color to a button but it is not working. What can I do to make it right?

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'





class Home extends Component{

  static navigationOptions = {

   title:'Home'



  };

componentWillMount(){

  this.animatedValue = new Animated.ValueXY();
  this._value = {x:0 , y:0}
  this.animatedValue.addListener((value) => this._value = value);


this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {

this.animatedValue.setOffset({

x:this._value.x,
y:this._value.y,


})

this.animatedValue.setValue({x:0 , y:0})

      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 

      },       
})
}

  render(){

    var animatedStyle = {

      transform:this.animatedValue.getTranslateTransform()
    }

    return(

        <View style={styles.container}>


         <Button 
         style={styles.button}
         title="Login"
          onPress={() => this.props.navigation.navigate("Login")} />



        </View>
      )
  }
}

class Login extends Component{
   static navigationOptions = {  
   title:'Login'
  };
  render(){  
    return( 
        <View>
        <Text>home</Text>

        </View>
      )
  }
}

const App = StackNavigator({

Home:{ screen: Home},
Login:{ screen:Login}


});

var styles = StyleSheet.create({
  container: {



  },

  button:{


    color:'red'



  }
});


export default App

Answer 1

You cannot apply color to a button using stylesheet.

Checkout the link here

It has to be given inline. It is a property of button, its not like style attribute unlike tags like View and Text , where stylesheet applies.

If you give some style to your view container it will work, but not with button as its it not supported that way.

Solution :

    <View style={styles.container}>
      <Button 
       title="Login"
       color="red"
       onPress={() => this.props.navigation.navigate("Login")} />
    </View>

Hope that helps!

Answer 2

If your button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback . For inspiration, look at the source code for this button component . Or, take a look at the wide variety of button components built by the community .

Look this:

 <TouchableOpacity
   style={[styles.buttonLargeContainer, styles.primaryButton]}
   onPress={() => {}}>
  <Text style={styles.buttonText}>SEND TO AUCTION?</Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
buttonLargeContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10
  },
primaryButton: {
    backgroundColor: '#FF0017',
  },
buttonText: {
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold'
  }
})