Skip to content

Instantly share code, notes, and snippets.

View harrisrobin's full-sized avatar
🛳️
Shipping

harris.dev harrisrobin

🛳️
Shipping
View GitHub Profile
@harrisrobin
harrisrobin / screen-component.tsx
Last active August 9, 2023 14:19
React-Navigation screen cache component (wrap every screen with this to avoid re-creating new screens when react-navigation re-renders).
import React from "react"
import { SafeAreaProvider } from "react-native-safe-area-context"
// Cache the wrapper component to avoid creating a new one every time a screen
// is created.
const componentsCache = new WeakMap<
React.ComponentType<any>,
React.ComponentType<any>
>()
{
"common": {
"ok": "OK!",
"cancel": "Cancel",
"continue": "Continue",
"doThisLater": "Do This Later",
"percentageCompleted": "%{number}% Completed",
"needHelp": "Need help ?",
"done": "Done",
"next": "Next",
/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react"
import { SafeAreaProvider } from "react-native-safe-area-context"
// Cache the wrapper component to avoid creating a new one every time a screen
// is created.
const componentsCache = new WeakMap<
React.ComponentType<any>,
React.ComponentType<any>
>()
import React from "react"
import { KeyboardAvoidingView, Platform } from "react-native"
import { StatusBar } from "expo-status-bar"
import { ScreenProps } from "./screen.props"
import { isNonScrolling, offsets, variants } from "./screen.variants"
import { useAppColorScheme } from "@zaboca/ui/hooks/use-app-color-scheme"
import { useThemeColor } from "@zaboca/ui/hooks/use-theme-color"
import { View } from "@zaboca/ui/view"
import { useSafeAreaInsets } from "@zaboca/ui/dimensions"
import { ScrollView } from "@zaboca/ui/scroll-view"
import { useEffect, useRef } from "react"
import { noop } from "../../utils"
export function useInterval(
callback: () => void,
delay: number | null | false,
immediate?: boolean,
) {
const savedCallback = useRef(noop)
import React, { FC, useMemo } from "react"
import { ViewStyle } from "react-native"
import { WebView as RNWebView } from "react-native-webview"
import {
WebViewMessageEvent,
WebViewNavigationEvent,
WebViewSourceUri,
} from "react-native-webview/lib/WebViewTypes"
interface WebViewProps {
import { ViewStyle } from "react-native"
export interface SwitchProps {
/**
* On or off.
*/
value?: boolean
/**
* Fires when the on/off switch triggers.
*
import { useRef } from 'react'
export function useFirstMountState(): boolean {
const isFirst = useRef(true)
if (isFirst.current) {
isFirst.current = false
return true
}
import { Dimensions } from "react-native"
const { width, height } = Dimensions.get("window")
export const widthBreakpoint = (() => {
switch (true) {
case width < 375:
return "small"
case width >= 375 && width < 420:
return "medium"
@harrisrobin
harrisrobin / init-iap.ts
Created March 18, 2021 04:54
React Native IAP snippets
import * as RNIap from 'react-native-iap';
const productIds = Platform.select({
ios: [
'dev.harris.rniaptutorial'
]
});