Waarom kiezen voor React Native bij mobiele app-ontwikkeling?

import React, { useCallback, useRef } from "react";
import { useState } from "react";
import { RefreshControl, LayoutAnimation } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

import { FlashList } from "@shopify/flash-list";

import { useSafeAreaInsets } from "react-native-safe-area-context";
import ListItem from "@/components/ListItem";

interface ShoppingItem {
  id: number;
  name: string;
  quantity: number;
  category: string;
}

const sampleItems: ShoppingItem[] = [
  { id: 1, name: "Milk", quantity: 2, category: "Dairy" },
  { id: 2, name: "Bread", quantity: 1, category: "Bakery" },
  { id: 3, name: "Eggs", quantity: 12, category: "Dairy" },
  { id: 4, name: "Bananas", quantity: 6, category: "Produce" },
  { id: 5, name: "Chicken Breast", quantity: 1, category: "Meat" },
  { id: 6, name: "Tomatoes", quantity: 4, category: "Produce" },
  { id: 7, name: "Pasta", quantity: 2, category: "Pantry" },
  { id: 8, name: "Cheese", quantity: 1, category: "Dairy" },
  { id: 9, name: "Rice", quantity: 1, category: "Pantry" },
  { id: 10, name: "Apples", quantity: 5, category: "Produce" },
];

export default function HomeScreen() {
  const insets = useSafeAreaInsets();
  const [refreshing, setRefreshing] = useState<boolean>(false);

  const list = useRef<FlashList<number> | null>(null);

  const [items, setItems] = useState<ShoppingItem[]>(sampleItems);

  const handleDelete = useCallback(
    (index: number) => {
      setTimeout(() => {
        setItems((currentItems) => currentItems.filter((_, i) => i !== index));

        // This must be called before `LayoutAnimation.configureNext` in order for the animation to run properly.
        list?.current?.prepareForLayoutAnimationRender();
        // After removing the item, we can start the animation.
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        list?.current?.recordInteraction();
      }, 128);
    },
    [list?.current]
  );

  const renderItem = useCallback(
    ({ item, index }: { item: any; index: number }) => {
      return <ListItem onDelete={handleDelete} item={item} index={index} />;
    },
    [handleDelete]
  );

  return (
    <GestureHandlerRootView>
      <FlashList
        removeClippedSubviews
        ref={list}
        extraData={items}
        contentInsetAdjustmentBehavior="automatic"
        automaticallyAdjustContentInsets
        keyExtractor={(item, index) => index.toString()}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => {
              setRefreshing(true);
              setTimeout(() => {
                setItems(sampleItems);

                setRefreshing(false);
              }, 1000);
            }}
          />
        }
        estimatedItemSize={80}
        contentContainerStyle={{
          paddingTop: insets.top,
          paddingHorizontal: 24,
          backgroundColor: "#ffffff",
        }}
        data={items}
        renderItem={renderItem}
      />
    </GestureHandlerRootView>
  );
}

import { AntDesign } from "@expo/vector-icons";
import React from "react";
import { useEffect } from "react";
import { Alert, Pressable, useWindowDimensions, Text } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  runOnJS,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

interface ShoppingItem {
  id: number;
  name: string;
  quantity: number;
  category: string;
}

// Memoized ListItem to optimize performance.

const ListItem = React.memo(
  ({
    index,
    item,
    onDelete,
  }: {
    index: number;
    item: ShoppingItem;
    onDelete: (index: number, showSuccessAlert?: boolean) => void;
  }) => {
    const position = useSharedValue(0);

    const actionButtonWidth = useSharedValue(0);

    const { width } = useWindowDimensions();

    const THRESHOLDX = -width * 0.32;

    // Gesture for detecting swiping actions.
    const panGesture = Gesture.Pan()
      .onStart((e) => {
        if (e.translationX <= 0) {
          position.value = e.translationX;
          if (e.translationX <= THRESHOLDX) {
            actionButtonWidth.value = THRESHOLDX;
          } else {
            actionButtonWidth.value = e.translationX;
          }
        }
      })
      .onUpdate((e) => {
        if (e.translationX <= 0) {
          position.value = e.translationX;
          if (e.translationX <= THRESHOLDX) {
            actionButtonWidth.value = THRESHOLDX;
          } else {
            actionButtonWidth.value = e.translationX;
          }
        }
      })
      .onEnd((e) => {
        if (e.translationX < THRESHOLDX) {
          position.value = withTiming(THRESHOLDX - 8);
        } else {
          actionButtonWidth.value = withTiming(0);
          position.value = withTiming(0);
        }
      })
      .activeOffsetX([-8, 8]);

    // Style for the swiping animation.

    const panAnimation = useAnimatedStyle(() => {
      return {
        transform: [{ translateX: position.value }],
      };
    }, []);

    // Style for the delete button animation.

    const deleteAnimation = useAnimatedStyle(() => {
      return {
        width: Math.abs(actionButtonWidth.value),
      };
    }, []);

    // Handles item deletion after confirmation.

    const handleDelete = () => {
      Alert.alert(
        "Delete Item",
        `Are you sure you want to delete item ${item?.name}?`,
        [
          {
            text: "Cancel",
            style: "cancel",
            onPress: () => {
              // Reset the item position when cancelled
              actionButtonWidth.value = withTiming(0);
              position.value = withTiming(0);
            },
          },
          {
            text: "Delete",
            style: "destructive",
            onPress: () => {
              actionButtonWidth.value = withTiming(0, { duration: 300 });
              position.value = withTiming(
                -width,
                {
                  duration: 300,
                },
                () => {
                  runOnJS(onDelete)(index);
                }
              );
            },
          },
        ]
      );
    };

    useEffect(() => {
      // Reset value when id changes (view was recycled for another item)
      position.value = 0;
      actionButtonWidth.value = 0;
    }, [item.id, position]);

    return (
      <GestureDetector gesture={panGesture}>
        <Animated.View
          style={{
            flexDirection: "row",
            marginVertical: 8,
            width: "100%",
            alignItems: "center",
            position: "relative",
          }}
        >
          {/* Swipable item */}
          <Animated.View
            style={[
              panAnimation,
              {
                width: "100%",
                borderRadius: 8,
                paddingHorizontal: 16,
                paddingVertical: 24,
                backgroundColor: "#ffffff",
                shadowColor: "#000000",
                shadowOffset: {
                  width: 0,
                  height: 0,
                },
                shadowOpacity: 0.2,
                shadowRadius: 16,
                elevation: 12,
                alignItems: "center",
                justifyContent: "center",
              },
            ]}
          >
            <Text>{item?.name}</Text>
          </Animated.View>
          {/* Delete button */}
          <Animated.View
            style={[
              deleteAnimation,
              {
                height: "100%",
                backgroundColor: "#e63946",
                borderRadius: 8,
                alignItems: "center",
                position: "absolute",
                right: 0,
                marginLeft: 8,
                justifyContent: "center",
                transformOrigin: "right",
              },
            ]}
          >
            <Pressable
              onPress={handleDelete}
              style={({ pressed }) => [
                {
                  width: "100%",
                  height: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  opacity: pressed ? 0.24 : 1,
                },
              ]}
            >
              <AntDesign name="delete" size={24} color="#f1faee" />
            </Pressable>
          </Animated.View>
        </Animated.View>
      </GestureDetector>
    );
  }
);

export default ListItem;