reactjsreact-nativereact-native-reanimated-v2react-animations

How to achieve the ripple effect in React Native


enter image description here

In some applications, I see when a user is speaking the background of the user profile has these circles increasing and decreasing in radius.

How do I achieve this using React Native and Reanimated-v2?


Solution

  • You can achieve it using react-native-lottie easily

    Working example: https://codesandbox.io/s/loving-leakey-0e5j5n

    1. Find the free ripple effect that you want on https://lottiefiles.com/search?q=ripple&category=animations&type=free for example https://lottiefiles.com/16138-ripple but you can search for specific keywords and use the one that looks like with audio syncing like this one https://lottiefiles.com/31698-audio-power

    2. Download lottie json file (You will need an account for it) and you can change also layers color before download. This

    3. Integrate it using https://github.com/lottie-react-native/lottie-react-native into your react-native app.

    I have created working example here for you https://codesandbox.io/s/loving-leakey-0e5j5n styles won't be perfect in example but you can update it as per your need.

    import React from "react";
    import { StyleSheet, Text, View } from "react-native";
    import LottieView from 'lottie-react-native';
    
    function App() {
      return (
        <View style={styles.app}>
          <View style={styles.content}>
            <Text style={styles.title}>React Native Lottie</Text>
            <View style={styles.lottieContainer}>
              <LottieView source={require("./assets/ripple.json")} autoPlay loop />
            </View>
          </View>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      app: {
        flex: 1
      },
      content: {
        alignItem: "center",
        padding: 20,
        position: "relative",
        flex: 1,
        justifyContent: "center"
      },
      title: {
        fontWeight: "bold",
        fontSize: "1.5rem",
        marginVertical: "1em",
        textAlign: "center",
        zIndex: 1
      },
      lottieContainer: {
        backgroundColor: "#5295d1",
        position: "absolute",
        justifyContent: "center",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 0
      }
    });
    
    export default App;