Skip to content

Instantly share code, notes, and snippets.

View hirbod's full-sized avatar

Hirbod hirbod

View GitHub Profile
@hirbod
hirbod / clear-stale-persisted-data.ts
Last active April 8, 2024 12:16
React Query Persister: clear stale data on boot (requires react-native-mmkvm runs on iOS, Android and Web)
export const useClearStalePersistedReactQueryData = () => {
useEffect(() => {
const threeDaysAgo = Date.now() - 3 * 24 * 60 * 60 * 1000 // Timestamp of 3 days ago
storage.getAllKeys().forEach((entry) => {
// we only want to clear the data for react-query with the prefix 'my-random-prefix'
if (!entry.startsWith('my-random-prefix')) {
return
}
@hirbod
hirbod / VideoThumbnail.tsx
Created November 28, 2023 17:10
expo-video-thumbnails for iOS, Android and Web
import React, { useState, useEffect, useCallback } from "react";
import { Platform } from "react-native";
import * as VideoThumbnails from "expo-video-thumbnails";
import { Image } from "@showtime-xyz/universal.image";
import Spinner from "@showtime-xyz/universal.spinner";
import { View } from "@showtime-xyz/universal.view";
interface VideoThumbnailProps {
@hirbod
hirbod / react-native-reanimated-drag-sort_apple-music.jsx
Created January 14, 2023 15:46 — forked from eveningkid/react-native-reanimated-drag-sort_apple-music.jsx
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,
@hirbod
hirbod / app-release.md
Last active August 22, 2023 06:21
How to get your App through the App/Play store safely

How to Successfully Publish Your App on the App Store or Google Play

As someone who has released many apps starting in 2015 using frameworks such as Cordova and Ionic, and more recently using React Native and Expo, I have learned that the rules for publishing apps can change frequently and can sometimes be challenging to navigate. With that in mind, I want to provide a brief guide to help others navigate the process. While this guide may not cover every aspect of publishing an app, it does cover general tips and information that should be useful for anyone looking to release their app on the App Store or Google Play.

Metadata

Keywords, Description, Screenshots, App Name, Promo Videos

There are significant differences between Apple and Google when it comes to metadata. Apple is generally stricter than Google, so it is advisable to follow Apple's guidelines to ensure the best chances of success on both platforms. Here are some tips to keep in mind:

  1. Keep your screenshots and promo videos separat
import { BottomSheetModal, BottomSheetModalProps } from '@gorhom/bottom-sheet';
import { useCallback, useRef } from 'react';
import { BackHandler, NativeEventSubscription } from 'react-native';
/**
* hook that dismisses the bottom sheet on the hardware back button press if it is visible
* @param bottomSheetRef ref to the bottom sheet which is going to be closed/dismissed on the back press
*/
export const useBottomSheetBackHandler = (
bottomSheetRef: React.RefObject<BottomSheetModal | null>,
@hirbod
hirbod / instagram-like-button.jsx
Created October 20, 2022 17:26 — forked from vcapretz/instagram-like-button.jsx
A simple Like button with a nice animation using react-native-reanimated v2, support for my post in https://vcapretz.com/2021/instagram-button-react-native
import React from "react";
import Animated, {
useSharedValue,
withSpring,
useAnimatedStyle,
Extrapolate,
interpolate,
} from "react-native-reanimated";
import { Pressable, View, Button, StyleSheet } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
@hirbod
hirbod / useKeyboardBottomInset hook
Created July 1, 2022 16:27 — forked from intergalacticspacehighway/useKeyboardBottomInset hook
Hook to get keyboard height in React Native and add bottom/padding inset on a view.
import { Keyboard, Platform, KeyboardEvent } from 'react-native';
const useKeyboardBottomInset = () => {
const [bottom, setBottom] = React.useState(0);
const subscriptions = React.useRef([]);
React.useEffect(() => {
function onKeyboardChange(e) {
if (
e.startCoordinates &&
@hirbod
hirbod / withIosTextInputMask.js
Created March 14, 2022 16:25
Expo config plugin to make react-native-text-input-mask works on iOS.
const { withDangerousMod, createRunOncePlugin } = require('@expo/config-plugins');
const { readFile, writeFile } = require('fs');
const pkg = require('./node_modules/react-native-text-input-mask/package.json');
function withIosTextInputMask(config) {
return withDangerousMod(config, [
'ios',
async (config) => {
const filePath = 'ios/Podfile';
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>
@hirbod
hirbod / withDisableForcedDarkModeAndroid.js
Last active May 2, 2024 09:26
Expo Config Plugin to disable forced Dark mode.
// disable forced dark mode to prevent weird color changes on
// certain android devices (Xiaomi MIUI and others enforcing dark mode with view analyzing)
// create a file like "plugins/withDisableForcedDarkModeAndroid.js". Insert this content and edit your app.config.js/app.json
/*
"expo": {
...
...
...
"plugins": [