Merge pull request #556 from GetStream/upgrades

CRNS-282: RN 0.64, Expo 41 - upgrade packages and make corresponding changes

Author: nhannah

.eslintrc.json

@@ -3,11 +3,7 @@
     "browser": true,
     "es6": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:jest/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:jest/recommended"],
   "parser": "babel-eslint",
   "parserOptions": {
     "ecmaFeatures": {
@@ -51,10 +47,7 @@
     "react/prop-types": 0,
     "require-await": 2,
     "semi": [1, "always"],
-    "sort-destructure-keys/sort-destructure-keys": [
-      2,
-      { "caseSensitive": false }
-    ],
+    "sort-destructure-keys/sort-destructure-keys": [2, { "caseSensitive": false }],
     "sort-imports": [
       "error",
       {
@@ -65,11 +58,7 @@
         "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
       }
     ],
-    "sort-keys": [
-      "error",
-      "asc",
-      { "caseSensitive": false, "minKeys": 2, "natural": false }
-    ],
+    "sort-keys": ["error", "asc", { "caseSensitive": false, "minKeys": 2, "natural": false }],
     "valid-typeof": 2
   },
   "settings": {
@@ -107,7 +96,7 @@
         "plugin:jest/recommended",
         "plugin:prettier/recommended",
         "plugin:react/recommended",
-        "prettier/@typescript-eslint"
+        "prettier"
       ],
       "files": ["**/*.ts", "**/*.tsx"],
       "parser": "@typescript-eslint/parser",
@@ -168,10 +157,7 @@
         "react/prop-types": 0,
         "require-await": 2,
         "semi": [1, "always"],
-        "sort-destructure-keys/sort-destructure-keys": [
-          2,
-          { "caseSensitive": false }
-        ],
+        "sort-destructure-keys/sort-destructure-keys": [2, { "caseSensitive": false }],
         "sort-imports": [
           "error",
           {
@@ -182,11 +168,7 @@
             "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
           }
         ],
-        "sort-keys": [
-          "error",
-          "asc",
-          { "caseSensitive": false, "minKeys": 2, "natural": false }
-        ],
+        "sort-keys": ["error", "asc", { "caseSensitive": false, "minKeys": 2, "natural": false }],
         "typescript-sort-keys/interface": [
           "error",
           "asc",

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+dotgit/hooks/pre-commit-format.sh && dotgit/hooks/pre-commit-reject-binaries.py

.prettierrc

@@ -1,6 +1,7 @@
 {
   "arrowParens": "always",
   "jsxSingleQuote": true,
+  "printWidth": 100,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all"

babel.config.js

@@ -27,11 +27,7 @@ module.exports = (api) => {
         ],
         'module-resolver',
       ],
-      presets: [
-        '@babel/env',
-        'module:metro-react-native-babel-preset',
-        '@babel/preset-typescript',
-      ],
+      presets: ['@babel/env', 'module:metro-react-native-babel-preset', '@babel/preset-typescript'],
     };
   }
 
@@ -72,10 +68,6 @@ module.exports = (api) => {
       ],
       'module-resolver',
     ],
-    presets: [
-      '@babel/env',
-      'module:metro-react-native-babel-preset',
-      '@babel/preset-typescript',
-    ],
+    presets: ['@babel/env', 'module:metro-react-native-babel-preset', '@babel/preset-typescript'],
   };
 };

bin/validate-translations.js

@@ -19,9 +19,7 @@ fs.readdir(directoryPath, function (err, files) {
     keys.forEach((key) => {
       if (!data[key] || data[key] === '') {
         countMissingTranslations = countMissingTranslations + 1;
-        console.error(
-          'Missing translation for key "' + key + '" in "' + file + '"',
-        );
+        console.error('Missing translation for key "' + key + '" in "' + file + '"');
       }
     });
   });

examples/ExpoMessaging/.expo-shared/assets.json

@@ -1,4 +1,4 @@
 {
   "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
   "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
-}
+}

examples/ExpoMessaging/App.js

@@ -1,17 +1,10 @@
 /* eslint-disable react/display-name */
 import 'react-native-gesture-handler';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { LogBox, SafeAreaView, useColorScheme, View } from 'react-native';
