@legendapp/list 2.0.0-next.1 → 2.0.0-next.2

package/example/bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+saveTextLockfile = true

package/example/components/Breathe.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { mix } from "react-native-redash";
+
+import Circle from "./Circle";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "black",
+  },
+});
+const Breathe = () => {
+  const progress = useSharedValue(0);
+  const goesDown = useSharedValue(false);
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(
+        1,
+        { duration: 3000, easing: Easing.bezier(0.5, 0, 0.5, 1) },
+        () => (goesDown.value = !goesDown.value)
+      ),
+      -1,
+      true
+    );
+  }, [goesDown, progress]);
+  const style = useAnimatedStyle(() => ({
+    flex: 1,
+    transform: [{ rotate: `${mix(progress.value, -Math.PI, 0)}rad` }],
+  }));
+  return (
+    <View style={styles.container}>
+      <Animated.View style={style}>
+        {new Array(6).fill(0).map((_, index) => (
+          <Circle
+            progress={progress}
+            index={index}
+            key={index}
+            goesDown={goesDown}
+          />
+        ))}
+      </Animated.View>
+    </View>
+  );
+};
+
+export default Breathe;

package/example/components/Circle.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import { clamp, mix, polar2Canvas } from "react-native-redash";
+import { LinearGradient } from "expo-linear-gradient";
+
+const { width } = Dimensions.get("window");
+const SIZE = width / 2;
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  circle: {
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    opacity: 0.5,
+  },
+});
+
+const transform = (theta: number, value: number) => {
+  "worklet";
+  const { x, y } = polar2Canvas({ theta, radius: SIZE / 2 }, { x: 0, y: 0 });
+  const translateX = mix(value, 0, x);
+  const translateY = mix(value, 0, y);
+  return [{ translateX }, { translateY }, { scale: mix(value, 0.3, 1) }];
+};
+
+interface CircleProps {
+  progress: Animated.SharedValue<number>;
+  goesDown: Animated.SharedValue<boolean>;
+  index: number;
+}
+
+const Circle = ({ progress, goesDown, index }: CircleProps) => {
+  const theta = (index * (2 * Math.PI)) / 6;
+  const style = useAnimatedStyle(() => {
+    return {
+      transform: transform(theta, progress.value),
+    };
+  });
+  const style1 = useAnimatedStyle(() => {
+    const value = goesDown.value
+      ? clamp(progress.value + 0.1, 0, 1)
+      : progress.value;
+    return {
+      opacity: interpolate(value, [0.6, 1], [0, 1], Extrapolate.CLAMP),
+      transform: transform(theta, value),
+    };
+  });
+  return (
+    <>
+      <Animated.View style={[styles.container, style1]}>
+        <LinearGradient colors={["#62BFA1", "#529CA0"]} style={styles.circle} />
+      </Animated.View>
+      <Animated.View style={[styles.container, style]}>
+        <LinearGradient colors={["#62BFA1", "#529CA0"]} style={styles.circle} />
+      </Animated.View>
+    </>
+  );
+};
+
+export default Circle;

package/example/components/Collapsible.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren, useState } from 'react';
+import { StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Colors } from '@/constants/Colors';
+
+export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const theme = useColorScheme() ?? 'light';
+
+  return (
+    <ThemedView>
+      <TouchableOpacity
+        style={styles.heading}
+        onPress={() => setIsOpen((value) => !value)}
+        activeOpacity={0.8}>
+        <IconSymbol
+          name="chevron.right"
+          size={18}
+          weight="medium"
+          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
+          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+        />
+
+        <ThemedText type="defaultSemiBold">{title}</ThemedText>
+      </TouchableOpacity>
+      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  content: {
+    marginTop: 6,
+    marginLeft: 24,
+  },
+});

package/example/components/ExternalLink.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'expo-router';
+import { openBrowserAsync } from 'expo-web-browser';
+import { type ComponentProps } from 'react';
+import { Platform } from 'react-native';
+
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: string };
+
+export function ExternalLink({ href, ...rest }: Props) {
+  return (
+    <Link
+      target="_blank"
+      {...rest}
+      href={href}
+      onPress={async (event) => {
+        if (Platform.OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          event.preventDefault();
+          // Open the link in an in-app browser.
+          await openBrowserAsync(href);
+        }
+      }}
+    />
+  );
+}

package/example/components/HapticTab.tsx

