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.
Related
I am making a react native map, using MapView from 'react-native-maps' and this marker clustering engine. This is the component for a cluster marker that has been working just fine with blazing performance:
export default class ClusterMarker extends PureComponent {
constructor(props) {
super(props)
this.state = {
tracksViewChanges: true
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props !== nextProps) {
this.setState(() => ({
tracksViewChanges: true,
}))
}
}
componentDidUpdate() {
if (this.state.tracksViewChanges) {
this.setState(() => ({
tracksViewChanges: false,
}))
}
}
render() {
/*...
bunch of unrelated code where 'message', 'image', 'coordinate' and 'pointCount' are set
...*/
return (
<Marker
anchor={{x:0.5,y:0.5}}
centerOffset={{x:0.5,y:0.5}}
coordinate={coordinate}
image={image}
title={pointCount}
description={message}
tracksViewChanges={this.state.tracksViewChanges}>
{/* <Text>{pointCount}</Text> */} <-------- I want this to work just as fast
</Marker>
)
}
}
See that title={pointCount} in Marker props? When a user clicks a cluster, an overlay pops up to show them how many pins are there in the cluster. I want to bring that text out of there and display it over the cluster. Note that in render inside Marker, there is a commented line. When uncommented, visually it does pretty much what is needed, but with a terrible perfomance on phone (1 fps would be an overstatement).
It's clear that the problem is with Text. My hypothesis is that the Text component keeps on checking parent if there are updates on text, or that it re-renders all the time for no reason. Here is a list of things I've tried to fix this:
Create a component extending from Text, performing the same task without weird updates or re-renders. No fps increase.
Create a component that renders a Text but never updates or re-renders for no reason. No fps increase.
Add the tracksViewChanges logic you can see above. That was somewhat of a success, increasing average fps from 1 to 5.
Use other marker clustering libs (all of which failed to work with decent performance even without the Text inside Marker).
Many hacky solutions from the internet, none of which actually improved performace.
This map is currently dealing with an average of 20,000 pins and the solution has to be performant as this pin count increases, because it will.
I would be very glad if anyone could help!
Perhaps this is not the answer you are looking for, but 20k markers is... a lot. Have you considered clustering the markers based on the zoom level? You could also filter out markers that are not in the map viewport.
I'd like to be able to change the toValue of an animation responding to props update. The official docs for React Native Animated API state that the spring method
animates a value according to an analytical spring model based on damped harmonic oscillation. Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
However, I haven't found anywhere how we can update toValue. Basically, my component looks like this:
const ProgressBar = ({ loadPercentage }) => {
const loadAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
animation.current = spring(loadAnim, {
toValue: loadPercentage,
}).start();
}, [loadAnim, loadPercentage]);
....
}
This doesn't work for all cases. In particular, if loadPercentage changes too often, the component takes up a huge amount of resources. This kinda makes sense, since I'm creating a new animation for each update. Instead, I'd like to simply modify toValue without starting a new animation or anything like that.
This seems pretty basic, but after 4 hours of trying stuff/googling, I give up. -.-
Just in case, I also tried using react-native-reanimated, but no luck there either.
I’m currently using LayoutAnimation to animate a view when children are added. However, since LayoutAnimation causes everything to be animated, globally, and I can’t easily use built-in Animated library to fit my use-case, I’m wondering if react-native-reanimated is able to help.
Here's a snack of my current solution:
https://snack.expo.io/#insats/height-adapation
This is what the result of that looks like:
Is there a way to achieve the same thing without using LayoutAnimation? I've looked through all exampled in react-native-reanimated, and I've read through the docs but I'm still not sure if this is possible to do or how I should get started. I've thought about using Animated to move the item-wrapper out of the viewable area and "scroll" it upwards (using transform translateY) when items are added, but that would require fixed height, which I don't have.
I have 2 approaches that I can suggest out of my mind:
You can configure your LayoutAnimation only when your desired state changed. If you use hooks it would be too easy:
const [state,setState] = useState([]);
useEffect(()=>{
/*rest code*/
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
},[state])
Or if you use class component you can catch your desired state change in componentDidUpdate:
componentDidUpdate(prevProps,prevState){
if(prevState.items!==state.items){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
}
}
You can use onLayout function of view:
addItem = () => {
this.setState({
items: [...this.state.items, {title:'An item',isNew:true}]
})
};
renderItems = () => {
return this.state.items.map((item, index) => {
let opacity = new Animated.Value(0);
return (
<Animated.View onLayout={({nativeEvent})=>{
if(this.state.item.isNew){
// here you got the height from nativeEvent.layout.height
// Then you have to store the height animate height and opacity to its precise value
// PS I used opacity:0 to calculate the height
}
}} key={index} style={[styles.item,{opacity}>
<Text>{item.title}</Text>
</View>
)
});
};
When it comes to react-native-reanimated I regard it as more faster version of react-native's Animated library. So either way you will have to calculate the height!
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!
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.