Skip to content

Instantly share code, notes, and snippets.

View a-eid's full-sized avatar
🎯
Focusing

Ahmed Eid a-eid

🎯
Focusing
View GitHub Profile
@BalogunofAfrica
BalogunofAfrica / list-renderer.tsx
Created March 31, 2023 10:37
Simple API for using FlashList as Scrollview
import { FlashList, FlashListProps } from "@shopify/flash-list";
import React, { forwardRef, ReactElement } from "react";
type ListProps<T> = Omit<FlashListProps<T>, "children"> & { as?: "list" };
type ScrollViewProps<T> = Omit<
FlashListProps<T>,
"children" | "data" | "renderItem"
> & {
as?: "scroll-view";
children: React.ReactNode | React.ReactNode[];
@intergalacticspacehighway
intergalacticspacehighway / viewability-tracker-flatlist.tsx
Last active January 23, 2024 03:38
Viewability tracker with shared values
import { createContext, forwardRef, useCallback, useMemo } from "react";
import { FlatList, FlatListProps, ViewToken } from "react-native";
import Animated, { useSharedValue } from "react-native-reanimated";
const MAX_VIEWABLE_ITEMS = 4;
type ViewabilityItemsContextType = string[];
export const ViewabilityItemsContext = createContext<
Animated.SharedValue<ViewabilityItemsContextType>
@mrousavy
mrousavy / useStyle.ts
Last active August 1, 2023 13:16
`useStyle` - a typed `useMemo` for styles which also includes style flattening and searching
import { DependencyList, useMemo } from "react";
import {
ImageStyle,
RegisteredStyle,
StyleProp,
StyleSheet,
TextStyle,
ViewStyle,
} from "react-native";
@mrousavy
mrousavy / MEMOIZE.md
Last active April 22, 2024 19:26
Memoize!!! 💾 - a react (native) performance guide
In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and  
returning the cached result when the same
inputs occur again.                                         
                                                     — wikipedia
@derekstavis
derekstavis / FastList.tsx
Last active February 22, 2024 10:33 — forked from vishnevskiy/FastList.js
Discord's FastList, but in TypeScript
import { forEachObjIndexed } from "ramda";
import * as React from "react";
import {
Animated,
ScrollView,
View,
ViewStyle,
LayoutChangeEvent,
NativeScrollEvent,
} from "react-native";