Develop Reference

having trouble passing margins to Material UI using styles

I am having trouble passing margin using mui styles to my components. Other styles are being passed just fine however when I try margins they do not seem to be applied to my site.
const useStyles = makeStyles({
tool: {
width:'100%',
display: 'inline-flex',
justifyContent: 'space-between',
},
lastBtn: {
marginLeft: 10,
marginRight: 50,
}
})
This is the definition before my function. Inside my function I have definted classes the following way.
const classes = useStyles();
Inside my main component i added
className={classes.root}
and it works just fine, so I know the issue is not styles hook. However the issue is that the same logic is not working for the button component. When I try doing the margins are not being applied.
<Button
className={classes.lastBtn}
variant='contained'
size='large'
onClick={() => navigate("/register")}
>
Register
</Button>
When i try to replace the styles hook declared earlier it is working just fine.
style={{ marginLeft: 10, marginRight: 50}}
Can anyone spot the mistake I am making? I have done tons of research and I am stuck with debugging this. It is very inefficient to use inline styling to create margins for my whole project.
Thank you

React Native - Keyboard covers bottom part of the input

In my app keyboard covers only bottom part of the text input. I have tried several ways to solve this by changing styles by adding padding or margin, and also KeyboardAvoidingView didn't help.
Another problem is that keyboard shifts the whole screen and header becomes invisible as it goes above.
Edit: It works fine on IOS devices.
How can I fix these problems?
Thanks
Code:
<>
<CustomHeader title={item.title}
leftChild={<SvgImageComp name={MENU_ICON}/>}
centerChild={
<TextComp text={'Title'} style={compStyle.title}/>
}
/>
<View style={{
flex: 1,
justifyContent: 'flex-end'
}}>
<KeyboardAvoidingView
behavior={"height"}
>
<TextInputComp fontFamily={NUNITO_SANS_REGULAR}
fontSize={15}
lineHeight={20}
autoFocus={true}
style={{
paddingVertical: 10,
paddingHorizontal: 20,
borderWidth: 1,
borderColor: '#000',
borderRadius: 200,
}}
/>
</KeyboardAvoidingView>
</View>
</>

For Android you don't need to pass behavior to KeyboardAvoidingView. For IOS you need to pass behavior="position" and keyboardVerticalOffset=[height of your input].
<KeyboardAvoidingView
{...(Platform.OS === 'ios'
? {
behavior: 'position' ,
keyboardVerticalOffset: [inputHeight], // calculate height using onLayout callback method
}
: {})}>

I avoid this issue by wrapping the screen in <ScrollView contentContainerStyle={flexGrow: 1}><ScrollView> This will make the whole screen turn into a scroll view once the keyboard opens. Allowing the box to be out of the way of the keyboard. This also has the added benefit of allowing you to scroll to other sections of the screen for reference while the keyboard stays open.

ScrollView rounded corners

I made a custom Image swiper withe ScrollView in React Native, but it looks bad when images with rounded corners move. Is there any way to round the corners of the ScrollView?
Those are my ScrollView styles:
style={{
flexDirection: 'row', alignSelf: 'center',
width: this.state.imageWidth,
borderRadius: 20,
}}

ScrollView also inherits styles from ViewStyles so you can pass borderRadius: 20 to it.

Custom styling for MenuOption in React native popup menu

So I'm new to React (and JavaScript too for that matter). I'm creating an App using react native and currently trying to style my popup menu. (which looks like this: Popup menu image)
I want to change the style of the options (make the font size bigger and space them out and change the font color too). My code looks something like this:
<MenuProvider>
<Menu >
<MenuTrigger>
<Image
style={styles.menucontainer}
resizeMode="contain"
source={require('../assets/icon_more.png')}>
</Image>
</MenuTrigger>
<MenuOptions optionsContainerStyle={styles.optionsstyle}>
<MenuOption text= 'About' />
<MenuOption text= 'Help & Feedback'/>
<MenuOption text= 'Sign Out'/>
</MenuOptions>
</Menu>
</MenuProvider>
After checking
https://github.com/instea/react-native-popup-menu/blob/master/src/MenuOption.js
I found a prop customStyles. Just like I passed a styling object for MenuOptions as prop optionContainerStyle, I tried passing customStyles for MenuOption but that produced an error:
In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.
Here is my styles code:
const styles = StyleSheet.create({
optionsstyle:{
marginTop: height*32/dev_dimension.h,
marginLeft: width*184/dev_dimension.w,
backgroundColor: '#fafafa',
width: width*168/dev_dimension.w,
height: height*160/dev_dimension.h,
flexDirection: 'row',
flex: 1,
justifyContent: 'space-between',
},
});
Can anyone tell what I'm doing wrong?

According to documentation the optionsContainerStyle are deprecated and I am not sure if they work properly. Try to use customStyles props instead as seen in StylingExample where you can find full example.
The thing is that customStyles is map of styles for different parts. Something like
<MenuOptions customStyles={{optionWrapper: { padding: 5}, optionText: styles.text}}>

React material-ui: centering items on Toolbar

I am trying to implement a toolbar on a page in which I have three ToolbarGroup components:
<Toolbar>
<ToolbarGroup firstChild={true} float="left">
{prevButton}
</ToolbarGroup>
<ToolbarGroup>
{releaseBtn}
</ToolbarGroup>
<ToolbarGroup lastChild={true} float="right">
{nextButton}
</ToolbarGroup>
</Toolbar>
The general idea is that prevButton should render all the way to the left of the toolbar (it does), nextButton should render all the way to the right (it does)... and that releaseBtn should be centered on the toolbar (not currently happening).
Per the material-ui docs there doesn't appear to be some easy setting for centered={true}-- how can I accomplish this?
I've tried manually setting the style on the middle ToolbarGroup to margin: 0px auto but that doesn't seem to help.

If anyone runs into this in 2021 or later like I did, material-ui's Toolbar uses Flexbox under the hood, so all you have to do is apply a custom class (or override the default one in the theme):
.myToolbar {
justify-content: space-between;
}
space-between will distribute the children alongside the main horizontal axis:
(picture from https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

The final solution for me was to do this:
<Toolbar>
<ToolbarGroup firstChild={true} float="left">
{prevButton}
</ToolbarGroup>
<ToolbarGroup style={{
float : 'none',
width : '200px',
marginLeft : 'auto',
marginRight : 'auto'
}}>
{releaseBtn}
</ToolbarGroup>
<ToolbarGroup lastChild={true} float="right">
{nextButton}
</ToolbarGroup>
</Toolbar>
I first had to set the middle ToolbarGroup with no float (not an option through the material-ui props) and then play with the width/margins. I imagine your mileage may vary depending on what you shove inside the ToolbarGroup.

In new versions of Material UI you can just use the sx prop:
https://mui.com/system/the-sx-prop/#main-content
<Toolbar sx={{ justifyContent: "space-between" }}> // or "center" for a single element
...
</Toolbar>