-import {
-  DarkTheme,
-  DefaultTheme,
-  NavigationContainer,
-} from '@react-navigation/native';
+import { LogBox, SafeAreaView, StatusBar, useColorScheme, View } from 'react-native';
+import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator, useHeaderHeight } from '@react-navigation/stack';
-import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { StreamChat } from 'stream-chat';
 import {
   Channel,
@@ -89,11 +82,7 @@ const ChannelScreen = ({ navigation }) => {
   return (
     <SafeAreaView>
       <Chat client={chatClient} i18nInstance={streami18n}>
-        <Channel
-          channel={channel}
-          keyboardVerticalOffset={headerHeight}
-          thread={thread}
-        >
+        <Channel channel={channel} keyboardVerticalOffset={headerHeight} thread={thread}>
           <View style={{ flex: 1 }}>
             <MessageList
               onThreadSelect={(thread) => {
@@ -116,11 +105,7 @@ const ThreadScreen = () => {
   return (
     <SafeAreaView>
       <Chat client={chatClient} i18nInstance={streami18n}>
-        <Channel
-          channel={channel}
-          keyboardVerticalOffset={headerHeight}
-          thread={thread}
-        >
+        <Channel channel={channel} keyboardVerticalOffset={headerHeight} thread={thread}>
           <View
             style={{
               flex: 1,
@@ -172,6 +157,7 @@ const App = () => {
         <OverlayProvider
           bottomInset={bottom}
           i18nInstance={streami18n}
+          translucentStatusBar
           value={{ style: theme }}
         >
           {clientReady && (
@@ -211,9 +197,7 @@ const App = () => {
 export default () => {
   const theme = useStreamChatTheme();
   return (
-    <SafeAreaProvider
-      style={{ backgroundColor: theme.colors?.white_snow || '#FCFCFC' }}
-    >
+    <SafeAreaProvider style={{ backgroundColor: theme.colors?.white_snow || '#FCFCFC' }}>
       <App />
     </SafeAreaProvider>
   );

examples/ExpoMessaging/app.json

@@ -3,11 +3,7 @@
     "name": "ExpoMessaging",
     "slug": "ExpoMessaging",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -19,9 +15,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "usesIcloudStorage": true

examples/ExpoMessaging/metro.config.js

@@ -50,31 +50,28 @@ function buildFullModuleMap(
 
   alreadyVisited[moduleRoot] = true;
 
-  listDirectories(
-    moduleRoot,
-    ({ fileName, fullFileName, symbolic, external }) => {
-      if (symbolic)
-        return buildFullModuleMap(
-          resolvePath(fullFileName, 'node_modules'),
-          mainModuleMap,
-          externalModuleMap,
-          alreadyVisited,
-        );
-
-      const moduleMap = external ? externalModuleMap : mainModuleMap,
-        moduleName = prefix ? PATH.join(prefix, fileName) : fileName;
-
-      if (fileName.charAt(0) !== '@') moduleMap[moduleName] = fullFileName;
-      else
-        return buildFullModuleMap(
-          fullFileName,
-          mainModuleMap,
-          externalModuleMap,
-          alreadyVisited,
-          fileName,
-        );
-    },
-  );
+  listDirectories(moduleRoot, ({ fileName, fullFileName, symbolic, external }) => {
+    if (symbolic)
+      return buildFullModuleMap(
+        resolvePath(fullFileName, 'node_modules'),
+        mainModuleMap,
+        externalModuleMap,
+        alreadyVisited,
+      );
+
+    const moduleMap = external ? externalModuleMap : mainModuleMap,
+      moduleName = prefix ? PATH.join(prefix, fileName) : fileName;
+
+    if (fileName.charAt(0) !== '@') moduleMap[moduleName] = fullFileName;
+    else
+      return buildFullModuleMap(
+        fullFileName,
+        mainModuleMap,
+        externalModuleMap,
+        alreadyVisited,
+        fileName,
+      );
+  });
 }
 
 function buildModuleResolutionMap() {
@@ -87,11 +84,7 @@ function buildModuleResolutionMap() {
   return Object.assign({}, externalModuleMap, moduleMap);
 }
 
-function findAlternateRoots(
-  moduleRoot = baseModulePath,
-  alternateRoots = [],
-  _alreadyVisited,
-) {
+function findAlternateRoots(moduleRoot = baseModulePath, alternateRoots = [], _alreadyVisited) {
   const alreadyVisited = _alreadyVisited || {};
   if (alreadyVisited && alreadyVisited.hasOwnProperty(moduleRoot)) return;