[Solved]-React-Native Button style not work-Reactjs

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.

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

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

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

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

try this one

<touchableopacity onpress={() => this._onpressappoimentbutton()} style={styles.btn}>
    <button title="order online" style={styles.btn} > </button>
</touchableopacity>

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

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

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

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 >

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>

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)

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>

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