How to achieve the ripple effect in React Native - reactjs

Question

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?

Answer 1

You can achieve it using react-native-lottie easily
Working example: https://codesandbox.io/s/loving-leakey-0e5j5n
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
Download lottie json file (You will need an account for it) and you can change also layers color before download. This
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;