0

I'm not sure why JS thread drops frames when I'm toggling the height of the View when using react-native-reanimated v2? When I press the button JS frames are around 50-55 and UI thread fps stay 60. Thank you.

My code is pretty simple:

import React, {useEffect} from 'react';
import {
  Button,
  ImageBackground,
  StatusBar,
  StyleSheet,
  Text,
  ViewStyle,
} from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

export const TestingScreen: React.FC<TestingScreenProps> = () => {

const height = useSharedValue(0);

const style = useAnimatedStyle(() => {
  return {
    height: withTiming(height.value),
  };
});

return (
  <>
    <StatusBar barStyle="dark-content" />
    <ImageBackground
      style={styles.container}
      source={require('./../../../assets/images/cinema.jpg')}
      resizeMode={'cover'}>
      <Animated.View style={[styles.form, style]}>
        <View
          style={{
            width: 150,
            height: 150,
            backgroundColor: 'red',
          }}></View>
      </Animated.View>
      <Button
        title={'Toogle'}
        onPress={() =>
          (height.value =SCREEN_HEIGHT * Math.random())
        }
      />
      <Text
        style={{fontSize: 23, color: 'white', fontFamily: 'OpenSans-Italic'}}>
        TESTING
      </Text>
    </ImageBackground>
  </>
);
};
cinemanja
  • 481
  • 6
  • 19

1 Answers1

-1

I think this is because button pressing function (onPress prop) is in the JS side. So the pressing part happening in the JS thread. That's why JS frames drop when you hit the button.

Haritha Senevirathne
  • 97
  • 6