Step 1: Installing Dependencies

First, we need to install react-native-reanimated and react-native-svg:

yarn add react-native-reanimated react-native-svg

Step 2: Configuring Babel

Ensure the react-native-reanimated/plugin is added to your babel.config.js:

babel.config.js

module.exports = {
  presets: [
    // existing presets
  ],
  plugins: [
    // existing plugins
    'react-native-reanimated/plugin',
  ],
};

Step 3: Clearing Metro Bundler Cache

To avoid any caching issues, reset the Metro bundler cache:

yarn start --reset-cache

Step 4: Implementing Continuous Animation

Now, let’s dive into the implementation with a simple continuous animation example using a simulated temperature sensor.

App.tsx

import React, { useEffect } from 'react';
import { NativeEventEmitter, NativeModules, SafeAreaView, Text, View } from 'react-native';
import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
import { Circle, Svg } from 'react-native-svg';
 
const { BackendModule } = NativeModules;
 
const Temperature = () => {
  const AnimatedCircle = Animated.createAnimatedComponent(Circle);
  const eventEmitter = new NativeEventEmitter(NativeModules.BackendModule);
  const temperature = useSharedValue<number>(20);
 
  const animatedProps = useAnimatedProps(() => ({
    r: withTiming(temperature.value),
  }));
 
  useEffect(() => {
    const eventListener = eventEmitter.addListener('TEMPERATURE_SENSOR', event => {
      temperature.value = event.temperature;
    });
 
    BackendModule.recordTemperatures();
 
    return () => {
      eventListener.remove();
    };
  }, []);
 
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Current Temperature:</Text>
      <Svg height="200" width="200">
        <AnimatedCircle
          cx="100"
          cy="100"
          r="50"
          fill="#F58df1"
          animatedProps={animatedProps}
        />
      </Svg>
    </View>
  );
};
 
const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Temperature />
    </SafeAreaView>
  );
};
 
export default App;

Explanation of the Code

Dependencies: We use react-native-reanimated for handling animations and react-native-svg for SVG rendering.
Temperature Component: This component sets up a simulated temperature sensor with an animated circle that changes size based on the received temperature updates.
Event Handling: We use useSharedValue from react-native-reanimated to manage animated state (temperature). The useAnimatedProps hook allows us to animate SVG attributes like r (radius) based on changes in temperature.value.
Native Integration: NativeEventEmitter is used to listen for events from BackendModule, which simulates temperature updates. BackendModule.recordTemperatures() initiates the temperature recording process.

This setup provides a foundational example of integrating continuous animations in a React Native application using Reanimated and SVG, demonstrating real-time updates based on external events.

More about me

Raspberrypi Pico Bluetooth Communication Backup Vm Images without Hassle