Skip to content

Instantly share code, notes, and snippets.

@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
@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,
@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-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,
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()
@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";
@rickyansari
rickyansari / CountDownTimerHook.jsx
Last active December 6, 2022 20:42
Count Down Timer hook. which can be used in react-native and react application.
import React, {useEffect, useState} from 'react';
const ON = 'on';
const OFF = 'off';
const defaultTimerValue = 3;
const defaultTimerInterval= 1000;
const defaultTimeOutCallback = ()=>{alert('Time Over)};
function useCountDownTimer({
initialValue = defaultTimerValue,
interval = defaultTimerInterval,
@nandorojo
nandorojo / _app.tsx
Last active August 2, 2022 16:12
React Native Web + Next.js Scroll Restoration
// pages/_app.js
import ReactNativeNextJsScrollRestore from '../react-native-next-scroll-restore'
import { useEffect } from 'react'
function MyApp({ Component, pageProps }) {
useEffect(() => {
const unsubscribe = ReactNativeNextJsScrollRestore.initialize()
return () => {
@mrousavy
mrousavy / react-native+0.63.0.patch
Last active January 29, 2022 04:14
react-native 0.63 patch for iOS 13 Modal's onRequestClose (Swipe down gesture)
diff --git a/node_modules/react-native/React/Views/RCTModalHostView.h b/node_modules/react-native/React/Views/RCTModalHostView.h
index 4e61886..2b8b6c0 100644
--- a/node_modules/react-native/React/Views/RCTModalHostView.h
+++ b/node_modules/react-native/React/Views/RCTModalHostView.h
@@ -17,7 +17,7 @@
@protocol RCTModalHostViewInteractor;
-@interface RCTModalHostView : UIView <RCTInvalidating>
+@interface RCTModalHostView : UIView <RCTInvalidating, UIAdaptivePresentationControllerDelegate>
@wmcbain
wmcbain / useSize.tsx
Last active November 17, 2021 21:43
Small little hook to use in TypeScript React Native apps to get the size of a component onLayout
import { useCallback, useState } from 'react';
import { LayoutChangeEvent } from 'react-native';
export const useSize = (): [
{
height: number;
width: number;
},
(event: LayoutChangeEvent) => void
] => {