@@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import { PlatformPressable } from '@react-navigation/elements';
+import * as Haptics from 'expo-haptics';
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS === 'ios') {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

package/example/components/HelloWave.tsx

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withRepeat,
+  withSequence,
+} from 'react-native-reanimated';
+
+import { ThemedText } from '@/components/ThemedText';
+
+export function HelloWave() {
+  const rotationAnimation = useSharedValue(0);
+
+  rotationAnimation.value = withRepeat(
+    withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
+    4 // Run the animation 4 times
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotationAnimation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <ThemedText style={styles.text}>👋</ThemedText>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 28,
+    lineHeight: 32,
+    marginTop: -6,
+  },
+});

package/example/components/Movies.tsx

@@ -0,0 +1,179 @@
+// Forked from https://github.com/Almouro/rn-list-comparison-movies
+// Full credit to Alex Moreaux (@Almouro) for the original code
+
+import { LegendList, type LegendListRenderItemProps } from "@legendapp/list";
+import { FlashList } from "@shopify/flash-list";
+import * as React from "react";
+import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
+import { IMAGE_SIZE, type Movie, type Playlist, getImageUrl } from "../api";
+import { playlists as playlistData } from "../api/data/playlist";
+
+const itemCount = 0;
+
+const cardStyles = StyleSheet.create({
+    image: {
+        width: IMAGE_SIZE.width,
+        height: IMAGE_SIZE.height,
+        borderRadius: 5,
+    },
+    background: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "#272829",
+    },
+});
+
+const MoviePortrait = ({ movie }: { movie: Movie }) => {
+    return (
+        <View style={cardStyles.image}>
+            <View style={cardStyles.background} />
+            <Image
+                key={movie.id}
+                source={{ uri: getImageUrl(movie.poster_path) }}
+                style={cardStyles.image}
+                fadeDuration={0}
+            />
+        </View>
+    );
+};
+
+const MarginBetweenItems = () => <View style={{ width: margins.s }} />;
+
+const margins = {
+    s: 5,
+    m: 10,
+    l: 20,
+};
+
+const rowStyles = StyleSheet.create({
+    title: {
+        fontSize: 20,
+        fontWeight: "bold",
+        color: "white",
+        marginHorizontal: margins.m,
+        marginBottom: margins.s,
+    },
+    container: {
+        minHeight: cardStyles.image.height,
+        marginBottom: margins.l,
+        width: Dimensions.get("window").width,
+    },
+    listContainer: {
+        paddingHorizontal: margins.m,
+    },
+});
+
+const rowCount = 0;
+
+const MovieRow = ({
+    playlist,
+    ListComponent,
+    isLegend,
+}: {
+    playlist: Playlist;
+    ListComponent: typeof FlashList | typeof LegendList;
+    isLegend: boolean;
+}) => {
+    const movies = playlistData[playlist.id]();
+    const DRAW_DISTANCE_ROW = 500;
+    // let opacity = 0;
+    // if (isLegend) {
+    //     const [_opacity, setOpacity] = useRecyclingState<number>(() => {
+    //         if (setOpacity) {
+    //             requestAnimationFrame(() => setOpacity(1));
+    //             return 0;
+    //         }
+    //         return 1;
+    //     });
+    //     opacity = _opacity;
+    // } else {
+    // opacity = 1;
+    // }
+
+    // const listRef = useRef<FlashList<Movie>>(null);
+
+    //   const {onMomentumScrollBegin, onScroll} = useRememberListScroll(
+    //     listRef,
+    //     playlist.id,
+    //   );
+
+    // useEffect(() => {
+    //     rowCount++;
+    //     console.log("rowCount", rowCount);
+    // }, []);
+
+    // const fadeAnim = useRef(new Animated.Value(0)).current;
+    // // useEffect(() => {
+    // //     itemCount++;
+    // //     console.log("itemCount", itemCount);
+    // // }, []);
+
+    // useRecyclingEffect(() => {
+    //     console.log("useRecyclingEffect");
+    //     fadeAnim.setValue(0);
+    //     Animated.timing(fadeAnim, {
+    //         toValue: 1,
+    //         duration: 2000,
+    //         useNativeDriver: true,
+    //     }).start();
+    // });
+
+    return (
+        <React.Fragment>
+            <Text numberOfLines={1} style={rowStyles.title}>
+                {playlist.title}
+            </Text>
+            <View style={[rowStyles.container]}>
+                <ListComponent
+                    contentContainerStyle={rowStyles.listContainer}
+                    // See https://shopify.github.io/flash-list/docs/fundamentals/performant-components/#remove-key-prop
+                    // keyExtractor={(movie: Movie, index: number) => (isLegend ? movie.id.toString() : index.toString())}
+                    // keyExtractor={(movie: Movie, index: number) => index.toString()}
+                    ItemSeparatorComponent={MarginBetweenItems}
+                    horizontal
+                    estimatedItemSize={cardStyles.image.width + 5}
+                    data={movies}
+                    //   recycleItems
+                    renderItem={({ item }: { item: Movie }) => <MoviePortrait movie={item} />}
+                    // ref={listRef}
+                    //   onMomentumScrollBegin={onMomentumScrollBegin}
+                    //   onScroll={onScroll}
+                    drawDistance={DRAW_DISTANCE_ROW}
+                />
+            </View>
+        </React.Fragment>
+    );
+};
+
+const listStyles = StyleSheet.create({
+    container: {
+        backgroundColor: "black",
+        paddingVertical: margins.m,
+    },
+});
+
+const Movies = ({ isLegend, recycleItems }: { isLegend: boolean; recycleItems?: boolean }) => {
+    const playlists = require("../api/data/rows.json");
+
+    const ListComponent: typeof LegendList = isLegend ? LegendList : (FlashList as any);
+
+    // Flashlist appears to internally multiple the draw distance by 2-3 so increase the draw distance
+    // for the Legend version to get the same effect
+    const DRAW_DISTANCE = 500;
+    console.log("is legend", isLegend, DRAW_DISTANCE);
+
+    return (
+        <ListComponent
+            data={playlists}
+            keyExtractor={(playlist: Playlist) => playlist.id}
+            estimatedItemSize={cardStyles.image.height + 52}
+            renderItem={({ item: playlist }: LegendListRenderItemProps<Playlist>) => (
+                <MovieRow ListComponent={ListComponent} isLegend={isLegend} playlist={playlist} />
+            )}
+            contentContainerStyle={listStyles.container}
+            drawDistance={DRAW_DISTANCE}
+            recycleItems={recycleItems}
+        />
+    );
+};
+
+export default Movies;

