React Native / Expo

$ npm install --global expo-cli

$ brew update
$ brew install watchman

  backgroundImage: {
    flex: 1,
    resizeMode: "center",
  },

  backgroundImage: {
    width: "100%",
    height: "100%",
    resizeMode: "center",
  },

$ npm i jest jest-expo ts-jest ts-node @types/jest react-test-renderer @types/react-test-renderer --save-dev

"scripts": {
  ...
  "test": "jest"
},
"jest": {
  "preset": "jest-expo"
}

import { Config } from "@jest/types";

// By default, all files inside `node_modules` are not transformed. But some 3rd party
// modules are published as untranspiled, Jest will not understand the code in these modules.
// To overcome this, exclude these modules in the ignore pattern.
const untranspiledModulePatterns = [
  "(jest-)?react-native",
  "react-clone-referenced-element",
  "@react-native-community",
  "expo(nent)?",
  "@expo(nent)?/.*",
  "react-navigation",
  "@react-navigation/.*",
  "@unimodules/.*",
  "unimodules",
  "sentry-expo",
  "native-base",
  "@sentry/.*",
];

const config: Config.InitialOptions = {
  verbose: true,
  preset: "jest-expo",
  transformIgnorePatterns: [
    `node_modules/(?!${untranspiledModulePatterns.join("|")})`,
  ],
};

export default config;

import React from "react";
import renderer from "react-test-renderer";
import App from "./App";

describe("<App />", () => {
  it("has 1 child", () => {
    const tree = renderer.create(<App />).toTree();
    expect(tree.children.length).toBe(1);
  });
});

./node_modules/jest/bin/jest.js --config jest.config.ts

 FAIL  ./App.test.tsx
  <App />
    ✕ has 1 child (46 ms)

  ● <App /> › has 1 child

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16180:21)
      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16208:15)
      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5358:23)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5418:35)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7991:28)
      at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8547:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9994:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)

  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

       5 | describe("<App />", () => {
       6 |   it("has 1 child", () => {
    >  7 |     const tree = renderer.create(<App />).toTree();
         |                                  ^
       8 |     expect(tree.children.length).toBe(1);
       9 |   });
      10 | });

      at printWarning (node_modules/react/cjs/react.development.js:315:30)
      at error (node_modules/react/cjs/react.development.js:287:5)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1788:7)
      at Object.<anonymous> (App.test.tsx:7:34)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.559 s, estimated 2 s
R

{
  expo: {
    name: 'my-app',
    slug: 'my-app',
    version: '1.0.0',
    orientation: 'portrait',
    icon: './assets/icon.png',
    splash: {
      image: './assets/splash.png',
      resizeMode: 'contain',
      backgroundColor: '#000000'
    },
    updates: { fallbackToCacheTimeout: 0 },
    assetBundlePatterns: [ '**/*' ],
    ios: { supportsTablet: true },
    android: { adaptiveIcon: [Object] },
    web: { favicon: './assets/favicon.png' }
  }
}

moduleFileExtensions: ["ts", "tsx", "js", "jsx"],

npm i --save-dev @testing-library/react-native @testing-library/jest-native

{
  "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
}

$ expo install expo-auth-session expo-random

const useProxy = Platform.select({ web: false, default: true });
const redirectUri = AuthSession.makeRedirectUri({ useProxy });

AuthSession.fetchDiscoveryAsync("https://myapp.us.auth0.com");

const exchangeCode = async function exchangeCode(
  code: string,
  codeVerifier: string,
  discoveryDocument: AuthSession.DiscoveryDocument
) {
  const token = await AuthSession.exchangeCodeAsync(
    {
      code: code,
      clientId: auth0ClientId,
      redirectUri,
      extraParams: {
        code_verifier: codeVerifier,
      },
    },
    discoveryDocument
  );

  //...
};

export async function generateRandomAsync(size: number): Promise<string> {
  const buffer = new Uint8Array(size);
  // TODO(Bacon): Change this to be sync in the future when Expo unimodules support sync methods
  await getRandomValuesAsync(buffer);
  return convertBufferToString(buffer);
}

const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function convertBufferToString(buffer: Uint8Array): string {
  const state: string[] = [];
  for (let i = 0; i < buffer.byteLength; i += 1) {
    const index = buffer[i] % CHARSET.length;
    state.push(CHARSET[index]);
  }
  return state.join('');
}

