Stuck with small problem. I have Animated.ScrollView and there i have onScroll Event like this
Animated.event(
[
{
nativeEvent: {
contentOffset: {
x: this.topViewAnimation,
},
},
},
],
{ useNativeDriver: true },
)
So onScroll that card which active ( on the screen ) highlights item in view.
Sometimes i need to scroll to specific value with scrollTo method but i always see one problem.
For example i have 10 items. ( 10 items in view and 10 items which i will highlight based on scrollOffset ).
When i will use my scrollTo method i will see how every item highlights untill it become this one what i need.
Is there a way to highlight only one item what i need?
I've just jumped into the same problem today, and after hours trying to solve this issue, the solution was quite straightforward.....
What I did is to NOT TO USE the Animated.ScrollView component, and instead, I created a new ScrollView animated component whith the animated interface:
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
Then I used this new "AnimatedScrollView" component insted of the "Animated.ScrollView" and everything run just smoothly...
Good luck!
Related
I have made an example code here with Snack expo
Animated Header
The issue that I'm having is that my animation is not smooth enough.
It looks like it's shaking.
Demo video YouTube Video
I can't seem to find what's the issue here and also tried to fiddle around with the scrollEventThrottle, alwaysBounceVertical, bounces, bouncesZoom props in ScrollView.
I figure out what the problem is and the issue is not because of the performance.
The problem is because of the styling on the header.
Adding the position to absolute will solve this problem.
But there's another issue that appeared when having the position as absolute, the component inside the header such as TextInput won't appear when a touch event occurs.
To solve this new issue, you have to add the zIndex.
More tutorial about zIndex
Animated Header Fixed
Try adding useNativeDriver:
onScroll={
Animated.event([
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{ useNativeDriver: true })
}
But I think in React Native, ScrollView is not supposed to work with extremely long duplicated content. I suggest you to use a flatlist for your use case.
Adding removeClippedSubviews = {true} on top most ScrollView solved my issue and app performance feels so light.
I have some state variables I want to animate for user micro-interaction. These variables are not properties of a view or style properties; they are actually properties of an SVG such as Circle radius (using react-native-svg). I have used window.requestAnimationFrame to animate these circles and it works buttery smooth but I would like to get features of React.Animated and Easing and maybe reduce some code if this is possible.
So I am struggling with getting Animated.timing(...).start() to update my state for each frame so the rendering will occur.
In an event handler I have something like:
let radiusValue = new Animated.Value(0);
this.setState({ holding: {
radius: radiusValue,
animator: Animated.timing(
radiusValue,
{
toValue: closest.radius*1.15,
duration: 1,
easing: Easing.bounce(3)
}
).start(() => console.log("done"))
}
So that sets up the animation. Now somewhere in my render() code I have:
<Animated.View>
<Svg><Circle cx={x} cy={y} radius={this.state.radius._value}</Svg>
</Animated.View>
Now because my radius Animated.Value is not part of Animated.View props I guess it doesnt generate tween frames. I do get the "done" message from within the Animated.timing(..).start(callback) but obviously since nothing is directly wired up to modifying my state I don't get calls to render for tweening. So how do I get the Animated.timing() to modify my state?
I've tried converting the Svg to an Animated control but this actually crashes the iOS Simulator to home screen (no red screen exception error).
let AnimatedSvg = Animated.createAnimatedControl(Svg);
...
<AnimatedSvg><Circle cx={x} cy={y} radius={this.state.radius._value}</AnimatedSvg>
Is there a callback from Animated.timing(...) that I could set to then call setState()?
The code above is very pseudo, trying to keep the question light.
I have two flatlist, one contains the data (dataScroll) and the other the checkboxes (checkScroll) for every data item.
The reason for this is that the checkboxes have to be always visible while the user scrolls horizontaly on the dataScroll (I put the dataScroll in a horizontally scrollable scrollview).
Demo:
expo snack demo
Tried so far:
On dataScroll's scroll event, I got the y offset and moved the checkScroll to that y position.
handleDataScroll = ({ nativeEvent: { contentOffset: { y } } }) => {
this.checkScroll.scrollToOffset({ offset: y, animated: true });
}
It (almost) does the job, but there is a huge delay between the 2 flatlist while scrolling.
--
I read that maybe the use of animated components the way to go, but I couldn't figure out how the animation works in react native.
So I'd like to get some help on how should I bind the two flatlist together so that if I scroll on one list, the other follows it with no (or at least minimal) delay.
If only the dataScroll flatlist is scrollable that's ok too.
We were asked to implement a screen for our app where there would be some data in the form of a list and sections for each data category. When a Section header is pressed, the section data should be expanded or collapsed.
At first, i tried with Listview, and i was changing the datasource each time a header was pressed, but tbh it did not feel like the correct way of doing it.
Creating a custom view, an animating the view's height works ok, but because of the volume of the data, which is big, the initial rendering is a bit slow e.g. there is a noticeable delay when navigating to the screen.
After upgrading to RN 44.3 i was wondering if i could use Sectionlist in a better way than listview.
Generally what's the best way of approaching a requirement like this?
Thanks!
You can animate the items in flatlist/SectionList. A smaple code will look like below (Animates on removing items). You can use same logic for section list as well.
onRemove = () => {
const { onRemove } = this.props;
if (onRemove) {
Animated.timing(this._animated, {
toValue: 0,
duration: ANIMATION_DURATION,
}).start(() => onRemove());
}
};
Refer this link for more details.
I'm using onLayout to detect screen orientation and it's working fine inside my root view, but when I implemented inside the drawer it didn't work, any reason why this happens ?
code :
import Drawer from 'react-native-drawer'
...
onLayout(e) {
console.log('onLayout');
}
<Drawer onLayout={this.onLayout}
It didn't log any thing when orientation changed!
This is because the Drawer component doesn't take onLayout as a prop. You can see in the source code that the rendered View does use onLayout, but it's not pulling from something like this.props.onLayout.
I'm not exactly sure what you're looking to do, but maybe this issue will help you. As it shows, you can pass a function into openDrawerOffset instead of an integer or a ratio in order to be a little more dynamic with how you set your offset:
openDrawerOffset={(viewport) => {
if (viewport.width < 400) {
return viewport.width * 0.1;
}
return viewport.width - 400;
}}
You might also benefit from the Event handlers that react-native-drawer has to offer.