I'm getting stuck at scroll the content with Animated. When I click on the arrow button, only the Animated tag scrolls up but the content inside it.
Here is my detail image:
And when I click the button:
And here is my code:
This is my function:
This is render:
And this is my style:
You're animating the view's height rather than scroll position.
Instead, try animating the y offset of scrollTo({x: 0, y: 0, animated: true})
more info here...
https://facebook.github.io/react-native/docs/scrollview.html#scrollto
`
Related
Looking for ideas on how to implement a Netflix.com like slider in react native.
If I use a ScrollView, user can scroll all the way to right with one single momentum scroll. But Netflix slider scrolls only 6 (itemsPerRow) items at a time. So, ScrollView may not be ideal. I will use general View instead of ScrollView.
<View style={styles.slider}>
<SliderControl pressHandler={loadPrevItems}>
<Text>{'<'}</Text>
</SliderControl>
<Animated.View
style={
{
transform: [{
translateX: interpolatedAnimation,
}],
}
}
>
{renderContent()}
</Animated.View>
<SliderControl pressHandler={loadNextItems}>
<Text>{'>'}</Text>
</SliderControl>
</View>
The slider controls are tied to onPress event handlers. The handlers adjusts the animation value as needed. When the slider is re-rendered, it is animated (slide to left/right) and shows next/prev items. I figured that they are using transform translateX animation for this. This is easily achievable with Animated API
const animation = useRef(new Animated.Value(0)).current;
const interpolatedAnimation = useMemo(() => {
return animation.interpolate({
inputRange: [0, 100],
outputRange: [0, sliderWidth],
});
}, [animation, sliderWidth]);
useEffect(() => {
Animated.timing(animation, {
toValue: moveDirection === 'right ? -100 : 100,
duration: 750,
useNativeDriver: true,
}).start();
});
Along with the Next/Prev button, Netflix slider also supports the trackpad scroll events. If we scroll slightly, the slider doesn't move at all. But we do a momentum scroll, it slides exactly 6 (itemsPerRow) items.
A general View doesn't support scroll event handlers to listen to trackpad scroll action. Not sure how I can achieve this part
ScrollView - lot of unwanted scrolling
View - No support for scroll event listener
Any ideas?
I have a component that when scrolling a button remains at the same height as the header, that header has headerBackTitleVisible: true, and when pressing those buttons in that position, they do not work.
I have tried with headerMode to float or to screen but I still can't find the solution
In my react native project, I want bottom tabBar to be shown on screen, as you scroll upwards with your finger, say 200 offset y, the tabBar hides with animation, and when you scroll down, again, say 200 offset y, it shows the tabBar again.
I am using createBottomTabNavigator. I am able to show/hide bottom bar without animation.
I have tried
https://github.com/react-navigation/react-navigation/issues/888#issuecomment-299600368
https://github.com/react-navigation/react-navigation/issues/958
Below is my code
navigationOptions: ({ navigation }) => {
const params = navigation.state.params;
return {
tabBarVisible: params && params.tabBarVisible,
animationEnabled: true,
}
},
How can I animate the bottom bar as user scrolls the list?
Thanks in advance.
If you want a bottom navigation with animation, you can use the createMaterialTopTabNavigator and simply set the tabBarPosition.
For detail information about createMaterialTopTabNavigator
I have a scrollview which content is larger than phone screen.
I scroll to the bottom and there I have function that reload content of that scrollview but first clear data source for it.
Reload function is connected to RefreshControl on scrollview.
But RefreshControl is not visible while loading data except when I slightly touch screen where content should be.
And this is only when I start reload from scrollview bottom.
I tried to scroll to top but it doesn't solve it:
onContentSizeChange={(contentWidth, contentHeight) => {
this.scrollView.scrollTo({ y: 0 });
}}
Any idea why this is happening?
<ScrollView
ref={ref => (this.scrollView = ref)}
refreshControl={
<RefreshControl
refreshing={this.props.getDataInProgress}
onRefresh={this.reloadData.bind(this)}
/>
}
>
{this.renderData()}
renderData() {
return this.props.data.map((item, index) => {
return ... some function that return other components
So as I wrote if I pull down loader is visible.
But if I scroll to bottom and click one some button that call same function as pull to refresh loader is not visible.
EXAMPLE
I just upgraded Bootstrap from 2.x to 3.x and found that modal dialog(http://getbootstrap.com/javascript/#modals) do not have vertical scroll bar anymore for large content body. How to set modal body max height and enable scroll bar?
You can set a height and enable the scrollbar using:
#myModal .modal-content
{
height:200px;
overflow:auto;
}
If you don't want the scroll bar on the entire modal, use modal-body instead:
#myModal .modal-body
{
height:200px;
overflow:auto;
}
Demo: http://bootply.com/88983