vincicat

Common Typing Error (Android)

Android component usually has strict typing limition - if type mismatch, Android will crash while iOS won't

example: java.lang.Double cannot be cast to java.lang.Boolean on <ScrollView> & <RefreshControl>

reason: some props in <RefreshControl> require a Boolean, but you are giving Number to those props so it won't convert and throw type error.

Modal / BottomSheet / React-Navigation Modal presentation

vincicat

vincicat

Axios Message and error code

Message	code
"Request aborted"	ECONNABORTED
"Network Error"	ERR_NETWORK
config.timeoutErrorMessage	transitional.clarifyTimeoutError ? ETIMEDOUT : ECONNABORTED
"timeout exceeded"	transitional.clarifyTimeoutError ? ETIMEDOUT : ECONNABORTED
"timeout of " + config.timeout + "ms exceeded"	transitional.clarifyTimeoutError ? ETIMEDOUT : ECONNABORTED
"Unsupported protocol " + protocol + ":"	ERR_BAD_REQUEST

vincicat

Intro

The idea of this is to list the App.js I used for library testing so

a. I don't need a mega repo for everything I tested in React Native (from the installation limitation on physical device to disk space and so on you don't want to have a standalone App for every library you tested)

b. easy demo in snack.io, which is also famous for 'bad to native modules' - so the dependency should be minimal

The current testing enviroment is RN 0.70.7+

vincicat

/* eslint-disable react-native/no-inline-styles */
import * as React from 'react';
import movies from './data/movies.json';
import {
  AppStateStatus,
  Platform,
  AppState,
  TouchableHighlight,
  ActivityIndicator,
  View,

vincicat

/* eslint-disable react-native/no-inline-styles */
import React, {useEffect, useRef} from 'react';
import {View, Text, AppState, StyleSheet, SafeAreaView} from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import useSWR, {SWRConfig} from 'swr';
import {FlatList} from 'react-native-gesture-handler';

const randomInt = range => Math.floor(Math.random() * range);
// https://github.com/vercel/swr/discussions/532
const initFocusOld = revalidate => {

vincicat

ScrollView

onMomentumScrollEnd

Some mention onMomentumScrollEnd will fire multiple times. To solve it we need a solution that will not trigger re-rendering like Ref or SharedValue (Reanimated 2)

  import { useSharedValue } from 'react-native-reanimated';
  const canMomentum = useSharedValue(false); // or use `useRef` API

vincicat

Small detail everywhere.

Issues

1. yes you can resolve with an object with property function then() (also known as thenable), but some engine will not allow you chain the then() call if you resolve your promise in that way.

solution:

a. use Promise.all() to queue your callbacks;

vincicat

// @gorhom/bottom-sheet@^4
import React, {
  useCallback,
  useLayoutEffect,
  useMemo,
  useRef,
  // useState,
} from 'react';
import { View, StyleSheet, Dimensions, Text } from 'react-native';
import MapView from 'react-native-maps';

vincicat

import React, { useEffect, useState } from 'react';
import { AccessibilityInfo } from 'react-native';
const useScreenReaderEnabled = () => {
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

  useEffect(() => {
    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
      "screenReaderChanged",
      (screenReaderEnabled) => {
        setScreenReaderEnabled(screenReaderEnabled);