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

package/example/bunfig.toml

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

package/example/components/Breathe.tsx

@@ -1,54 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,179 +0,0 @@
-// 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

@@ -1,81 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,24 +0,0 @@
-// 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

@@ -1,32 +0,0 @@
-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,
-      ]}
-    />
-  );
-}