Merge branch 'master' into release

Author: ethanshar

.flowconfig

@@ -11,8 +11,6 @@ node_modules/react-native/Libraries/polyfills/.*
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
-exact_by_default=true
-
 [untyped]
 .*/node_modules/@react-native-community/cli/.*/.*
 
@@ -25,8 +23,7 @@ node_modules/react-native/flow/
 [options]
 emoji=true
 
-esproposal.optional_chaining=enable
-esproposal.nullish_coalescing=enable
+exact_by_default=true
 
 module.file_ext=.js
 module.file_ext=.json
@@ -52,7 +49,6 @@ deprecated-type=warn
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
-deprecated-utility=error
 
 [strict]
 deprecated-type
@@ -64,4 +60,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.137.0
+^0.149.0

android/app/build.gradle

@@ -17,11 +17,6 @@ android {
     compileSdkVersion rootProject.ext.compileSdkVersion
     ndkVersion rootProject.ext.ndkVersion
 
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
-
     defaultConfig {
         applicationId "com.rnuilib"
         minSdkVersion rootProject.ext.minSdkVersion
@@ -111,7 +106,7 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.compile
+    from configurations.implementation
     into 'libs'
 }
 

android/build.gradle

@@ -2,22 +2,21 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "29.0.3"
+        buildToolsVersion = "30.0.2"
         minSdkVersion = 21
-        compileSdkVersion = 29
-        targetSdkVersion = 29
+        compileSdkVersion = 30
+        targetSdkVersion = 30
         ndkVersion = "20.1.5948944"
         RNNKotlinVersion = "1.3.61" // Or any version above 1.3.x
     }
     repositories {
         mavenLocal()
         mavenCentral()
         google()
-        jcenter()
     }
     dependencies {
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$RNNKotlinVersion"
-        classpath("com.android.tools.build:gradle:4.1.0")
+        classpath("com.android.tools.build:gradle:4.2.1")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -26,6 +25,7 @@ buildscript {
 
 allprojects {
     repositories {
+        mavenCentral()
         mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

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.75.1
+FLIPPER_VERSION=0.93.0

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.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

demo/src/index.js

@@ -66,6 +66,9 @@ module.exports = {
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
       },
+      get IconScreen() {
+        return require('./screens/componentScreens/IconScreen').default;
+      },
       get ImageScreen() {
         return require('./screens/componentScreens/ImageScreen').default;
       },
@@ -235,10 +238,10 @@ module.exports = {
         return require('./screens/realExamples/ListActions/ListActionsScreen').default;
       },
       get ProductPage() {
-        return require('./screens/realExamples/ProductPage');
+        return require('./screens/realExamples/ProductPage').default;
       },
       get Twitter() {
-        return require('./screens/realExamples/Twitter');
+        return require('./screens/realExamples/Twitter').default;
       },
       // wrapperScreens
       get TouchableOpacityScreen() {

demo/src/screens/MenuStructure.js

@@ -33,6 +33,7 @@ export const navigationData = {
       {title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
       {title: 'Chip', tags: 'chip', screen: 'unicorn.components.ChipScreen'},
       {title: 'ExpandableSection', tags: 'expandable section', screen: 'unicorn.components.ExpandableSectionScreen'},
+      {title: 'Icon', tags: 'image icon assets', screen: 'unicorn.components.IconScreen'},
       // {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},

demo/src/screens/componentScreens/CarouselScreen.tsx

@@ -36,6 +36,7 @@ interface State {
 
 class CarouselScreen extends Component<Props, State> {
   carousel = React.createRef<typeof Carousel>();
+  private dimensionsChangeListener: any;
 
   constructor(props: Props) {
     super(props);
@@ -51,11 +52,11 @@ class CarouselScreen extends Component<Props, State> {
   }
 
   componentDidMount() {
-    Constants.addDimensionsEventListener(this.onOrientationChange);
+    this.dimensionsChangeListener = Constants.addDimensionsEventListener(this.onOrientationChange);
   }
 
   componentWillUnmount() {
-    Constants.removeDimensionsEventListener(this.onOrientationChange);
+    Constants.removeDimensionsEventListener(this.dimensionsChangeListener || this.onOrientationChange);
   }
 
   onOrientationChange = () => {
@@ -116,7 +117,6 @@ class CarouselScreen extends Component<Props, State> {
           pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
           // showCounter
           allowAccessibleLayout
-          loop
         >
           {_.map([...Array(numberOfPagesShown)], (item, index) => (
             <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>

demo/src/screens/componentScreens/IconScreen.tsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import {Assets, View, Icon, Text, Slider, Switch, GradientSlider} from 'react-native-ui-lib';
+
+const IconScreen = () => {
+  const [size, setSize] = useState(24);
+  const [customSize, setCustomSize] = useState(false);
+  const [color, setColor] = useState<string | number>();
+  const [customColor, setCustomColor] = useState(false);
+
+  return (
+    <View padding-page>
+      <Text h1 marginB-s4>
+        Icon Screen
+      </Text>
+      <View center>
+        <Icon
+          margin-30
+          size={customSize ? size : undefined}
+          tintColor={customColor ? color as string : undefined}
+          source={Assets.icons.search}
+        />
+      </View>
+
+      <View marginB-s3 row>
+        <Text marginR-s2>Custom Size</Text>
+        <Switch value={customSize} onValueChange={setCustomSize}/>
+      </View>
+      <Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
+      <Text marginB-50 marginT-s2>
+        Custom size: {size}
+      </Text>
+
+      <View marginB-s3 row>
+        <Text marginR-s2>Custom Color</Text>
+        <Switch value={customColor} onValueChange={setCustomColor}/>
+      </View>
+      <GradientSlider type={GradientSlider.types.HUE} color={color as string} onValueChange={setColor}/>
+      <Text marginT-s2>Custom color: {color || '#000000'}</Text>
+    </View>
+  );
+};
+
+export default IconScreen;

demo/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -102,6 +102,7 @@ const SectionsWheelPickerScreen = () => {
         <SegmentedControl
           segments={[{label: '1 section'}, {label: '2 sections'}, {label: '3 sections'}]}
           onChangeIndex={onChangeIndex}
+          throttleTime={400}
         />
         <Text text50 marginV-20>
           Pick a duration