[Performance] Too much views about react-native-shadow-2 HOT 6 CLOSED

Hi, @davidnum

You may use the safeRender prop so it won't render the shadow twice (so the fps drop won't be as big), but won't be available at the first render. If you know the components size beforehand, you may use the size prop to have the shadow from first render, and also enter this size on the FlatList optimizations, linked above, along with other possible optimizations.

As the FlatList takes into account each components size and the shadow changes its size twice with the automatic sizing on first render (and exact on the second), certainly it has a significant impact on the fps.

Also, as this apparently an emulator, you are inevitably going to have a significantly poorer performance. On a real device it performs better, even with a large number of views. And when using the prod app version, it performs even better than the dev version.

I really appreciate your detailed feedback and any other info you may want to add, but I don't see any other thing I can do besides rewriting the lib to have a single SVG at least on the second render (not feasible on first render as I found out on all the time I tinkered on it), and I am really not willing to do it right now, specially as this is the only complain, so I am closing this as a Won't Fix. Any code change suggestion is welcome.

from react-native-shadow-2.

Hi, can you send here a image of your app screen?

from react-native-shadow-2.

Hi, can you send here a image of your app screen?

Something like this:

Sample code:

import React from 'react';
import {FlatList, Text} from 'react-native';
import {Shadow} from 'react-native-shadow-2';

const data = Array.from(Array(1000).keys());

const App = () => {
  return (
    <FlatList
      contentContainerStyle={{paddingHorizontal: 16, paddingTop: 50}}
      data={data}
      keyExtractor={item => item.toString()}
      renderItem={({item}) => (
        <Shadow
          distance={8}
          offset={[2, 2]}
          viewStyle={{
            backgroundColor: 'white',
            height: 200,
            marginBottom: 16,
            width: '100%',
            padding: 16,
            borderRadius: 16,
          }}>
          <Text style={{marginBottom: 16}}>Some item #{item}</Text>

          <Shadow
            viewStyle={{
              width: '100%',
              padding: 16,
              borderRadius: 16,
              backgroundColor: 'white',
            }}
            distance={2}
            offset={[0, 0]}
            paintInside>
            <Text>Inner</Text>
          </Shadow>
        </Shadow>
      )}
    />
  );
};

export default App;

from react-native-shadow-2.

This actually seems to be doing pretty well. I was surprised and even shocked about the RAM usage, but as you are using a non virtualized list of 1000 items, it looks corresponding.

Here is the code of the lib: https://github.com/SrBrahma/react-native-shadow-2/blob/main/src/index.tsx

I don't see how I can remove any Views to reduce your count.

If you need a list of so many items like you have there in your test case, there are the FlatList and SectionList components, that works around the VirtualizedList component.

If you are having performance issues, try those list components above.

Actually, sorry. I was kinda distracted and busy and haven't noticed that you are already using the FlatList 🤦

Before the lib went smarter with the shadow on the first render, it used a single SVG component for all the sides and corners. Now, it has a SVG for each of those, and react-native-svg certainly wrap each of them with a View, as it accepts the style prop. And, there are other 3 Views in Shadow for positioning etc. But, reverting it or having it as a possibility still doesn't seem necessary to me. Why have you brought this up? Were you having performance issues?

from react-native-shadow-2.

Also, you should take a look at this page: https://reactnative.dev/docs/optimizing-flatlist-configuration

from react-native-shadow-2.

~ This actually seems to be doing pretty well. I was surprised and even shocked about the RAM usage, but as you are using a non virtualized list of 1000 items, it looks corresponding. ~

~ Here is the code of the lib: https://github.com/SrBrahma/react-native-shadow-2/blob/main/src/index.tsx ~

~ I don't see how I can remove any Views to reduce your count. ~

~ If you need a list of so many items like you have there in your test case, there are the FlatList and SectionList components, that works around the VirtualizedList component. ~

~ If you are having performance issues, try those list components above. ~

Actually, sorry. I was kinda distracted and busy and haven't noticed that you are already using the FlatList 🤦

Before the lib went smarter with the shadow on the first render, it used a single SVG component for all the sides and corners. Now, it has a SVG for each of those, and react-native-svg certainly wrap each of them with a View, as it accepts the style prop. And, there are other 3 Views in Shadow for positioning etc. But, reverting it or having it as a possibility still doesn't seem necessary to me. Why have you brought this up? Were you having performance issues?

As you can see, list with Shadow dropping fps of UI and JS thread against list with simple View.
Code: https://github.com/davidnum/rn-shadow-2-issue

from react-native-shadow-2.