const bytes = Random.getRandomBytes(8);
const view = new DataView(bytes.buffer);
const u1 = view.getUint32(0);
const u2 = view.getUint32(4);
return base58.int_to_base58(u1) + base58.int_to_base58(u2);

import { Alert, Image, ImageBackground, Platform, Text, TouchableOpacity, View } from 'react-native';

const discoveryDocument = AuthSession.useAutoDiscovery('https://my-app.us.auth0.com/');

[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "Not"]
* [native code]:null in parse
- node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

$ expo install native-base expo-font

import { defaults } from "jest-config";

// @ts-ignor
import * as ExpoPreset from "jest-expo/jest-preset";

<RootStack.Screen
  name="Friends"
  component={MemberListScreen}
  options={{
    headerBackTitle: 'Close',
    // For left padding
    headerBackImage: () => <Box w={4}></Box>
  }}
/>

<Tab.Navigator
  ...
  tabBarOptions={{
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray'
  }}>
  <Tab.Screen name="Main" component={MainStackScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

JSON value '{
    100 = "#f4f4f5";
    200 = "#e4e4e7";
    300 = "#d4d4d8";
    400 = "#a1a1aa";
    50 = "#fafafa";
    500 = "#71717a";
    600 = "#52525b";
    700 = "#3f3f46";
    800 = "#27272a";
    900 = "#18181b";
}' of type NSMutableDictionary cannot be converted to a UIColor. Expected an iOS semantic color or dynamic appearance aware color.

+[ABI40_0_0RCTConvert UIColor:]
    ABI40_0_0RCTConvert.m:902
-[ABI40_0_0RNSVGSvgViewManager set_tintColor:forView:withDefaultView:]
-[ABI40_0_0RCTComponentData callCustomSetter:onView:withProp:isShadowView:]
__58-[ABI40_0_0RCTComponentData createPropBlock:isShadowView:]_block_invoke_2
__46-[ABI40_0_0RCTComponentData setProps:forView:]_block_invoke
__NSDICTIONARY_IS_CALLING_OUT_TO_A_BLOCK__
-[__NSDictionaryM enumerateKeysAndObjectsWithOptions:usingBlock:]
-[ABI40_0_0RCTComponentData setProps:forView:]
__53-[ABI40_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
__53-[ABI40_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.422
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start
0x0

<View style={[tailwind('overflow-hidden rounded-lg h-80 w-60 mr-3'), styles.cardShadow]}>

.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

npm i react-native-calendars
npm i --save-dev @types/react-native-calendars

    height = defaultHeight,
    minHeight,
    maxHeight,
    backgroundColor,
    borderBottomColor,
    borderBottomEndRadius,
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderBottomStartRadius,
    borderBottomWidth,
    borderColor,
    borderEndColor,
    borderEndWidth,
    borderLeftColor,
    borderLeftWidth,
    borderRadius,
    borderRightColor,
    borderRightWidth,
    borderStartColor,
    borderStartWidth,
    borderStyle,
    borderTopColor,
    borderTopEndRadius,
    borderTopLeftRadius,
    borderTopRightRadius,
    borderTopStartRadius,
    borderTopWidth,
    borderWidth,
    // @ts-expect-error: web support for shadow
    boxShadow,
    elevation,
    shadowColor,
    shadowOffset,
    shadowOpacity,
    shadowRadius,
    opacity,
    transform,

{
  cardOverlayEnabled: true,
  cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
  headerStatusBarHeight: 0
}

const getDefaultHeaderHeight = (layout: ScaledSize): number => {
  const isLandscape = layout.width > layout.height;

  if (Platform.OS === 'ios') {
    if (isLandscape && !Platform.isPad) {
      return 32;
    } else {
      return 56;
    }
  } else if (Platform.OS === 'android') {
    return 56;
  } else {
    return 64;
  }
};

const windowDimensions = useWindowDimensions();
const headerHeight = getDefaultHeaderHeight(windowDimensions);

<Stack.Screen
  ...
  options={{
    ...
    cardOverlayEnabled: true,
    cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
    headerStatusBarHeight: 0,
    headerStyle: {
      height: headerHeight
    }
  }}
/>