CODEWITHSUNDEEP
javascriptandroidcssreactjsreact-native
Vish_TS
Vish_TS

Reputation: 540

react native button style not working

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

Upvotes: 7

Views: 7463

Answers (2)

Sebasti&#225;n Lara
Sebasti&#225;n Lara

Reputation: 5541

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'
  }
})

Upvotes: 0

Prabodh M
Prabodh M

Reputation: 2252

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!

Upvotes: 6

Related Questions