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
- Property 'id' does not exist on type 'never'. on map function
- JavaScript preserver plain json object while saving to json file
- Data fetched from server not showing at frontend screen (MERN Stack)
- Is there a way to show single component in new tab using react-router?
- Logout button in custom usermenu does nothing
- some question about redux-toolkit redux-saga
- Change resultant's key name in cube.js
- React Redux Problem: How to call multiple api in your react component with React Redux Toolkit RTK queries?
- hiding react svg component with linearGradient in Header also hides the svg outside of Header
- Uncontrolled child component with styled-components
- React State Reverts to Previous When Navigating Away
- How can i generate a formatted random string using ReactJS
- React Dom Routes not working as intended, changes the path but nothing on the page
- How to mark clicked pin on react google map?
- Is there a way to have 2 onSubmit events in React?
- react.js render components at different locations
- i'm using context hooks to add item but I cant able to delete item and stuck here and don't know how to solve
- How to develop with Shopify's App Bridge while on localhost?
- function in a stateless componenet
- Error: Cannot read property 'UIAppFonts' of null
- Clear and reset user's JWT token in local storage with same action
- Private Component with a Private Route nested
- how to add custom css using react styled component
- React input doesn't type
- How do I configure .babelrc for react and jest testing framework?
- rendering a component repeatedly based on array fetched from API
- 'TypeError: Cannot read property of x of undefined' when passing data from parent to child component but others are working
- I want to POST from React to an API created in Golang
- The setFieldsValue method cannot be used when the antD4 form is reencapsulated
- Passing data target as a prop