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?
Related
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}
I have a layout that keeps occurring in my codebase, that I'm not able to style properly with react-native flex only.
I want to have a top and bottom container which initially should both take half the screen space. The bottom container should grow with it's children and the top container should shrink if need be.
I've created a snack with the code here, where the layout behaves as it should, but it's using a workaround via onLayout: https://snack.expo.io/#domir/center-problem
The same problem is easily solved in web via flex: 1 on both containers. In react-native if I have flexGrow: 1 on both of them, they only divide leftover whitespace.
E.g. Currently for a display height 1000 a top container will get 400 while bottom container will get 400 + 200 when a 200 child is placed there when using flexGrow: 1. What I want is both to get 500 until the bottom container has 3 children with 200 each. Then I want the top container to get 400 and the bottom to have 600.
Not sure if there's a way to solve this JUST with flex (probably not) - and I'm not sure what your requirements are, but here's a way to solve that without using onLayout but instead just use maxHeight percentages:
https://snack.expo.io/#sudoplz/center_problem_maybe_solved
All I actually did was I used the existing counter value you had in that snack, to modify the input of maxHeight
The top parent is now styled like that:
maxHeight: `${Math.min(50, ITEM_HEIGHT - counter * ITEM_HEIGHT_PERCENTAGE)}%`
which means that until the bottom parent is full, it's max value will be 50%, as soon as it's full, the maxHeight becomes less and less gradually (depending on he number of children on the bottom view)
In my snack I also got rid of some unnecessary views you had, not sure why they were there.
Here's how that looks like now:
Would that work for you?
As you can see below, the maxHeight solution does not work quite well on a real device. Some of the lower boxes are cropped off or overflow the screen.
Although the solution does not have to be with flex only, I do have a flexible container at the bottom. It contains text and a varying amount of error messages. The yellow space would contain whitespace and the green container would contain some text input. On large screens, this is not a problem, but for small devices, the error messages can take up quite a bit of space and I'm not able to calculate the size of the lower parts in advance.
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've searched to find a solution to this very odd issue but cannot seem to find a resolution.
I provide a snack which when you run on android demonstrates the issue quite nicely:
https://snack.expo.io/#whitefluffy/brokentextalign
Basically when a piece of text (not restricted to the steps import I'm using that's just the one I used in this).
As you can see the text wrapping at the top is wrapping which then aligns to the left of the screen even though it's within a container that is settings center, but that is fine but lower down the take a picture of... text wraps but now instead of aligning left it decides to center itself instead.
So is it just that text wrapping always causes text to do what you're not trying to do or is there some way to get things to wrap in line with the styles set on the containers?
As I've tried additional containers, individually overriding the style on that object but nothing seems to work, so in my desperation, I turn to you the fine people of stack overflow to request someone put me out of my misery...
Many thanks,
IDED
For the Top text, if you want to in align center just add style={{textAlign: 'center'}} to the <Text> (the one wrapping "To use this Global Vans Companion app we just need....")
For the third label of <Steps> in the labelStyle object line 48, add textAlign: 'left' and you are good to go!
I want to create a view - that contains a Card - always with '90%' width of the window, whenever the device is vertical or horizontal, or Component is in a parent or not.
What I tried:
1 Using percentage
( width: '90%'):
It works well if I use my card separately on the main view of my screen, but when I use my card on a horizontal ScrollView with other cards I can see many cards, but I want to see only one card before scrolling.
2 Using React.Dimensions
( Dimensions.get('window').width*0.9 with some padding) :
It works perfectly when I use a card separately or even with many inside a scrollView but when I change the orientation of the screen it takes less width of the screen than '90%'.
3 Using flex basis based on this answer
Is there any better way to achieve my goal?
You might wanna look at this package https://github.com/marudy/react-native-responsive-screen
This package doesn't require any orientation change support. It's just one file actually, so you might wanna take a look at that