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:-

`Button` do you use custom component or react button component? — Sagar Khatri, Apr 24 '17 at 10:20

score 138 · Answer 1 · edited Jul 05 '21 at 00:38

138

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 :-)

edited Jul 05 '21 at 00:38

stuckoverflow

625
2
7
23

answered Jul 06 '17 at 09:32

Plaul

7,191
5
19
22

21

A working example with TouchableOpacity would be great. – mayid Sep 10 '17 at 21:40
3

hi..can you pls explain why button dont have style props? – Tunvir Rahman Tusher May 24 '18 at 03:36
1

[From the docs](//facebook.github.io/react-native/docs/button): "If this button doesn't look right for your app, you can build your own button using [TouchableOpacity](/facebook.github.io/react-native/docs/touchableopacity) or [TouchableNativeFeedback](//facebook.github.io/react-native/docs/touchablenativefeedback). For inspiration, look at the [source code for this button component](//github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button)." – Andre Figueiredo Oct 06 '18 at 14:36

score 50 · Answer 2 · edited Aug 16 '18 at 17:46

50

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>

edited Aug 16 '18 at 17:46

Brandon Culley

5,219
1
28
28

answered Feb 04 '18 at 04:29

Hitesh Sahu

41,955
17
205
154

It works for some cases, such adding a "box shadow", it's then an overkill to create an own button. Sadly the way to go is creating the own button if one want to style the button itself such as dimensions, padding, text appearance, etc... – Andre Figueiredo Oct 06 '18 at 16:34

score 19 · Answer 3 · edited Aug 16 '18 at 19:24

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)

Thanks, this works! Depressed to see that we need to install a library to work with a button. — , Mar 21 '21 at 23:18

score 13 · Answer 4 · answered Dec 31 '17 at 12:56

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>

score 10 · Answer 5 · answered Oct 09 '18 at 06:37

10

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 >

answered Oct 09 '18 at 06:37

S.Saderi

4,755
3
21
23

score 7 · Answer 6 · answered Sep 29 '21 at 10:45

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,
  },
});

score 3 · Answer 7 · edited Aug 16 '18 at 16:08

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

score 3 · Answer 8 · answered Nov 03 '21 at 08:21

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

score 2 · Answer 9 · edited Feb 20 '19 at 13:18

2

Try This one

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

edited Feb 20 '19 at 13:18

robbannn

5,001
1
32
47

answered Jul 24 '18 at 10:56

Karan Chunara

518
4
15

score 1 · Answer 10 · answered Apr 23 '19 at 16:00

1

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

answered Apr 23 '19 at 16:00

sayingu

2,261
3
19
26

Irfan wani · Answer 11 · 2021-09-26T09:12:50.807

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

Ambreen Zubari · Answer 12 · 2021-09-09T12:07:10.907

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

score 1 · Answer 13 · answered Sep 09 '21 at 08:45

1

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

answered Sep 09 '21 at 08:45

Vikash Sharma

51
1

score 1 · Answer 14 · answered Oct 19 '22 at 10:39

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>

score -2 · Answer 15 · answered Oct 08 '19 at 14:09

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.

React-Native Button style not work

Import_this

Update Question:

Style

15 Answers15

Linked

Related