score:-2
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.
score:1
We can use buttonStyle
prop now.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle
score:1
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
score:1
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
React-native button is very limited, it won't allow styling. use react native elements button or create custom button
score:2
Try This one
<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
<Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>
score:2
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:3
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: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,
},
});
score: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 >
score:12
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:16
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)
score:46
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>
score:132
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 :-)
Source: stackoverflow.com
Related Query
- react native button style not working
- React-Native Button style not work
- Change button style on press in React Native
- How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
- TouchableOpacity and button not working in react native Modal?
- React Native UI components: RCTBubblingEventBlock/RCTDirectEventBlock do not seem to work
- stop setInterval and if not work in react native function
- Button text not aligned center vertically in react native
- React Native Reload and Dev Tools Do Not Work
- Back button not working in react native navigation
- React Native Button onPress is not working
- Hover style '&:hover:{ }' doesn't work for the button within react component
- disabled={true} HTML button attribute does not work right in JavaScript + React
- Button does not work using function component in react
- Custom font not applying React Native Elements Button component
- My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually
- CSS style is not applying to button in React component
- REACT : change button color when active does not work
- Event listener for button does not work unless page is refreshed in React
- Customized Radio Button Input does not work as supposed to, on re-render in react
- custom css style not work in React Bootstrap
- Why does my react button work with an arrow function, but not when I give it a function?
- One function does not work inside another in React Native
- React scroll to top animation button does not work
- trying to render a button for a portal in react and get this error: × TypeError: Object(...) is not a function on the modalwrapper style
- Clicking the button does not work - React
- React inline style - style prop expects a mapping from style properties to values, not a string
- React Native Error - yarn' is not recognized as an internal or external command
- Why does React Native not offer a justify-self
- React Native / Xcode Upgrade and now RCTConvert.h not found
More Query from same tag
- useContext returning undefined values
- Botframework with Reactjs is not working on IE11
- React select - different labels for dropdown list and for input field
- Google Marker animation change
- Make conditional react component rerender after boolean changes
- Trying to write a function inside a React component that truncates a string of text and adds an ellipsis after 15 words
- Antd Menu - React Js
- Adding custom colors to palette gives Object is possibly 'undefined'. TS2532
- React - How to share Child component states with Parent?
- Toggle one list item at a time with React/TS functional components
- How to fix react auto scroll issue?
- Bulma Select form element - how to detect "select" or change event when an option is selected
- Use Material Design Icons in NPM Electron React project
- Strip tag from text (in React JS)
- How to detect if screen size has changed to mobile in React?
- Add/remove object from redux store on one click
- How do you change URI and display results - using Algolia
- What's the best way to test the child of a child?
- Visual Studio 2012 Express: Browser returning 500 status trying to download jsx file
- How can I use createContext with TypeScript?
- docker-compose up stuck on attaching to
- How to insert one component to another component onclick in reactjs?
- How to check to see if a scrollbar is present in React?
- React redux props lifecycle issue
- Jest/Enzyme test throws error when using hooks
- Fetch SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
- Marerial Table select menu is connected to each row?
- How to make automation increment number column in datatable using typescript react?
- How to efficiently pass the same "prop" to every stateless presentation component?
- Exclude specific file from webpack bundle