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 21, 2025 14:01
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 December 2, 2024 00:15
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 March 20, 2025 08:39 — 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";