Figure, why setting the justifyContent property does not work?
When you are in a container that has the flex direction set to 'row' then justify-content actually sets the location horizontally instead of vertically. So in this case you would use alignItems. Since the RN implementation of flexbox is pretty close to the standard baring a few naming differences ('flexDirection' instead of 'flex-direction', etc) I would recommend working your way through the tutorial at http://flexboxfroggy.com/. Level 10 actually shows an example of the issue you are encountering here.
try to add alignItems: 'center'
Related
I am learning react native for a few weeks and I made a screen and it looks good on my android emulator but when I look at it on my android phone somethings are out of place like icons or borders. I think It is about diffrent sizes of screens. Any idea how to fix this?
https://i.stack.imgur.com/rzhYn.jpg
https://i.stack.imgur.com/mhU2R.png
Yes, It could be.
You can avoid this in multiple ways.
Use dimensions, and get width and height based on the phone
https://reactnative.dev/docs/dimensions
or
https://www.npmjs.com/package/react-native-responsive-screen
For font size you can use this:
https://www.npmjs.com/package/react-native-responsive-fontsize
You have to make sure a few things while developing a component or when you style it:
Try to avoid fixed width/height or placement. Let the content grow the height of the box.
Either use flex or percentage width.
In your example, what I can see is the icon is going over the boundary of the box. To give a simple example, if you want to show a text on the left and say image on the right, use styles like this:
<View style={{display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
<Text>Hi</Text>
<Image/>
</View>
I just can set basic color which is static, doesnt change.
Also how can I do the borderRadius part, since i made two different View's.
On here, i just use this code for the color
<View style={{ paddingHorizontal: 20, backgroundColor: "#3DB4EE" }}>
Here is how my app looks:
And here is how i want it to be seen:
There's an easy way and a hard way:
Hard Way:
Use radial-gradient CSS property, here's an example: is it possible to do a curved line with css gradient?
Easy Way:
Get an Image designed with the same background and set as background-image
It's not possible without adding library and there for you have to use https://github.com/react-native-linear-gradient/react-native-linear-gradient
For border radius of white background you have to use style property borderTopLeftRadius and borderTopRightRadius
Im trying to make a dropdown similar to the image below and im wondering if such a thing is possible. That is because:
overflow defaults to hidden on android and that since zIndex doesnt work all that well.
zIndex doenst work all that well, views need to be in the proper order in order to draw over others normally
The only scenario that i can think of to make this work right now is to use something like onLayout and manually calculate the position of where it is that the dropdown needs to display and then render it at the top level in absolute positioning. I worry this might look rather hybrid-y but havent tried it yet.
Other ideas?
You can definitely use zIndex to achieve this behavior, but zIndex has to be applied to adjacent views to work cross platform:
render(){
return (
<View style={{ flex: 1, alignItems: 'flex-start' }}>
<View style={{ zIndex: 2 }}>
<YourDropdownButton />
</View>
<View style={{ zIndex: 1 }}>
<YourNormalButton />
</View>
</View>
)
}
Here is a snack showcasing this with my own custom drop down
Why wouldn't you use the native dropdown, it renders correctly and works as intended on all platforms?
Either way, you can always position it absolutely yes. I've done something like this and it works, but you can have some glitches if the list gets longer and it needs to scroll. Also, you would have to implement proper closing (clicking outside, and on the main element, closing after choosing the options. etc).
In React-native 0.39,
I often get this error but I don't really understand why (appart the fact that I didn't set flexGrow...).
Here is the error from the console
View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6080005a02a0; viewName: RCTView; reactTag: 2608; frame: {{0, 0}, {nan, nan}}>
Can someone explain to me why this error is triggered ?
EDIT: The error comes from this bit of boilerplate code I added in on the main View :
flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,
But If someone could shed a light on react-native styling or lead me to good resources, I'll be grateful :)
Refer to react-native/React/Views/RCTShadowView.m, there has comments
This works around a breaking change in css-layout where setting flexBasis needs to
be set explicitly, instead of relying on flex to propagate.
We check for it by seeing if a width/height is provided along with a flexBasis
of 0 and the width/height is laid out as 0.
The error is triggered when flex without defined flexBasis and having either width and height is zero.
Refer to react-native/Libraries/StyleSheet/LayoutPropTypes.js, we know the flexGrow, flexShrink and flexBasis receive values of number.
For visual guide, you might refer to this webpage, A Visual Guide to CSS3 Flexbox Properties.
Specifying flexDirection: 'row' solves the problem ¯\_(ツ)_/¯
As the error states - change the 'flex' to 'flexGrow' and the issue is solved.
The difficult part about this is how to locate which 'flex' needs to be changed from the whole project. What I did was (using Atom Editor, so 'Find in Project' ...) changing each 'flex:' with 'flexGrow:' (with the ':' at the end you make sure that you change a style) and then simply search the whole project again for a 'flexGrow' and change every 'flexGrow' from each file with 'flex' until you locate the corrupted 'flex'.
I prefer using flex instead of flexGrow, that's why I revert to flex. This is why: Layout Props
Hope this solves the issues.
In node_modules/react-native/React/Views/RCTShadowView.m add "//" at line 170 like this "// RCTAssert(!YGNodeIsDirty(node), #"Attempt to get layout metrics from dirtied Yoga node.");"
I'm trying to style a component to stretch the whole width of the view. In Android this works by adding a style={{alignSelf: 'stretch', width: null}} in the component, however the same code on iOS does nothing. What would be a good workaround? Also any idea why they act differently?
I'm doing a button component that should work in various situations, so the idea is that the component itself should stretch (if the prop is given), instead of touching the container around it. So modifying the container's flex properties should be avoided, even though I could probably do it with something like justifyContent:stretch off the top of my head, but for this purpose let's rule this option out... Also because this is an app that is working now fine on Android and needs to be ported to iOS, so I'm trying to do as small changes as possible. I can't rewrite the entire code to work around this issues. I'd need a self-contained solution if possible...
Using RN 0.21. I know I should update but that's a headache that I'm saving for later...
Did you try add flex:1 to your component?
If your parent have any width and your only child flex: 1, then the child should have 100% width.