package/example/components/ParallaxScrollView.tsx

@@ -0,0 +1,81 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { StyleSheet, useColorScheme } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollViewOffset,
+} from 'react-native-reanimated';
+
+import { ThemedView } from '@/components/ThemedView';
+import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
+
+const HEADER_HEIGHT = 250;
+
+type Props = PropsWithChildren<{
+  headerImage: ReactElement;
+  headerBackgroundColor: { dark: string; light: string };
+}>;
+
+export default function ParallaxScrollView({
+  children,
+  headerImage,
+  headerBackgroundColor,
+}: Props) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollOffset = useScrollViewOffset(scrollRef);
+  const bottom = useBottomTabOverflow();
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+          ),
+        },
+        {
+          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+        },
+      ],
+    };
+  });
+
+  return (
+    <ThemedView style={styles.container}>
+      <Animated.ScrollView
+        ref={scrollRef}
+        scrollEventThrottle={16}
+        scrollIndicatorInsets={{ bottom }}
+        contentContainerStyle={{ paddingBottom: bottom }}>
+        <Animated.View
+          style={[
+            styles.header,
+            { backgroundColor: headerBackgroundColor[colorScheme] },
+            headerAnimatedStyle,
+          ]}>
+          {headerImage}
+        </Animated.View>
+        <ThemedView style={styles.content}>{children}</ThemedView>
+      </Animated.ScrollView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    padding: 32,
+    gap: 16,
+    overflow: 'hidden',
+  },
+});

package/example/components/ThemedText.tsx

@@ -0,0 +1,60 @@
+import { Text, type TextProps, StyleSheet } from 'react-native';
+
+import { useThemeColor } from '@/hooks/useThemeColor';
+
+export type ThemedTextProps = TextProps & {
+  lightColor?: string;
+  darkColor?: string;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({
+  style,
+  lightColor,
+  darkColor,
+  type = 'default',
+  ...rest
+}: ThemedTextProps) {
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+
+  return (
+    <Text
+      style={[
+        { color },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});

package/example/components/ThemedView.tsx

@@ -0,0 +1,14 @@
+import { View, type ViewProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/useThemeColor';
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
+}

package/example/components/__tests__/ThemedText-test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+
+import { ThemedText } from '../ThemedText';
+
+it(`renders correctly`, () => {
+  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

package/example/components/__tests__/__snapshots__/ThemedText-test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Text
+  style={
+    [
+      {
+        "color": "#11181C",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 24,
+      },
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+    ]
+  }
+>
+  Snapshot test!
+</Text>
+`;

package/example/components/ui/IconSymbol.ios.tsx

@@ -0,0 +1,32 @@
+import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+  weight = 'regular',
+}: {
+  name: SymbolViewProps['name'];
+  size?: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <SymbolView
+      weight={weight}
+      tintColor={color}
+      resizeMode="scaleAspectFit"
+      name={name}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+    />
+  );
+}