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

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>

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                 lt TouchableHighlight                  style                         height  40                      width 160                      borderRadius 10                      backgroundColor    yellow                       marginLeft  50                      marginRight 50                      marginTop  20                    gt               lt Button onPress  this  onPressButton                          title  SAVE              accessibilityLabel  Learn more about this button              gt              lt  TouchableHighlight gt     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

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

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

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

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

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

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

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

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  -

[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