Skip to content

Instantly share code, notes, and snippets.

@itsramiel
Created June 20, 2022 11:07
Show Gist options
  • Save itsramiel/a34fa0553dba26014d6f624dcd35a1a7 to your computer and use it in GitHub Desktop.
Save itsramiel/a34fa0553dba26014d6f624dcd35a1a7 to your computer and use it in GitHub Desktop.
const FAB_SIZE = 70;
const INITIAL_COLOR = "#d00000";
const FINAL_COLOR = "#4BB543";
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
export default function App() {
const progress = useSharedValue<0 | 1>(0);
const FabStyle = useAnimatedStyle(() => {
return {
backgroundColor: interpolateColor(
progress.value,
[0, 1],
[INITIAL_COLOR, FINAL_COLOR]
),
};
}, []);
return (
<View style={styles.container}>
<StatusBar style="auto" />
<AnimatedPressable
style={[styles.fabContainer, FabStyle]}
onPress={() => (progress.value = 1)}
onLongPress={() => (progress.value = 0)}
></AnimatedPressable>
</View>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment