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       lt Button   onPress  this onPress bind this      title   Go Back     style   color   red   marginTop  10  padding  10     gt    Also I was try by this code    lt 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          gt  Press me   lt  Button gt    Update Question   Also I was try by This way     lt Button     onPress  this onPress bind this       title   Go Back       style  styles buttonStyle   gt ku ka lt  Button gt    Style  const styles   StyleSheet create       buttonStyle            color   red           marginTop  20          padding  20          backgroundColor   green              But No out put   Screenshot  of my phone -

User · Answer

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)

User · Answer

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  lt Button gt txt lt  Button gt  but via the title property  lt Button title  txt    gt   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  -

User · Answer

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    lt View style   flexDirection   row    gt       lt View style   flex 1   marginRight 10    gt           lt Button title  Save  onPress       gt      gt  lt  Button gt       lt  View gt       lt View style   flex 1    gt           lt Button title  Cancel  onPress       gt      gt  lt  Button gt       lt  View gt   lt  View gt

User · Answer

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     gt           title   Cool View         headerRight    lt View style   marginRight  16   gt  lt Button         title  Cool          onPress       gt  alert  cool            gt  lt  View gt

User · Answer

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

User · Answer

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

User · Answer

As the answer by  plaul mentions TouchableOpacity  here is an example of how you can use that     lt TouchableOpacity     style  someStyles      onPress  doSomething     gt       lt Text gt Press Here lt  Text gt     lt  TouchableOpacity gt

User · Answer

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    lt View style   margin 10   gt   lt Button   title  Decrypt Data    color  orange    accessibilityLabel  Tap to Decrypt Data    onPress       gt        Alert alert  You tapped the Decrypt button              gt     lt  View gt

User · Answer

Instead of using button   you can use Text in react native and then make in touchable    lt TouchableOpacity onPress  this  onPressButton  gt       lt Text style     your custome style   gt         button name     lt  Text gt   lt  TouchableOpacity  gt

User · Answer

Try This one   lt TouchableOpacity onPress       gt  this  onPressAppoimentButton    style  styles Btn  gt       lt Button title  Order Online  style  styles Btn   gt   lt  Button gt   lt  TouchableOpacity gt

[reactjs] React-Native Button style not work

Examples related to reactjs

Examples related to react-native

Examples related to jsx

Examples related to react-native-button