I am building a book application in which I use the ScrollView component to render a chapter, so that I can be able to scroll up and down when reading the chapter.
I want to add the ability to swipe left and right between the chapters. How can I implement that? I have checked the documentation but couldn't find a way to implement it.
Set horizontal props to true in ScrollView Component
When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. The default value is false.
<ScrollView
contentContainerStyle={styles.contentContainer}>
horizontal={true}
</ScrollView>
Related
Wondering how I can achieve this scrolling behavior like Instagram has on their profile pages with React-Native? More specifically, how I do limit the scroll indicator to just the bottom section rendering the posts?
Instagram scroll behavior vs what I have
So far these are what I've tried with no success:
Using a FlatList with a header component (both sticky and not).
Using a SectionList, with a FlatList in one section, but if set showsVerticalScrollIndicator={false} on the SectionList, the FlatList also does not display the scroll indicator, no matter its value.
Also tried using Animated (react-spring) values and translating components based on scroll offset. This is the closest I've been, but it had more of a parallax effect which isn't really what I'm aiming for. Also, the animation was very choppy.
Been trying my hand at this for a couple of days now so any help is appreciated. Thanks!
Hi everyone I try to achieve an effect on an horizontal flatlist in REACT NATIVE.
Actually I have two Flatlist, the top one is Horizontal which contain 9 items like this :
As you can imagine the flatlist overflow so we don't see all the items so we can scroll with touch event.
I want to when a user click on one of the items the red bottom line move animated under the good item. the black one is a static one indicator.
I use the ScrollToIndex flatlist property to move the item a center of the screen.
I cannot get the right X position to animated the slide active indicator from the previous item to the new one.
the Slider is an Animated.View position as absolute with a translationX transform property.
Does anyone have an example or an explanation for that.
Thank you.
CcHuMi
In a react native screen, the top part is a flatlist, and the bottom part is a toolbar, with some buttons in it. And, there is also a hidden component which shows when a button is pressed. What I hope is, when the hidden component is showing, the flatlist is pushed up, so that lower part content of flatlist will be still on the screen.
But the reality is, when the hidden component is showing, it covers the flatlist. I have no way to make flatlist component automatically be smaller.
How to resolve this issue?
thanks
Try styling all three component using flex.
for e.g.
give flatlist flex:3
hidden button flex:1
toolbar flex:2
And now when button appears, height will be automatically adjusted.
I'm trying to animate a MapView in React Native so that when it's pressed, it goes from being an element in a ScrollView to the map covering the entire screen (including navigation and status bars).
For the overlay view I'm using react-native-overlay
I've got it sort of working by:
measuring the map position with UIManager.measure
activating the overlay and rendering the same map but now inside an overlay
positioning the map relative to the overlay based on measurement
animating the map size to cover the entire screen
The problem is that when going to/from overlay, the entire map reloads which effectively kills the magic of the animation.
From what I understand, since I move the MapView pretty far in the VDOM tree, React kills it and inits a new one. I've tried to avoid this by passing the MapView as a prop to the component doing the animation. My idea was that since the prop is not be changed, the MapView shouldn't be re-instantiated. Unfortunately this doesn't help..
I also tried wrapping the MapView in another component and having shouldComponentUpdate always returning false. Doesn't help either..
Is there someway I can prevent the MapView from re-initializing when I move it in the render tree?
My render tree looks like this:
var map = <MapView />;
When map in ScrollView:
<ScrollView>
...some other content...
{map}
</ScrollView>
when in Overlay:
<ScrollView>
...some other content..
<Overlay isVisible={true} aboveStatusBar={true}>
<View style={styles.fullScreen}>
<Animated.View style={[styles.mapContainer,{top: this.state.topValue, height: this.state.heightValue}]}>
{map}
</Animated.View>
</View>
</Overlay>
</ScrollView>
I believe you should add key property to the Map component. This is the only way to tell React that the particular components in two rendering passes are the same component in fact, so it will reorder the component rather than destroy/recreate. Without key, if the component moves in the tree, react will always destroy/recreate it as it does not know that it's actually the same component (there is nothing that could tell react it is). The key property works in lists/arrays but I think it should also work for more complex tree rearrangements.
See more details here: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
Note that the link above is for react.js not react-native, but I believe it should work in exactly the same way. I found that there are quite many concepts/details not explained in react-native tutorial, but they are clear in the react.js one (for example explanation about ref property). Actually the authors assume that you have experience with react (so I went on and learned React.js as well ;):
From https://facebook.github.io/react-native/docs/tutorial.html#content :
We assume you have experience writing websites with React. If not,
you can learn about it on the React website.
Tabs mainUI = new Tabs(Component.BOTTOM);
mainUI.setUIID("Tabs");
mainUI.hideTabs();
....
How can we swipe containers using tabs vertically in CodenameOne ?
Tabs have been hardcoded for side swipe, they don't support up/down swipe due to some builtin assumptions in the Tabs e.g. reliance on a layout that arranges the underlying container one next to the other etc.
You have several options. Just use scrolling and define the snap to grid value to take up the entire screen this will effectively provide you with the ability to scroll as a swipe.
You can also use a List or just use the code from Tabs as a reference to create a vertically swipeable component.