Skip to content

Instantly share code, notes, and snippets.

@intergalacticspacehighway
intergalacticspacehighway / CollapsibleText.tsx
Last active December 18, 2023 09:55
Collapsible text using reanimated
import { useEffect, useRef } from "react";
import { View } from "react-native";
import Animated, {
useAnimatedStyle,
useSharedValue,
} from "react-native-reanimated";
// Example
export default function App() {
@intergalacticspacehighway
intergalacticspacehighway / gist:ad67264c41f65d52f11ef95e5934d50d
Last active November 13, 2023 19:14
Streaming text request in React Native PoC
import Networking from "react-native/Libraries/Network/RCTNetworking.ios";
// Same import from .android
// import Networking from "react-native/Libraries/Network/RCTNetworking.android";
let streamingServer = "Streaming Server URL";
let requestId = null;
@intergalacticspacehighway
intergalacticspacehighway / FlatListGapExample.jsx
Created February 28, 2023 01:14
Add gap in FlatList items with numColumns
import {Dimensions, FlatList, View} from 'react-native';
const screenWidth = Dimensions.get('window').width;
const numColumns = 2;
const gap = 5;
const availableSpace = screenWidth - (numColumns - 1) * gap;
const itemSize = availableSpace / numColumns;
const renderItem = ({item}) => {
@intergalacticspacehighway
intergalacticspacehighway / keyboard-aware-reanimated-scrollview.tsx
Last active March 17, 2023 12:13
keyboard aware reanimated scrollview
import React from "react";
import { Dimensions, TextInput, ScrollView } from "react-native";
import Animated, {
useAnimatedKeyboard,
useAnimatedReaction,
runOnJS,
KeyboardState,
useAnimatedProps,
useAnimatedScrollHandler,
@intergalacticspacehighway
intergalacticspacehighway / use-fetch-on-app-foreground.tsx
Created January 28, 2022 04:10
app fetch request failing in background
import { useEffect, useRef } from "react";
import { AppState, AppStateStatus } from "react-native";
export const useFetchOnAppForeground = () => {
const listener = useRef(null);
function fetchOnAppForeground(params) {
if (AppState.currentState === "active") {
return fetch(params);
} else {
@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>
@intergalacticspacehighway
intergalacticspacehighway / react-native+0.64.3.patch
Last active January 21, 2022 04:38
React native flex gap patch - only works on iOS
diff --git a/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js b/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
index 4d6f0dd..e120116 100644
--- a/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+++ b/node_modules/react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
@@ -13,104 +13,104 @@ import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid
import {Platform} from 'react-native';
const ReactNativeViewConfig = {
- uiViewClassName: 'RCTView',
+ uiViewClassName: "RCTView",
@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 }) => {
@intergalacticspacehighway
intergalacticspacehighway / PinchToZoom.tsx
Last active April 23, 2024 20:16
Pinch to zoom reanimated + gesture handler
import React, { useMemo, useState } from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native";
import {
PinchGestureHandler,
PinchGestureHandlerGestureEvent,
} from "react-native-gesture-handler";
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
@intergalacticspacehighway
intergalacticspacehighway / Timer in cpp
Last active December 26, 2021 07:24
Timer to measure performance in c++
#include <iostream>
#include <chrono>
class Timer
{
public:
Timer() {
startTimePoint = std::chrono::high_resolution_clock::now();
}
~Timer() {