Skip to content

Instantly share code, notes, and snippets.

@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";
import React from 'react'
import { useMutation, useQuery, useQueryClient } from 'react-query'
const toggleLikeTweet = async (tweetId) => {
// Send a request to API
}
function LikeTweet({ tweetId, isLiked }) {
const queryClient = useQueryClient()
@eveningkid
eveningkid / react-native-reanimated-drag-sort_apple-music.jsx
Last active April 24, 2025 20:48
React Native Reanimated 2 Multiple Drag and Sort: Apple Music Example
// Expo SDK40
// expo-blur: ~8.2.2
// expo-haptics: ~8.4.0
// react-native-gesture-handler: ~1.8.0
// react-native-reanimated: ^2.0.0-rc.0
// react-native-safe-area-context: 3.1.9
import React, { useState } from 'react';
import {
Image,
@mrousavy
mrousavy / fastReverse.ts
Last active January 28, 2022 22:59
A JS function that returns a copy of the input Array in reversed order
/**
* Returns a reversed copy of the given Array
*/
export function fastReverse<T>(arr: T[]): T[] {
const result = new Array<T>(arr.length);
for (let i = 0; i < arr.length; i++) {
result[i] = arr[arr.length - 1 - i];
}
return result;
};
@eveningkid
eveningkid / react-native-animated_twitter-profile.jsx
Last active January 4, 2025 14:36
React Native Animated: Twitter Profile Example
// Expo SDK41
// expo-blur: ~9.0.3
import React, { useRef } from 'react';
import {
Animated,
Image,
ImageBackground,
ScrollView,
StatusBar,
@nandorojo
nandorojo / Hoverable.ts
Last active February 15, 2023 12:37
React Native Web Hoverability (with react-native-reanimated)
// credit to https://gist.github.com/ianmartorell/32bb7df95e5eff0a5ee2b2f55095e6a6
// this file was repurosed from there
// via this issue https://gist.github.com/necolas/1c494e44e23eb7f8c5864a2fac66299a
// because RNW's pressable doesn't bubble events to parent pressables: https://github.com/necolas/react-native-web/issues/1875
/* eslint-disable no-inner-declarations */
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'
let isEnabled = false
@kjmph
kjmph / A_UUID_v7_for_Postgres.sql
Last active May 20, 2025 14:04
Postgres PL/pgSQL function for UUID v7 and a bonus custom UUID v8 to support microsecond precision as well. Read more here: https://datatracker.ietf.org/doc/rfc9562/
-- Based off IETF draft, https://datatracker.ietf.org/doc/draft-peabody-dispatch-new-uuid-format/
create or replace function uuid_generate_v7()
returns uuid
as $$
begin
-- use random v4 uuid as starting point (which has the same variant we need)
-- then overlay timestamp
-- then set version 7 by flipping the 2 and 1 bit in the version 4 string
return encode(
@cesargdm
cesargdm / DateTimePicker.web.ts
Last active June 1, 2022 00:55
DateTimePicker.web.ts
// DateTimePicker.web.ts
import React, { useEffect, useRef, ReactElement } from 'react'
import { TextInput } from 'react-native'
import { format } from 'date-fns'
interface Props {
minimumDate: Date
maximumDate: Date
value: string
onChange: (value: string) => void
@intergalacticspacehighway
intergalacticspacehighway / App.tsx
Created December 11, 2021 04:32
React native pager view events with reanimated
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import PagerView from 'react-native-pager-view';
import Animated, {useHandler, useEvent} from 'react-native-reanimated';
const AnimatedPager = Animated.createAnimatedComponent(PagerView);
export function usePagerScrollHandler(handlers, dependencies) {
const {context, doDependenciesDiffer} = useHandler(handlers, dependencies);
const subscribeForEvents = ['onPageScroll'];
@intergalacticspacehighway
intergalacticspacehighway / App.tsx
Created January 7, 2022 06:18
Add row/col gaps in flatlist
function App() {
const data = Array(10).fill(0);
const GAP = 5;
const numColumns = 3;
const { width } = Dimensions.get("window");
// Reduce the size to accomodate margin space by items
const ITEM_SIZE = width / numColumns - ((numColumns - 1) * GAP) / numColumns;
const renderItem = ({ index }) => {