Changing Filters with Sliders

[sscaff1]

I was wondering if you had any suggestions on performance. On an iPhone 6s+ it seems to do ok, but on iPhone 5 it's very choppy. Any ideas on how to correct?

Render part of code:

<ImageFilter height={image.size.height} width={image.size.width} {...imageFilterProps}>
  {image.uri}
</ImageFilter>

I have an option to select each value (sepia, hue, saturation, etc.). I use the slider to apply the filter. I setState to change the value.

My imageFilterProps is an object that has all of the keys you specify in the docs. The component works but it's slow on older phones. Any ideas?

[st0ffern]

Have you tried to use the gl-react-image component inside?

[sscaff1]

Yes I did - I found no difference in performance (in fact it may have been a little worse).

[st0ffern]

wierd, it works just fine on a s6 and s4 with android..
could you try to attach the sliders to seperate variables and then pass them into the component?
changing a object state with all parameters will probably trigger react to rerender every child component in gl-react instead of only the slider that changed.

are you also using native sliders or custom UI sliders? (i have used custom ones and they made it all pretty slow on Android)

[sscaff1]

I'm testing on an iPhone 6s+, iPhone 6s, and iPhone 5. I haven't tried it on Android. I'm using native sliders. My filter variables are stored in an object as described above. I am using the immutability helper (https://facebook.github.io/react/docs/update.html) to update the state of the particular key I'm trying to update with the slider. How else do you recommend structuring this for it work?

[st0ffern]

I guess you are running the full set of functions including shouldComponentUpdate() and so on?
To be shure that there is a problem preformance wise it would be in gl-react as this is just a component that renders multiple GLNodes. Using one or multiple GLNodes does not affect the preformance in any way.

Could you try to create a plain simple component with a state for every params and run it?
As i have experienced running on iPhone is alot faster than Android, and even running on a old Samsung S4 is fast here.
There may be be a performance issue in your code somwhere.

I dont have a iPhone to test with here right now. so that i would have to test out next week.

[sscaff1]

Cool I will try it - thanks for the advice. It's good to know that nesting multiple nodes doesn't affect performance in any way.

[st0ffern]

np, let me know if it works out with a plain plugin

[st0ffern]

@sscaff1 got it working?

[st0ffern]

closing thisone as it is aged, no response..
Please update ticket if you still experience problems..