React-Native Button style not work

Question

Import_this

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

This my React Button code But style not working Hare ...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

Also I was try by this code

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

Update Question:

Also I was try by This way..

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

Style

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

But No out put: Screenshot of my phone:-

Answer 1

The React Native Button is very limited in what you can do, see; Button

It does not have a style prop, and you don't set text the "web-way" like <Button>txt</Button> but via the title property <Button title="txt" />

If you want to have more control over the appearance you should use one of the TouchableXXXX' components like TouchableOpacity They are really easy to use :-)

Answer 2

I had an issue with margin and padding with a Button. I added Button inside a View component and apply your properties to the View.

<View style={{margin:10}}>
<Button
  title="Decrypt Data"
  color="orange"
  accessibilityLabel="Tap to Decrypt Data"
  onPress={() => {
    Alert.alert('You tapped the Decrypt button!');
  }}
  />  
</View>

Answer 3

React Native buttons are very limited in the option they provide.You can use TouchableHighlight or TouchableOpacity by styling these element and wrapping your buttons with it like this

             <TouchableHighlight 
                style ={{
                    height: 40,
                    width:160,
                    borderRadius:10,
                    backgroundColor : "yellow",
                    marginLeft :50,
                    marginRight:50,
                    marginTop :20
                }}>
            <Button onPress={this._onPressButton}            
            title="SAVE"
            accessibilityLabel="Learn more about this button"
          /> 
          </TouchableHighlight> 

You can also use react library for customised button .One nice library is react-native-button (https://www.npmjs.com/package/react-native-button)

Answer 4

If you do not want to create your own button component, a quick and dirty solution is to wrap the button in a view, which allows you to at least apply layout styling.

For example this would create a row of buttons:

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
        <Button title="Save" onPress={() => {}}></Button>
    </View>
    <View style={{flex:1}} >
        <Button title="Cancel" onPress={() => {}}></Button>
    </View>
</View>

Answer 5

Instead of using button . you can use Text in react native and then make in touchable

<TouchableOpacity onPress={this._onPressButton}> 
   <Text style = {'your custome style'}>
       button name
   </Text>
</TouchableOpacity >

Answer 6

Style in button will not work, You have to give style to the view.

<View style={styles.styleLoginBtn}>
          <Button
            color="orange" //button color
            onPress={this.onPressButton}
            title="Login"
          />
        </View>

Give this style to view

const styles = StyleSheet.create({
  styleLoginBtn: {
    marginTop: 30,
    marginLeft: 50,
    marginRight: 50,
    borderWidth: 2,
    borderRadius: 20,
    borderColor: "black", //button background/border color
    overflow: "hidden",
    marginBottom: 10,
  },
});

Answer 7

You can use Pressable with Text instead of button.

import { StyleSheet, Text, View, Pressable } from 'react-native';

<Pressable style={styles.button} onPress = {() => console.log("button pressed")}> 
  <Text style={styles.text}>Press me</Text>
</Pressable>

Example Style:

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'red'
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

Answer 8

Only learning myself, but wrapping in a View may allow you to add styles around the button.

const Stack = StackNavigator({
  Home: {
    screen: HomeView,
    navigationOptions: {
      title: 'Home View'
    }
  },
  CoolView: {
    screen: CoolView,
    navigationOptions: ({navigation}) => ({
      title: 'Cool View',
      headerRight: (<View style={{marginRight: 16}}><Button
        title="Cool"
        onPress={() => alert('cool')}
      /></View>
    )
    })
  }
})

Answer 9

Try This one

<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
    <Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>

Answer 10

We can use buttonStyle prop now.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

Answer 11

React-native button is very limited, it won't allow styling. use react native elements button or create custom button

Answer 12

button styles does'nt work in react-native, to style your button in react-native easy way is to put it inside the View block like this:

      <View
         style={styles.buttonStyle}>
         <Button
         title={"Sign Up"}
         color={"#F31801"}/>
      </View>

style.buttonStyle be like this:

style.buttonStyle{
        marginTop:30,
        marginLeft:50,
        marginRight:50,
        borderWidth:2,
        borderRadius:20,
        borderColor:'#F31801',
        overflow:"hidden",
        marginBottom:10,
}

, it will make you able to use designs with buttons

Answer 13

As the answer by @plaul mentions TouchableOpacity, here is an example of how you can use that;

  <TouchableOpacity
    style={someStyles}
    onPress={doSomething}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>

SUGGESTION:

I will recommend using react-native-paper components as they are modified and can be modified much more than react-native components.

To install; npm install react-native-paper

Then you can simply import them and use.

More details here Here

Answer 14

Wrap the button component inside a view component and change the styles of the view component, it should work. Please refer to the snippet below

     <View style={{width: 150, alignSelf: 'center'}}>
       <Button onPress={demoFunction} title="clickMe!!" />
     </View>

 

Answer 15

I know this is necro-posting, but I found a real easy way to just add the margin-top and margin-bottom to the button itself without having to build anything else.

When you create the styles, whether inline or by creating an object to pass, you can do this:

var buttonStyle = {
   marginTop: "1px",
   marginBottom: "1px"
}

It seems that adding the quotes around the value makes it work. I don't know if this is because it's a later version of React versus what was posted two years ago, but I know that it works now.