hirbod

I recommend to not use this anymore. Switch over to expo-image

If anybody needs animated webP support with Expo (Custom Dev Client) for the native <Image /> and <FastImage /> (read comments):

Android

// create a file like plugins/withAnimatedWebPSupport.js -> this is for the native <Image />

const {

hirbod

// disable forced dark mode to prevent weird color changes
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createRunOncePlugin, withAndroidStyles, AndroidConfig } = require('expo/config-plugins')

function setForceDarkModeToFalse(styles) {
  const newStyles = AndroidConfig.Styles.assignStylesValue(styles, {
    add: true,
    // ############# FOLLOW IF YOU'RE ON SDK 52 #############
    // TODO: AndroidConfig.Styles.getAppThemeGroup() will be available in SDK 52 (or expo/config-plugins 9+), for now I just hardcoded AppTheme
    // parent: AndroidConfig.Styles.getAppThemeGroup(),

hirbod

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

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';

hirbod

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

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

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

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

hirbod

// 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

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 {