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
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 am changing alphabets in a Text element but I get this slight shifting of elements. I have tried adding padding, margin and wrapping with other empty s but I keep getting this shifting as shown in the video. I've also used the various props options (need to only use the cross platform ones) but to no avail.
http://imgur.com/a/mNWGr
And my text is:
<Text style={{
fontSize: 24,
textAlign: 'center',
paddingTop: 5,
paddingBottom: 5}}>
Edit2: Correct answer (credits to Ajith Pandian) is that the height should have fixed value.
I think it's expected behaviour. If the app is iOS only you can try hard coding height and using adjustsFontSizeToFit to force the font to scale down.
Edit: This answer is posted with regards to RN 0.45.0 and older.
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.
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'
I'm trying to make the UI.Picker element have a transparent background in iOS7 but it always white.
I've tried:
backgroundColor:'Transparent'
and
translucent: true
to no avail.
Is it possible to do?
Try using backgroundColor: 'transparent' (note the lower-case 't')
The Colors section from Ti.UI documentation should describe in more detail how to specific a color for the background.
Afaik, you can't change the background or text color of a picker. Therefore, you have to implement your own style and define the colors there.
A hint how to change the text color is given here.