superapps

bannerMapping.ts

function getBanner(banners: any[]) {
    let objectArr = Object.create(null) as {
        [key in string]: StoreBanner[]
    };
    banners?.forEach((banner) => {
        const key = _.camelCase(banner.position)
        if (!objectArr[key]) {
            objectArr[key] = []
        }
        objectArr[key].push(banner);
    })
    return objectArr;
}

Carousel.tsx

import React, {
  ComponentProps,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { Dimensions, FlatList, ListRenderItem, Animated } from "react-native";
import { Text, View } from "react-native-animatable";
import { ResizeMode } from "react-native-fast-image";
import FastImage from "react-native-fast-image";
import { useInterval } from "./useInterval";

type Props<T> = {
  dataSource: T;
  renderItem: ListRenderItem<any>;
  reverse: boolean;
  autoPlay: boolean;
  loop: boolean;
  resizeMode: ResizeMode;
} & Omit<ComponentProps<typeof FlatList>, "data">;

const FImage = Animated.createAnimatedComponent(FastImage);

const { width, height } = Dimensions.get("screen");
const ITEM_WIDTH = width * 0.76;
const ITEM_HEIGHT = height * 0.47;
const images = [
  "https://images.unsplash.com/photo-1551316679-9c6ae9dec224?w=800&q=80",
  "https://images.unsplash.com/photo-1562569633-622303bafef5?w=800&q=80",
  // 'https://images.unsplash.com/photo-1503656142023-618e7d1f435a?w=800&q=80',
  // 'https://images.unsplash.com/photo-1555096462-c1c5eb4e4d64?w=800&q=80',
  // 'https://images.unsplash.com/photo-1517957754642-2870518e16f8?w=800&q=80',
  // 'https://images.unsplash.com/photo-1546484959-f9a381d1330d?w=800&q=80',
  // 'https://images.unsplash.com/photo-1548761208-b7896a6ff225?w=800&q=80',
  // 'https://images.unsplash.com/photo-1511208687438-2c5a5abb810c?w=800&q=80',
  // 'https://images.unsplash.com/photo-1548614606-52b4451f994b?w=800&q=80',
  // 'https://images.unsplash.com/photo-1548600916-dc8492f8e845?w=800&q=80',
];
interface Propss {
  reverse?: boolean;
  isAutoPlay?: boolean;
  clonePage?: boolean;
}

function CarouselReanimateV2({ isAutoPlay = false, reverse = false }: Propss) {
  const scrollX = useRef(new Animated.Value(0)).current;
  const refFlatList = useRef() as React.RefObject<FlatList<any>> | null;
  const [dataSource, setDataSource] = useState<string[]>([...images]);
  const [autoPlay, setAutoPlay] = useState(isAutoPlay);
  const [currentPosition, setCurrentPosition] = useState(0);
  const activeInterval = useRef(null) as any;

  const [scrolling, setScrolling] = useState(false);
  const [momentumScrolling, setMomentumScrolling] = useState(false);

  const onScrolling = () => {
    if (currentPosition < 0) {
      setCurrentPosition(0);
    }
    // if(dataSource.length>1){
    const position = currentPosition + width;
    console.log("onScrolling", currentPosition);
    refFlatList?.current?.scrollToOffset({
      offset: position,
      animated: true,
    });
    const maxOffset = dataSource.length * width;
    if (currentPosition > maxOffset) {
      const offset = currentPosition - maxOffset;
      refFlatList?.current?.scrollToOffset({ offset, animated: false });
      setCurrentPosition(offset);
    } else {
      setCurrentPosition(position);
    }
    // }
  };

  const getWrappedData = () => {
    const overlappingNo = getOverlappingNo();
    return {
      data: [...dataSource, ...dataSource.slice(0, overlappingNo)],
    };
  };

  const getOverlappingNo = () => {
    const length = dataSource.length;
    let overlappingNo = 10;
    if (length < 10) {
      overlappingNo = length;
    }
    return overlappingNo;
  };

  const startScroll = () => {
    activeInterval.current = setTimeout(() => {
      setInterval(() => {
        onScrolling();
      }, 1000);
    }, 2000);
  };

  const clearScrolling = () => {
    clearTimeout(activeInterval.current);
  };

  const onMomentumScrollBegin = () => {
    clearScrolling();
  };

  const onMomentumScrollEnd = (event: any) => {
    if (momentumScrolling) {
      setMomentumScrolling(true);
      setCurrentPosition(event.nativeEvent.contentOffset.x);
      startScroll();
    }
  };

  const onScrollBegin = () => {
    setScrolling(true);
    clearScrolling();
  };

  const onScrollEnd = (event: any) => {
    setScrolling(false);
    setCurrentPosition(event.nativeEvent.contentOffset.x);
    startScroll();
  };

  const onTouchBegin = () => {
    clearScrolling();
  };

  const onTouchEnd = () => {
    if (!scrolling) {
      startScroll();
    }
  };

  useEffect(() => {
    startScroll();
    return () => {
      clearScrolling();
    };
  }, []);

  return (
    <>
      <Text>{autoPlay ? "Play" : "Pause"}</Text>
      <Animated.FlatList
        style={{ flex: 1 }}
        ref={refFlatList}
        decelerationRate="fast"
        onTouchStart={onTouchBegin}
        onTouchEnd={onTouchEnd}
        onScrollBeginDrag={onScrollBegin}
        onScrollEndDrag={onScrollEnd}
        onMomentumScrollBegin={onMomentumScrollBegin}
        onMomentumScrollEnd={onMomentumScrollEnd}
        data={getWrappedData().data}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: scrollX } } }],
          { useNativeDriver: true }
        )}
        keyExtractor={(item, index) => `${item}+${index.toString()}`}
        showsHorizontalScrollIndicator={false}
        getItemLayout={(data, index) => ({
          length: data?.length!,
          offset: width * index,
          index,
        })}
        renderItem={({ item, index }) => {
          const inputRange = [
            (index - 1) * width,
            index * width,
            (index + 1) * width,
          ];
          const translateX = scrollX.interpolate({
            inputRange,
            outputRange: [-width * 0.7, 0, width * 0.9],
            extrapolate: "clamp",
          });
          return (
            <View
              style={{
                width,
                justifyContent: "center",
                alignItems: "center",
                padding: 20,
                height,
              }}
            >
              <View
                style={{
                  borderRadius: 18,
                  borderColor: "white",
                  shadowColor: "#000",
                  shadowOpacity: 0.5,
                  shadowRadius: 10,
                  shadowOffset: {
                    height: 0,
                    width: 0,
                  },
                  backgroundColor: "white",
                  padding: 12,
                }}
              >
                <View
                  style={{
                    width: ITEM_WIDTH,
                    height: ITEM_HEIGHT / 2,
                    overflow: "hidden",
                    alignItems: "center",
                    borderRadius: 18,
                  }}
                >
                  <FImage
                    source={{ uri: item }}
                    style={{
                      width: ITEM_WIDTH * 1.4,
                      height: ITEM_HEIGHT,
                      transform: [
                        {
                          translateX,
                        },
                      ],
                    }}
                    resizeMode="cover"
                  />
                </View>
              </View>
            </View>
          );
        }}
        horizontal
      />
    </>
  );
}

