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
- Multiple conditions in return reactjs
- Webpack: Unknown property "query"?
- How to test sharing social media link preview on local environment?
- Exposing every component in Next.js app to custom hook on pageLoad
- setState in redux from fetch()
- How do I access refs of a child component in the parent component
- Stop Webcam in React Component in ComponentWillUnmount
- React not Finding <input/> Value in Submit Handler
- Authentication issue - previous user data is shown
- Not assignable to type IntrinsicAttributes & IntrinsicClassAttributes React.js
- React, variable speed Clock with setTimeout
- reactjs paging through the table
- Implementing conditional rendering - blank page being returned
- React routing with names instead of ids
- how to nested loop with many state variables into a table?
- i want to build sidebar on my own but the function don't work
- Fetching array of objects from api and storing to usestate but getting empty array
- Positioning form input in React
- antd form item validation fails if default value haven't been changed
- Using '>' Inside .innerHTML Causes Premature Closing Of HTML Statement
- Authentication component for ReactJs
- React form with Formik error : Each child in a list should have a unique "key" prop
- How do you insert a variable class name in Material UI?
- Nested menu (sub-menu)
- Getting null when accessing to HTMLcollection
- Call an action inside the redux reducer
- React Jest example doesn't work
- Color office-ui-fabric-react DetailsList Cell by its value
- React - set property of object by setState
- React Bootstrap + Formik - show errors after I click submit button