Weird/degraded behavior with conditionally rendered components

[dkarten]

Hello, I have a custom built "TabBar" component that shows/hides two tabs. Within each tab is a group of components using a mix of shared values and animated props. I'm running into two issues and wondering if there is a better way to accomplish this or I've run into some kind of bug?

I have a component that holds several shared values and the tab bar.

function MainScreen() {

  const fTopHue = useSharedValue(0);
  const fTopSat = useSharedValue(1);

  const fBottomHue = useSharedValue(2/3);
  const fBottomSat = useSharedValue(1);

  const rTopHue = useSharedValue(0);
  const rTopSat = useSharedValue(1);

  const rBottomHue = useSharedValue(2/3);
  const rBottomSat = useSharedValue(1);

  const [activeIndex, setActiveIndex] = React.useState(0);

  return (
    <View style={{ flex: 1, flexDirection: 'column'}}>
      <TabBar height={48} activeIndex={activeIndex} setActiveIndex={setActiveIndex} tabs={['front', 'rear']}/>
      {activeIndex == 0 && <LightFace id="frontLightFace" topHue={fTopHue} topSat={fTopSat} bottomHue={fBottomHue} bottomSat={fBottomSat} />}
      {activeIndex == 1 && <LightFace id="rearLightFace" topHue={rTopHue} topSat={rTopSat} bottomHue={rBottomHue} bottomSat={rBottomSat} />}
    </View>
  );
}

TabBar is simple and just renders two tabs and switches active index on click.
LightFace is complicated, but works just fine without the tab switching.

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

type LightFaceProps = {
  id: string;
  topHue: SharedValue<number>;
  topSat: SharedValue<number>;
  bottomHue: SharedValue<number>;
  bottomSat: SharedValue<number>;
}

export default function LightFace( { id, topHue, topSat, bottomHue, bottomSat }: LightFaceProps ): JSX.Element {
  
  const animatedGradProps = useAnimatedProps(() => {
    const topRgb = hsv2rgb(topHue.value, topSat.value, 1);
    const topHex = rgb2Hex(topRgb.r, topRgb.g, topRgb.b);
    const bottomRgb = hsv2rgb(bottomHue.value, bottomSat.value, 1);
    const bottomHex = rgb2Hex(bottomRgb.r, bottomRgb.g, bottomRgb.b);
    return {
      colors: [processColor(topHex), processColor(bottomHex)]
    }
  });

  return (
    <View style={{flex: 1, flexDirection: 'row', height: '100%', width: '100%', backgroundColor: '#565656',}}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', padding: 8}}>
        <AnimatedLinearGradient animatedProps={animatedGradProps} style={{width: 20, height: '100%', borderWidth: 1, borderColor: '#000'}} start={{x:0, y:0}} end={{x:0, y:1}}/>
      </View>
      <View style={{flex: 6, flexDirection: 'column'}}>
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <ColorWheel hue={topHue} saturation={topSat} radius={132} />
        </View>
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <ColorWheel hue={bottomHue} saturation={bottomSat} radius={132} />
        </View>
      </View>
    </View>
  )
}

The AnimatedLinearGradient uses this 3rd party library: https://github.com/react-native-linear-gradient

ColorWheel updates the hue / saturation values passed into it in a PanGestureHandler, but its functionality does not seem to be affected by the tab switch.

When switching tabs, the color props passed to the animated gradient get dropped and return unexpected results. Once a gesture/animation runs, they restore to the proper values. Additionally, the update of the tab bar component is significantly slower with the inclusion of all of the components using animated values.

I've occasionally got this to work as expected which makes me think there is a race condition happening between the JS render and the UI thread update?

Video of behavior is below.

Any ideas? Is there a better way of achieving this? Is the issue in the LinearGradient component instead? Any help much appreciated 🙏

Screen.Recording.2021-12-26.at.7.37.23.PM.mov