export default CarouselReanimateV2;

FadeImage.tsx

import { View, Text, Platform, ActivityIndicator } from 'react-native'
import React, { ComponentProps, memo, useEffect, useRef } from 'react'
import FastImage, { ImageStyle } from "react-native-fast-image";
import { createImageProgress } from 'react-native-image-progress'
import { useCallback, useState } from 'react'
import Animated ,{Easing, interpolate}from "react-native-reanimated"
import { useFocusEffect } from "@react-navigation/native";

const getNewKey = () => Math.random().toString()

export const useCacheBust = (
    url: string,
): { bust: () => void; url: string; query: string } => {
    const [key, setKey] = useState(getNewKey())
    const bust = useCallback(() => {
        setKey(getNewKey())
    }, [])
    const query = `?bust=${key}`
    return {
        url: `${url}${query}`,
        query,
        bust,
    }
}

const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);

type Props = {
  source: ComponentProps<typeof FastImage>['source']
}
const IMAGE_URL =
    'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif'

const ImageGrid = ({ source }: Props) => {
  const { url, query } = useCacheBust(IMAGE_URL);
  const ref = useRef(new Animated.Value(0)).current;

  const onLoadEnd = () => {
    Animated.timing(ref, {
      toValue: 1,
      duration: 500,
      easing: Easing.linear,
    }).start()
   }

  return (
    <View style={{flex:1,backgroundColor:"gray"}}>
      <AnimatedFastImage
        key={query}
        useNativeDriver
        source={{
          uri: url,
          priority: FastImage.priority.high

        }}
        style={{
          flex: 1,
          opacity: interpolate(ref, {
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: Animated.Extrapolate.CLAMP,
          })
        }}
        shouldRasterizeIOS={Platform.OS === "ios" ? true : false}
        onLoadEnd={onLoadEnd}
      />
    </View>
  )
}

export default memo(ImageGrid)

manipulateDirect.tsx

import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
import { ScrollView, Text } from "react-native";
import { View } from "react-native-animatable";
import EStyleSheet from "react-native-extended-stylesheet";
import { FlatList } from "react-native-gesture-handler";
import Center from "../../components/container/Center";
import Container from "../../components/container/Container";
import TextI18n from "../../components/text/TextI18n";
import TextProximaSoft from "../../components/text/TextProximaSoft";
import ModalAmountCard from "./components/ModalAmountCard";


