Merge with conflict

README.md

@@ -13,7 +13,7 @@
 * [Local Development](#local-development)
 * [Running The Tests](#running-the-tests)
 * [Debugging](#debugging)
-* [Structure of the app](#structure-of-the-app)
+* [App Structure and Conventions](#app-structure-and-conventions)
 * [Philosophy](#Philosophy)
 * [Internationalization](#Internationalization)
 * [Deploying](#deploying)
@@ -124,7 +124,7 @@ Our React Native Android app now uses the `Hermes` JS engine which requires your
 
 ---
 
-# App structure and conventions
+# App Structure and Conventions
 
 ## Onyx
 This is a persistent storage solution wrapped in a Pub/Sub library. In general that means:

STORYBOOK.md

@@ -36,16 +36,16 @@ Here's an example story:
 
 ```javascript
 import React from 'react';
-import Button from '../components/Button';
+import ExpensifyButton from '../components/ExpensifyButton';
 
 const story = {
 	// Title field will determine how the story displays in the sidebar
-    title: 'Components/Button',
-    component: Button,
+    title: 'Components/ExpensifyButton',
+    component: ExpensifyButton,
 };
 
 // Optional `args` are passed which determine the props the example component will have
-const Template = args => <Button {...args} />;
+const Template = args => <ExpensifyButton {...args} />;
 
 // Each story must be exported with a named export
 const Default = Template.bind({});

STYLE.md

@@ -277,16 +277,16 @@ render() {
 // Bad
 const UserInfo = ({name, email}) => (
 	<View>
-		<Text>Name: {name}</Text>
-		<Text>Email: {email}</Text>
+		<ExpensifyText>Name: {name}</ExpensifyText>
+		<ExpensifyText>Email: {email}</ExpensifyText>
 	</View>
 );
 
 // Good
 const UserInfo = props => (
     <View>
-        <Text>Name: {props.name}</Text>
-        <Text>Email: {props.email}</Text>
+        <ExpensifyText>Name: {props.name}</ExpensifyText>
+        <ExpensifyText>Email: {props.email}</ExpensifyText>
     </View>
 );
 ```
@@ -701,9 +701,9 @@ class BComposedComponent extends React.Component
     render() {
         return (
             <AComponent {...props}>
-                <Text>
+                <ExpensifyText>
                     {this.state.whatever}
-                </Text>
+                </ExpensifyText>
             </AComponent>
         )
     }

STYLING.md

@@ -15,21 +15,21 @@ If we need some minimal set of styling rules applied to a single-use component t
 ```jsx
 // Bad - Since we only use this style once in this component
 const TextWithPadding = props => (
-    <Text style={styles.textWithPadding}>
+    <ExpensifyText style={styles.textWithPadding}>
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 
 // Good
 const TextWithPadding = props => (
-    <Text
+    <ExpensifyText
         style={[
             styles.p5,
             styles.noWrap,
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 
@@ -46,7 +46,7 @@ Any array of styles associated with a single type of React element that has at l
 - If a reusable style has 3 or more modifiers it should be refactored into a component with props to modify the styles e.g.
 
 ```jsx
-<Button title="Submit" success large />
+<ExpensifyButton title="Submit" success large />
 ```
 
 ## Inline Styles
@@ -56,24 +56,24 @@ Any array of styles associated with a single type of React element that has at l
 ```jsx
 // Bad - Do not use inline styles
 const TextWithPadding = props => (
-    <Text style={{
+    <ExpensifyText style={{
         padding: 10,
         whiteSpace: props.shouldWrap ? 'wrap' : 'nowrap',
     }}>
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 
 // Good
 const TextWithPadding = props => (
-    <Text
+    <ExpensifyText
         style={[
             styles.p5,
             getTextWrapStyle(props.shouldWrap)
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 
@@ -85,34 +85,34 @@ There are many styles in the `styles.js` file. It is generally a bad practice to
 // Bad - Reuses style without generalizing style name
 const SettingsScreen = props => (
     <View>
-        <Text style={[styles.settingsScreenText]}>
+        <ExpensifyText style={[styles.settingsScreenText]}>
             Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <Text style={[styles.settingsScreenText]}>
+        <ExpensifyText style={[styles.settingsScreenText]}>
             New Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 // Good
 const SettingsScreen = props => (
     <View>
-        <Text style={[styles.defaultScreenText]}>
+        <ExpensifyText style={[styles.defaultScreenText]}>
             Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 
 const SomeOtherScreen = props => (
     <View>
-        <Text style={[styles.defaultScreenText]}>
+        <ExpensifyText style={[styles.defaultScreenText]}>
             New Expensify
-        </Text>
+        </ExpensifyText>
     </View>
 );
 ```
@@ -193,7 +193,7 @@ The only time we should allow a component to have a `style` prop with `PropTypes
 ```jsx
 // Good
 const CustomText = props => (
-    <Text style={props.style}>{props.children}</Text>
+    <ExpensifyText style={props.style}>{props.children}</ExpensifyText>
 );
 
 // Good
@@ -202,14 +202,14 @@ const CustomText = props => {
             ? props.style
             : [props.style];
 }(
-    <Text
+    <ExpensifyText
         style={[
             styles.defaultCustomText,
             ...propsStyle,
         ]}
     >
         {props.children}
-    </Text>
+    </ExpensifyText>
 );
 ```
 

android/app/build.gradle

@@ -149,8 +149,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001011701
-        versionName "1.1.17-1"
+        versionCode 1001011704
+        versionName "1.1.17-4"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.17.1</string>
+	<string>1.1.17.4</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.17.1</string>
+	<string>1.1.17.4</string>
 </dict>
 </plist>

ios/Podfile.lock

@@ -425,7 +425,7 @@ PODS:
     - React-Core
   - react-native-image-picker (4.0.3):
     - React-Core
-  - react-native-netinfo (5.9.10):
+  - react-native-netinfo (7.1.3):
     - React-Core
   - react-native-pdf (6.2.2):
     - React-Core
@@ -850,7 +850,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 3930028959767285f556bd187e13b896deee31fe
+  FBReactNativeSpec: 884d4cc2b011759361797a4035c47e10099393b5
   Firebase: 54cdc8bc9c9b3de54f43dab86e62f5a76b47034f
   FirebaseABTesting: c3e48ebf5e7e5c674c5a131c68e941d7921d83dc
   FirebaseAnalytics: 4751d6a49598a2b58da678cc07df696bcd809ab9
@@ -900,7 +900,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: 0e3602a4064da040321bafad6848d8b0edcb1d55
   react-native-flipper: 169e8ba429b73ad637ce007337ce4b415e783799
   react-native-image-picker: 4089335b89b625d4e34d53fb249c48a7a791b3ea
-  react-native-netinfo: 52cf0ee8342548a485e28f4b09e56b477567244d
+  react-native-netinfo: 3a61a486f2329f5884753fd5bab21450a535d97c
   react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f
   react-native-performance: 8edfa2bbc9a2af4a02f01d342118e413a95145e0
   react-native-plaid-link-sdk: dcc247a441571b6e0b9029ab00a30f82e4cfa906

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.17-1",
+  "version": "1.1.17-4",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -42,7 +42,7 @@
     "@react-native-community/cli": "4.13.1",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/datetimepicker": "^3.5.2",
-    "@react-native-community/netinfo": "^5.9.10",
+    "@react-native-community/netinfo": "^7.1.3",
     "@react-native-community/progress-bar-android": "^1.0.4",
     "@react-native-community/progress-view": "^1.2.3",
     "@react-native-firebase/analytics": "^12.3.0",
@@ -105,6 +105,7 @@
     "react-web-config": "^1.0.0",
     "rn-fetch-blob": "^0.12.0",
     "save": "^2.4.0",
+    "smoothscroll-polyfill": "^0.4.4",
     "underscore": "^1.13.1",
     "urbanairship-react-native": "^11.0.2"
   },

src/App.js

@@ -10,6 +10,7 @@ import OnyxProvider from './components/OnyxProvider';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import ComposeProviders from './components/ComposeProviders';
 import SafeArea from './components/SafeArea';
+import initializeiOSSafariAutoScrollback from './libs/iOSSafariAutoScrollback';
 
 LogBox.ignoreLogs([
     // Basically it means that if the app goes in the background and back to foreground on Android,
@@ -40,4 +41,6 @@ const App = () => (
 
 App.displayName = 'App';
 
+initializeiOSSafariAutoScrollback();
+
 export default App;