Replies: 1 comment
-
I fixed it by using a Flatlist and use onViewableItemsChanged to only animate Viewable items. import React from "react";
import { Button, SafeAreaView, StyleSheet, TextInput, TextStyle, ScrollView, Text, View, FlatList, ViewToken } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
const numberOfInputs = 100;
const inputsArray = Array.from(Array(numberOfInputs).keys());
function App(): JSX.Element {
const sharedTextColor = useSharedValue<string>("red");
const sharedViewableItems = useSharedValue<ViewToken[]>([]);
const handleChangeColor = () => {
let hue = 0;
const interval = setInterval(() => {
if (hue > 300) clearInterval(interval);
sharedTextColor.value = `hsl(${hue}, 100%, 50%)`;
hue += 1;
}, 10);
};
const Header = () => {
return (
<>
<Text style={styles.title}>Animated TextInput: {numberOfInputs}</Text>
<Button title="Start Animation" onPress={handleChangeColor} />
</>
);
};
const handleViewableItemsChanged = (props: { viewableItems: ViewToken[] }) => {
sharedViewableItems.value = props.viewableItems;
};
return (
<SafeAreaView style={styles.container}>
<Header />
<FlatList
style={styles.scrollView}
contentContainerStyle={styles.scrollViewContent}
data={inputsArray}
renderItem={({ item }) => <RenderItem item={item} sharedValues={{ sharedTextColor, sharedViewableItems }} />}
onViewableItemsChanged={handleViewableItemsChanged}
/>
</SafeAreaView>
);
}
const RenderItem = ({
item: index,
sharedValues,
}: {
item: number;
sharedValues: {
sharedTextColor: Animated.SharedValue<string>;
sharedViewableItems: Animated.SharedValue<ViewToken[]>;
};
}) => {
const rViewableItems = useDerivedValue(() => {
return sharedValues.sharedViewableItems.value.filter(x => x.isViewable).find(item => {
return item.index === index;
});
});
const lastColor = useSharedValue<string>(sharedValues.sharedTextColor.value);
const colorToAnimate = useDerivedValue(() => {
return rViewableItems.value ? sharedValues.sharedTextColor.value : lastColor.value;
});
const rInputStyles = useAnimatedStyle<TextStyle>(() => {
return {
color: colorToAnimate.value,
};
});
return <AnimatedTextInput style={[rInputStyles, styles.input]} key={index} multiline={true} defaultValue={`Input ${numberOfInputs - index}`} scrollEnabled={false} />;
};
const styles = StyleSheet.create({
container: {
backgroundColor: "white",
flex: 1,
},
scrollView: {
flex: 1,
},
scrollViewContent: {
// flex: 1,
width: "100%",
paddingHorizontal: 20,
},
input: {
paddingVertical: 10,
},
title: {
fontSize: 20,
fontWeight: "bold",
textAlign: "center",
},
}); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello I'm building an editor and I want to change text line color with a Slider but UI FPS drop heavely on IOS.
Dependencies :
It work better with RN2 and SDK 48
There is a minimal reproduction of FPS dropping.
There is maybe an other way to deal with that ?
Beta Was this translation helpful? Give feedback.
All reactions