const ModalAmountScreen = () => {
	const [amounts, setAmount] = useState([1, 1.25, 2, 5, 10, 20]);
	const selectedAmount = useRef(0)
	const setOpacityTo = useCallback((value, index) => {
		dataRefs.forEach((ref, i) => {
			ref?.current?.setNativeProps({
				style: i === index ? { backgroundColor: "red" } : { backgroundColor: "blue" }
			})
		})
	}, []);

	const dataRefs = [] as any[]
	amounts.forEach(_ => {
		dataRefs.push(React.createRef());
	});



	return (
		<Container flex={1}>
			<Center>
				<TextProximaSoft >
					<TextI18n code="amount" style={{ fontSize: 16, fontWeight: "bold" }} />
				</TextProximaSoft>
			</Center>
			<ScrollView style={{ paddingHorizontal: 15 }}>
				{amounts.map((amount, index) => {
					return <ModalAmountCard ref={dataRefs[index]} amount={amount} onPressAmount={(amount) => {
						selectedAmount.current = amount
						setOpacityTo({ opacity: 0 }, index);
					}} />
				})}
			</ScrollView>
		</Container>
	)
}

export default ModalAmountScreen

react-native-reanimated-carousel.tsx

<CarouselV2
    vertical={false}
    enableSnap
    autoPlay
    autoPlayInterval={4000}
    // loop
    data={dataList}
    onProgressChange={(_, absoluteProgress) =>
        (progressValue.value = absoluteProgress)
    }

    snapEnabled
    width={itemWidth}
    autoPlayReverse
    mode='parallax'
    modeConfig={{
        parallaxScrollingScale: 0.9,
        parallaxScrollingOffset: 45,
        parallaxAdjacentItemScale: 0.81,
    }}
    renderItem={renderItem}
/>

recycle-list.tsx

import React, { ComponentProps, useMemo, useRef } from 'react'
import { StoreItemResponseData, StoreListResponseData } from "../../../../commons/http/types/StoreApiType";
import { useInfiniteStoreItemListing } from "../../../../commons/queries/useStoreApis";
import Product from "../../components/Product";
import ProductItemGrid from "../../components/ProductItem_Grid";
import { Dimensions, NativeScrollEvent, NativeSyntheticEvent, StyleSheet, Text, View } from "react-native";
import { CloudGroup } from "../../../../commons/http/types/CloudTypes";
import { DataProvider, RecyclerListView, LayoutProvider } from "recyclerlistview"
import _ from 'lodash'
const { width, height } = Dimensions.get('window')


type P = ComponentProps<typeof Product>
type Props = {
	selectedCategoryId: number
	store: StoreListResponseData;
	serviceId: number;
	analyticBanner: P["analyticBanner"]
	analyticSpotlight: P["analyticSpotlight"]
	cloud?: CloudGroup
	promotions?: {
		items: StoreItemResponseData[];
		title: string;
	}
	width: number;
	categoryWidth: number
	onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void | undefined
};
const RTC = ({
	selectedCategoryId,
	store,
	serviceId,
	analyticBanner,
	analyticSpotlight,
	cloud,
	promotions,
	categoryWidth,
	width,
	onScroll }: Props) => {
	const { data, fetchNextPage, hasNextPage, isFetched, isFetchingNextPage } = useInfiniteStoreItemListing(serviceId, {
		companyId: store?.store_id,
		categoryId: selectedCategoryId,
		perPage: 20,
	});


	const rowRenderer = (type: any, item: any) => {
		return <Product
			store={store}
			serviceId={serviceId}
			item={item}
			type="grid"
			hideSpecialInstruction
			analyticBanner={analyticBanner}
			analyticSpotlight={analyticSpotlight}
			renderItem={(props) => (
				<ProductItemGrid
					{...props}
					width={width - categoryWidth - 2}
					spacing={15}
				/>
			)
			}
		/>
	};

	const _layoutProvider = useRef(new LayoutProvider(
		i => 1,
		(_, dim) => {
			dim.width = width / 2;
			dim.height = height / 2;
		},
	))

	if (!data?.pages.length) return null;
	return (
		<View style={styles.container} >
			{data?.pages && <RecyclerListView
				onEndReachedThreshold={1}
				layoutProvider={_layoutProvider.current}
				dataProvider={dataProviderMaker(data?.pages?.map((page) => page?.data?.data).flat())}
				rowRenderer={rowRenderer} />}
		</View>
	)



}
const dataProviderMaker = (data: any[]) => {
	console.log("DATA", JSON.stringify(data, null, 2));
	return new DataProvider((r1, r2) => !_.isEqual(r1, r2)).cloneWithRows([...data])
}

export default RTC;
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#FFF',
		minHeight: 1,
		minWidth: 1,
	},
	body: {
		marginLeft: 10,
		marginRight: 10,
		maxWidth: width - (80 + 10 + 20),
	},
	image: {
		height: 80,
		width: 80,
	},
	name: {
		fontSize: 20,
		fontWeight: 'bold',
	},
	description: {
		fontSize: 14,
		opacity: 0.5,
	},
	listItem: {
		flexDirection: 'row',
		margin: 10,
	},
});