Merge branch 'master' into release

Author: ethanshar

.flowconfig

@@ -8,13 +8,11 @@
 ; Ignore polyfills
 node_modules/react-native/Libraries/polyfills/.*
 
-; These should not be required directly
-; require from fbjs/lib instead: require('fbjs/lib/warning')
-node_modules/warning/.*
-
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
+exact_by_default=true
+
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
 
@@ -44,10 +42,6 @@ suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
@@ -70,4 +64,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.122.0
+^0.137.0

.nvmrc

@@ -1 +1 @@
-8.1.3
+14.16.0

README.md

@@ -40,7 +40,7 @@ please use `react-native-ui-lib@^3.0.0`
 ### Step 1
 Load your foundations and presets (colors, typography, spacings, etc...)
 
-```
+```js
 // FoundationConfig.js
 
 import {Colors, Typography, Spacings} from 'react-native-ui-lib';
@@ -71,7 +71,7 @@ Spacings.loadSpacings({
 ### Step 2
 Set default configurations to your components
 
-```
+```js
 // ComponentsConfig.js
 
 import {ThemeManager} from 'react-native-ui-lib';
@@ -97,7 +97,7 @@ ThemeManager.setComponentTheme('Button', (props, context) => {
 Use it all together. 
 Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://wix.github.io/react-native-ui-lib/foundation/modifiers). 
 
-```
+```jsx
 // MyScreen.js
 
 import React, {Component} from 'react';

_editorconfig

@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf

android/app/build.gradle

@@ -15,6 +15,7 @@ def enableHermes = project.ext.react.get("enableHermes", false)
 
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
+    ndkVersion rootProject.ext.ndkVersion
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
@@ -63,11 +64,12 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
             }
 
         }

android/app/src/debug/AndroidManifest.xml

@@ -4,5 +4,7 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>

android/app/src/main/AndroidManifest.xml

@@ -21,7 +21,5 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
-
 </manifest>

android/app/src/main/res/values/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
     </style>

android/build.gradle

@@ -2,10 +2,11 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "29.0.2"
-        minSdkVersion = 19
+        buildToolsVersion = "29.0.3"
+        minSdkVersion = 21
         compileSdkVersion = 29
         targetSdkVersion = 29
+        ndkVersion = "20.1.5948944"
         RNNKotlinVersion = "1.3.61" // Or any version above 1.3.x
     }
     repositories {
@@ -16,7 +17,7 @@ buildscript {
     }
     dependencies {
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$RNNKotlinVersion"
-        classpath 'com.android.tools.build:gradle:3.5.3'
+        classpath("com.android.tools.build:gradle:4.1.0")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/gradle.properties

@@ -21,4 +21,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.37.0
+FLIPPER_VERSION=0.75.1

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

demo/src/screens/ExampleScreenPresenter.js

@@ -44,7 +44,7 @@ export function renderBooleanGroup(title, options) {
                 marginR-s2
                 useCustomTheme
                 key={key}
-                textID={key}
+                testID={key}
                 value={value}
                 onValueChange={value => this.setState({[key]: value})}
               />

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -39,6 +39,10 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
     });
   };
 
+  onHintPressed = () => {
+    alert('Hint Pressed');
+  }
+
   render() {
     const {
       showHint,
@@ -85,6 +89,7 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             position={showBottomHint ? Hint.positions.BOTTOM : Hint.positions.TOP}
             useSideTip={useSideTip}
             key={targetPosition}
+            onPress={this.onHintPressed}
             targetFrame={useTargetFrame ? targetFrame : undefined}
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}

demo/src/screens/componentScreens/PickerScreen.js

@@ -137,14 +137,6 @@ export default class PickerScreen extends Component {
             //   );
             // }}
             // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
-            wheelPickerProps={{
-              style: {width: 200},
-              color: Colors.green30,
-              labelStyle: {fontSize: 32, fontFamily: 'sans-serif-condensed-light'},
-              itemHeight: 55
-            }}
-            selectLabelStyle={{color: Colors.green30}}
-            cancelLabelStyle={{color: Colors.green30}}
           >
             {_.map(options, option => (
               <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
@@ -162,7 +154,13 @@ export default class PickerScreen extends Component {
             renderCustomModal={this.renderDialog}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} label={option.label} labelStyle={Typography.text65} disabled={option.disabled}/>
+              <Picker.Item
+                key={option.value}
+                value={option}
+                label={option.label}
+                labelStyle={Typography.text65}
+                disabled={option.disabled}
+              />
             ))}
           </Picker>
 
@@ -236,7 +234,9 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Text text60 marginT-s5 marginB-s2>Migrated Picker</Text>
+          <Text text60 marginT-s5 marginB-s2>
+            Migrated Picker
+          </Text>
 
           <Picker
             migrate

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -14,7 +14,9 @@ const segments = {
     },
     {label: 'Short'}
   ],
-  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}]
+  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}],
+  fifth: [{label: 'Full'}, {label: 'Width'}],
+  sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
 };
 
 const SegmentedControlScreen = () => {
@@ -23,30 +25,42 @@ const SegmentedControlScreen = () => {
   };
 
   return (
-    <View flex bottom padding-20>
-      <View flex center>
-        <SegmentedControl onChangeIndex={(index: number) => onChangeIndex('first', index)} segments={segments.first}/>
+    <View flex bottom padding-page>
+      <View flex centerV>
+        <View center>
+          <SegmentedControl onChangeIndex={(index: number) => onChangeIndex('first', index)} segments={segments.first}/>
+          <SegmentedControl
+            onChangeIndex={(index: number) => onChangeIndex('second', index)}
+            containerStyle={styles.container}
+            segments={segments.second}
+            initialIndex={2}
+          />
+          <SegmentedControl
+            onChangeIndex={(index: number) => onChangeIndex('third', index)}
+            containerStyle={styles.container}
+            activeColor={Colors.red30}
+            segments={segments.third}
+          />
+          <SegmentedControl
+            onChangeIndex={(index: number) => onChangeIndex('forth', index)}
+            containerStyle={styles.container}
+            segments={segments.forth}
+            activeColor={Colors.grey10}
+            borderRadius={BorderRadiuses.br20}
+            backgroundColor={Colors.grey10}
+            activeBackgroundColor={Colors.grey40}
+            inactiveColor={Colors.grey70}
+          />
+        </View>
         <SegmentedControl
-          onChangeIndex={(index: number) => onChangeIndex('second', index)}
-          containerStyle={styles.container}
-          segments={segments.second}
-          initialIndex={2}
-        />
-        <SegmentedControl
-          onChangeIndex={(index: number) => onChangeIndex('third', index)}
           containerStyle={styles.container}
-          activeColor={Colors.red30}
-          segments={segments.third}
+          onChangeIndex={(index: number) => onChangeIndex('second', index)}
+          segments={segments.fifth}
         />
         <SegmentedControl
-          onChangeIndex={(index: number) => onChangeIndex('forth', index)}
           containerStyle={styles.container}
-          segments={segments.forth}
-          activeColor={Colors.grey10}
-          borderRadius={BorderRadiuses.br20}
-          backgroundColor={Colors.grey10}
-          activeBackgroundColor={Colors.grey40}
-          inactiveColor={Colors.grey70}
+          onChangeIndex={(index: number) => onChangeIndex('second', index)}
+          segments={segments.sixth}
         />
       </View>
       <Text text40 dark10>

demo/src/screens/componentScreens/StepperScreen.js

@@ -42,6 +42,17 @@ export default class StepperScreen extends Component {
             onValueChange={count => this.setState({itemsCount: count})}
             initialValue={1}
           />
+
+          <View row center>
+            <Text text60 primary>Count:  </Text>
+            <Stepper
+              step={0.5}
+              min={1}
+              max={50}
+              onValueChange={count => this.setState({itemsCount: count})}
+              initialValue={1}
+            />
+          </View>
         </View>
       </ScrollView>
     );