Reanimated does not work with animated code? Is there a way? - react-native

Question

I am pretty new to React Native and reanimated so please bear with me if I cant explain this as I need to.
I have a FlatList that animates a single item using animted when clicked. This works great but the problem is I am trying to use it with code that uses reanimated and I get a lot of errors for some reason? I thought it was backwards compatible?
Because I need the animation to run only on a single item I can not use the reanimated way, it seems a lot harder to keep track of everything?
The code below the working code but if I change it to reanimated, no good.
Is there a way of converting the code to run properly when using reanimated or do I just have to start the animations again using reanimated animations from scratch?
The working code :-
import React, { useState, useEffect } from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
TouchableOpacity,
Animated,
} from 'react-native';
import Constants from 'expo-constants';
const dummyData = [...Array(10)].map((_, i) => ({
title: `title ${i}`,
id: i,
}));
const App = () => {
const [Data, setData] = React.useState(dummyData);
const [activeItem, setActiveItem] = React.useState(null);
const animateValue = React.useRef(new Animated.Value(0)).current;
renderItem = ({ item, index }) => {
const animate = (index) => {
setActiveItem(index);
Animated.sequence([
Animated.spring(animateValue, {
toValue: 1,
}),
Animated.spring(animateValue, {
toValue: 0,
}),
]).start(() => console.log('animation finished'));
};
animationMap = animateValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.5],
});
return (
<TouchableOpacity onPress={(e) => animate(index)}>
{activeItem === index && (
<Animated.View
style={[styles.button, { transform: [{ scale: animationMap }] }]}>
<Text>{item.title}</Text>
</Animated.View>
)}
{activeItem !== index && (
<View style={styles.button}>
<Text>{item.title}</Text>
</View>
)}
</TouchableOpacity>
);
};
return (
<View style={styles.container}>
<FlatList
data={Data}
renderItem={renderItem}
keyExtractor={({ id }) => {
return id;
}}
extraData={activeItem}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
button: {
padding: 10,
borderWidth: 1,
alignItems: 'center',
backgroundColor: 'skyblue',
},
});
export default App;
If I change Animated from reanimated, it doesnt work?
import {
StatusBar,
Text,
View,
StyleSheet,
Image,
Dimensions,
TouchableOpacity,
Platform,
TouchableWithoutFeedback,
UIManager,
LayoutAnimation,
} from "react-native";
import { FlatList } from "react-native-gesture-handler";
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
SlideInDown,
BounceOut,
BounceIn,
FadeIn,
FadeOut,
Easing,
withSpring,
withRepeat,
withTiming,
} from "react-native-reanimated";
or
import {
StatusBar,
Text,
View,
StyleSheet,
Image,
Dimensions,
TouchableOpacity,
Platform,
TouchableWithoutFeedback,
UIManager,
LayoutAnimation,
Animated,
} from "react-native";
import { FlatList } from "react-native-gesture-handler";
import {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
SlideInDown,
BounceOut,
BounceIn,
FadeIn,
FadeOut,
Easing,
withSpring,
withRepeat,
withTiming,
} from "react-native-reanimated";

Answer 1

can you try using "useSharedValue" and set the value using
"withSequence" as below mentioned:
const App = () => {
const [Data, setData] = React.useState(dummyData);
const [activeItem, setActiveItem] = React.useState(null);
//const animateValue = React.useRef(new Animated.Value(0)).current;
const animateValue = useSharedValue(0);
renderItem = ({ item, index }) => {
const animate = (index) => {
setActiveItem(index);
animateValue.value = withSequence(withTiming(1), withTiming(0))
animationMap = animateValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.5],
});
return (
<TouchableOpacity onPress={(e) => animate(index)}>
{activeItem === index && (
<Animated.View
style={[styles.button, { transform: [{ scale: animationMap }] }]}>
<Text>{item.title}</Text>
</Animated.View>
)}
{activeItem !== index && (
<View style={styles.button}>
<Text>{item.title}</Text>
</View>
)}
</TouchableOpacity>
);
};
return (
<View style={styles.container}>
<FlatList
data={Data}
renderItem={renderItem}
keyExtractor={({ id }) => {
return id;
}}
extraData={activeItem}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
button: {
padding: 10,
borderWidth: 1,
alignItems: 'center',
backgroundColor: 'skyblue',
},
});
export default App;