Skip to content

Instantly share code, notes, and snippets.

@itsramiel

itsramiel/App.tsx

Created June 20, 2022 11:07
Download ZIP

Revisions

  1. itsramiel revised this gist Jun 20, 2022. 1 changed file with 1 addition and 28 deletions.
    29 changes: 1 addition & 28 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,3 @@
    import { StatusBar } from "expo-status-bar";
    import { StyleSheet, Pressable, View } from "react-native";
    import Animated, {
    interpolateColor,
    useAnimatedStyle,
    useSharedValue,
    } from "react-native-reanimated";

    const FAB_SIZE = 70;
    const INITIAL_COLOR = "#d00000";
    const FINAL_COLOR = "#4BB543";
    @@ -35,23 +27,4 @@ export default function App() {
    ></AnimatedPressable>
    </View>
    );
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    },
    fabContainer: {
    position: "absolute",
    bottom: 30,
    right: 30,
    width: FAB_SIZE,
    height: FAB_SIZE,
    borderRadius: FAB_SIZE / 2,
    backgroundColor: INITIAL_COLOR,
    elevation: 5,
    },
    });
    }
  2. itsramiel created this gist Jun 20, 2022.
    57 changes: 57 additions & 0 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    import { StatusBar } from "expo-status-bar";
    import { StyleSheet, Pressable, View } from "react-native";
    import Animated, {
    interpolateColor,
    useAnimatedStyle,
    useSharedValue,
    } from "react-native-reanimated";

    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>
    );
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    },
    fabContainer: {
    position: "absolute",
    bottom: 30,
    right: 30,
    width: FAB_SIZE,
    height: FAB_SIZE,
    borderRadius: FAB_SIZE / 2,
    backgroundColor: INITIAL_COLOR,
    elevation: 5,
    },
    });