I'm trying to build this:
Right now I'm building this by doing all the text in a flex box and having two sibling absolutely positioned boxes with partial borders to make the lines, like this:
<ContainerView>
<TextSection />
<LeftFloat />
<RightFloat />
</View>
This isn't great on different screen sizes, though, because I have to tell those border boxes how to tall and high to be. And the text takes up different heights/widths on different screen sizes so there is no one-size-fits-all value, even when it's a screen percentage, that works for the borders on all devices.
I tried doing something inline like this:
<Text>BECOME A SUBSCRIBER</Text><HorizontalLine />
<VerticalLine /> <BulletView /> <VerticalLine />
<HorizontalLine /><Text>Tap here to learn more ></Text>
but that was worse because the horizontal and vertical lines wouldn't join up nicely to form a corner. I could manipulate them with negative margins but the effect was different between Android and iOS.
Is there a better way to build this kind of border situation?
Or is there a way for these floating boxes to find the width of the "BECOME A SUBSCRIBER" and "Tap here to learn more" elements so they can set their widths accordingly?
The View prop 'onLayout' would be helpful here. You can let the other container expand with flex, and then grab the dimensions of it. Afterwards you could calculate the size you want using screen dimensions and this layout data.
<View onLayout={e => e.nativeEvent.layout}
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>
Good morning, this is actually my first question on StackOverflow after a few years in the industry (hope it's not too late!).
I'm working as a side project on a react native app.
I fail to understand how does the view change when the keyboard is up.
When the view shrinks (because the keyboard was shown), views overlap one to another. I want them to still be split.
I have this picture showing what I mean with overlapping views:
I thought it might be something with the paddings/margins, but I removed them all and still the same issue. Now, I know that the input height is defined by an absolute number, and that is what makes it not shrink, so it is bigger than the actual view, that's why it overlaps.
How can I keep my input having a fixed height but also maintaining a margin of separation when the view shrinks ??
Thank you very much!
Edit: I'm editing because I feel like I haven't been able to express my idea of how I need it to work. (Should I delete previous explanation? Keep picture if someone edits and deletes the first explanation).
The initial view with no keyboard has to be like this:
The inputs and buttons have to be at the bottom, the view getting all the height possible.
When opening the keyboard (by clicking on one of the inputs), I want the list to shrink so that the buttons and inputs are still visible and separated by a small margin/padding, and the list to have taken the remaining space (again respecting a small separation between views). The list will still be scrollable (it is a FlatList) when opening the keyboard.
Thank you again and sorry for the misexplanation.
You can try wrapping your content inside a ScrollView instead of a normal View like this:
<ScrollView style={{flex: 1}}>/* your content here */</ScrollView>
So when the keyboard shows up your elements won't overlap since they take the same space but you can scroll to see the elements hidden by the keyboard.
I think you can try something like this:
<View>
<ScrollView>
<KeyboardAvoidingView style={{flex:1}} behavior={Platform.select({ios:"padding", android:null })} keyboardVerticalOffset={Platform.select({ios: 0, android: 500})}>
{/*Your buttons and other elements here...*/}
</KeyboardAvoidingView>
</ScrollView>
<View>
You will also have to import KeyboardAvoidingView and ScrollView from react-native for this.
I have implemented fusion chart (bar2d) type in my react native application. Its working fine, If the data is around 10-12 lines (graph lines) showing fine, But, If its 30 lines, Its getting shrink and adjusting the given height only.
Its not even enabling the scrollview (like flatlist), And the UI looks very inconsistent, Even, I tried to add the scrollview to Fusion Chart, But, Its not working. Because, The view is not getting expand, How to enable scroll, or according to data how to increase the view height.
Even, I contacted them regarding this issue, They told bar charts
don't have scrollview, Scroll contains only Vertical/Column charts.
But, My requirement is bar chart.
My output is following screenshot,
Actual, Which I am looking for is following screenshot.
And My code is
<View style={styles.container} />
<FusionCharts
type={type}
width={width}
height={height} // given 95%
dataFormat={dataFormat}
dataSource={dataSource} //dynamic json data which contains around 30 indexes
libraryPath={fusionChartPath}
/>
How can I achieve this?
I am trying to have an image inside a ScrollView taking the full width of the screen while keeping its aspect ratio (I don't want a fixed background image). The answers in https://github.com/facebook/react-native/issues/950 seem to work for a View but not a ScrollView.
The null width/height trick just makes the image disappear. Setting the width using Dimensions.get('window').width does not work for some reason; it leaves some space either on the top and bottom or the left and right of the image depending on its aspect ratio.
I can't use Image.getSize() as the image is local and would rather avoid hard-coding the dimensions as I have many other images that need to be styled this way. I have tried many other combinations of flex, alignSelf, etc. but none seem to work.
Setting ScrollView's style={{width: "100%"}} works for me.
Is there a way how to control image position with resizeMode set to cover? I'm looking for similar result as can be achieve by using background-positon: center bottom in traditional CSS.
Here is an illustration of the situation:
Image with same dimensions as screen
Image with custom height, picture gets centered
(Desired) Image with custom height, but with picture aligned to the bottom edge of the element
My code:
<Image
source={require('./eifell.jpg')}
resizeMode={Image.resizeMode.cover}
style={{
height: 300
}}
/>
I believe you'll have to achieve this by using the transforms prop on the image style and utilize the translateY transformation.
It will involve a little math... off the top of my head I believe you would need to follow these steps:
Use Image.getSize() to find the dimensions of your image
Then based on the size of your window from Dimensions.get('window') calculate how many pixels your image will scale to.
Find the difference between the height displayed (say 667px) and the desired height of the image (300px in your example)
Then translate the image up that many pixels.