Android rendering should be faster than iOS, but...

[ggunti]

Hello! As I understand, on android, this library uses native rendering based on Android SVGImageView. This means that the rendering on android should be faster than on iOS (because iOS uses react-native-svg yet).

But... My experience is that the rendering on iOS is faster than on android. I render some math expressions inside a custom keyboard, and what I experience is that on iOS the expressions are rendered faster than on android. Please see the videos below.

iOS (simulator, running 13.3): https://vimeo.com/417277032

Android (Samsung S5 device, running android 6): https://vimeo.com/417276432

Maybe rendering is slower on android because I use an enough old device, however I think that the difference is too much between android & iOS, considering also that android should be faster than the iOS (not inverse).

So my question is: what could cause this difference in rendering time?

Thank you!

[ShaMan123]

First of all your keyboard looks great. My goals for this library is to have a keyboard component. So I'd love a PR. Regarding the issue, could you share some code? or a minimal reproduction?

1. Did you try using the svg component?

   - import MathViewFallback from 'react-native-math-view';
   + import MathViewFallback from 'react-native-math-view/src/fallback';

2. Is there a way to enhance performance with React.memo or other memo techniques? Did you try profiling the app? I would expect this behavior to occur on the first rendering. After that it should use stored values and render fast.

3. Could you create 2 videos of the example app so I can have something to measure against? Rendering on the Fly is what we need to test.

[ggunti]

@ShaMan123 Here is a repo that reproduces the problem: https://github.com/ggunti/math-keyboard-example

You should clone it, run npm install and then run the project for android or iOS using the react-native run-android or react-native run-ios command.

I used react-native-keyboard-input in order to implement the custom keyboards. Yes, react-native-keyboard-input is a little bit deprecated, and has some bugs, but it's the best I found for now.

Regarding your questions:

1. I did not try to use the svg component, I will try it (actually I did not know that I can import it like you did)

2. In the repo I linked above, I added also React.memo when I register the custom keyboards (see src/common/MathKeyboard.tsx):

   

But it seems that it has no effect, it is still too slow on my android device, I did not see any performance improvement. Maybe I don't use React.memo as it should? I never used React.memo before.

3. I attached 2 videos in my previous comment.

Could you suggest something to improve the performance of the keyboards? (mostly on android, iOS is not so bad). Thank you!

[ShaMan123]

3. Could you create 2 videos of the example app so I can have something to measure against? Rendering on the Fly is what we need to test.

I want to see the video of the example app as well.

I have a suggestion but it's rather counter-productive, regarding the issue in hand (making this library better..). You can work around this issue by creating static svg files (using mathjax node) and using them as assets in your app.

This is issue is strange. I'm looking into it now.

[ShaMan123]

PR The problem doesn't purely originate from this library

[ShaMan123]

React.memo is used for function components and is the equivalent of PureComponent class

[ggunti]

Thank you, I will check it.

[ShaMan123]

I'm guessing (don't have mac) that iOS doesn't render again and again or it has some better memoization when using components and/or svg

[ShaMan123]

resolved?

[ShaMan123]

Would you mind adding a show case of your app/s that use this repo? Maybe a short video or something?