TaylorBriggs/react-native-typewriter

maxDelay parameter has little to no effect for faster text animation on multiple text blocks

Closed this issue · 6 comments

Thanks for this great tool. Though I noticed the maxDelay parameter has no visible effect on the speed of the text below the 100ms range (on multiple text blocks simultaneously).

I've tried changing the value in the props like so:
<TypeWriter typing={1} maxDelay={10} style = {styles.commentRegular} >{userObject.comment}</TypeWriter>

And changing the MAX_DELAY directly in your code, like so:
const MAX_DELAY = 10;

Is there something I'm missing to get the text to draw faster?

Also... The code above triggers a yellow box warning that says I'm supplying the invalid prop type 'style' to 'TypeWriter'. Oddly enough the styling works despite this warning.

Thanks in advance for any tips you may have,

I think the problem is related to processor overhead. I have a list containing up to 10 Typewriter text blocks, and they all begin animating on load. If I load fewer items, the speed is faster, but even with only 10 TypeWriter items in the list the view barely approaches the 5-10ms speed I hardcoded. Is it normal for this fairly simple animation to cause so much processor lag? I have an equivalent animation working in iOS (native) and it has no lag whatsoever...

Any tips for optimizing for speed? I have tried using FlatList, and it doesn't improve performance.

Also tried with Pure Components, but makes no difference.

Hey @sixmoraltales thanks for writing this up. It makes sense to me that there wouldn't be much of any visible effect on the typing at that low of a threshold.

You may have found a bug in the way the component is rendering, though. I wouldn't expect it to consume so much processor. It's also not using any of the animation framework React Native provides, just setState and slicing of the component's children. If you have time to look into it and want to open up a PR it will be very welcome!

@TaylorBriggs Yeah, I'll keep looking into it. Think it might just be RN though. Going to try a paginated list to see if it speeds things up.

@TaylorBriggs Seems it's not a bug, but simply a limitation of doing animations with .setState calls. I'll have to take another approach if I want to invoke multiple instances. Thanks!

I'm going to close this for now. Please feel free to re-open or open a PR if you have an alternative solution. Thanks!