Closed ggunti closed 3 years ago
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?
Did you try using the svg component?
- import MathViewFallback from 'react-native-math-view';
+ import MathViewFallback from 'react-native-math-view/src/fallback';
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.
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.
@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:
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)
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.
Could you suggest something to improve the performance of the keyboards? (mostly on android, iOS is not so bad). Thank you!
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.
React.memo
is used for function components and is the equivalent of PureComponent
class
Thank you, I will check it.
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
resolved?
Would you mind adding a show case of your app/s that use this repo? Maybe a short video or something?
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!