Optimize slow performance

[ZeroCool00]

In ios its working fine but in android this is too slow to open and after we click on icon, it too slow to close.
sometime its just hang my device. is there any scope for android?

Q. 2
how can i open as a popup., right now i am using react-native modal to open in dialog, i hope you can add this feature as props.

I am using Moto g4 plus (nougat).

[arronhunt]

Hi @ZeroCool00 I noticed the performance issues on Android as well. I've done some research into optimizing performance for Android but haven't had any luck so far.

how can i open as a popup., right now i am using react-native modal to open in dialog, i hope you can add this feature as props.

Right now it's meant to embed wherever you'd like, so you would need to design your own dialog. This feature is on the roadmap though so I will keep you posted when it becomes available

[ZeroCool00]

@arronhunt I am looking forward to it..

[hareeqi]

@arronhunt regarding the performance issue, a quick look at your code shows that you are not using PureComponent with your flatlist (EmojiCell should be a class that extends PureComponent ).

now even if you use PureComponent, your flat list data should not be generated every time you render,

i.e.

<FlatList data={list.map(emoji => ({ key: emoji.unified, emoji }))} />

This means you are generating a new list every time a render function called and each object in that list will have a new reference in every single render. The proper way to do this is by converting the EmojiSection and EmojiSelector components to class.

After that you generate your FlatList data once in the constructor and you use that reference in Flatlist data in the render function

additional optimisation can be achieved by using StyleSheet.create for your EmojiCell as now you are sending theStyle for each item over the bridge in each render while StyleSheet.create will cache it for you

One more optimisation can also be achieved by NOT defining functions inside the render function

i.e

const EmojiSection = () => (
        <FlatList
            renderItem={({item}) => (
                <EmojiCell  key={item.key} emoji={item.emoji}  />
            )}
        />
);

should be like this instead

class EmojiSection extends Compnent
   
    renderItem = ({item})=>(<EmojiCell  key={item.key} emoji={item.emoji}  />)
    render()  (
        return <FlatList
            renderItem={this.renderItem}
        />
);

I hope this help, it's a good start but not everything,

[arronhunt]

Awesome @hareeqi this is very insightful feedback! If I can find time I can try these updates. Otherwise if someone wanted to submit a PR it would be appreciated :)

[arronhunt]

additional optimisation can be achieved by using StyleSheet.create for your EmojiCell as now you are sending theStyle for each item over the bridge in each render while StyleSheet.create will cache it for you

Unfortunately this one is hard since width/height refer to colSize which gets passed from its parent

[arronhunt]

Latest merge included some performance updates, looking for someone to test for me :)

[flyinghawker]

The rerendering still plays in there, I just simply add the following piece and become much better except the rendering of the very beginning still a little slow though.

shouldComponentUpdate(nextProps: any) {
    return !this.state.isReady;
  }

[medonagy45]

I have added this to fix the performance issue

shouldComponentUpdate(nextProps,nextState) {
return !(this.state.isReady&&nextState.category===this.state.category);
}

[KananIslamzada]

For the best performance in Modal (mainly for android performance issues), do not forget these props:

<Modal
...
useNativeDriver={true}
useNativeDriverForBackdrop={true}
/>