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

demo/src/screens/componentScreens/index.js

@@ -20,6 +20,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
   registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
+  registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);

demo/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -80,7 +80,7 @@ class PanViewScreen extends Component {
           <PanView
             directions={[PanView.directions.DOWN]}
             dismissible
-            springBack
+            animateToOrigin
             // threshold={{y: 10}}
             containerStyle={styles.panView}
             onDismiss={this.onDialogDismissed}
@@ -113,7 +113,7 @@ class PanViewScreen extends Component {
       <PanView
         directions={[PanView.directions.LEFT, PanView.directions.DOWN, PanView.directions.RIGHT]}
         dismissible
-        springBack
+        animateToOrigin
         directionLock
         threshold={{y: 10}}
         containerStyle={styles.panView}

docs/getting-started/setup.md

@@ -26,16 +26,23 @@ import {KeyboardTrackingView, KeyboardAwareInsetsView, KeyboardRegistry, Keyboar
 
 First, run `npm install react-native-ui-lib`
 
-### Peer Dependencies
-If you plan on using specific components, see **UILib Packages** above.
+If you plan on using specific components, see **UILib Packages** above.  
 *For some packages you might still need to install one of the peer dependencies*
 
-If you want it all, install **peer dependencies**:
-```js
-npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo @react-native-picker/picker
 
-cd ios && pod install
-```
+### Peer Dependencies
+UILIb has mandatory peer dependencies on the following packages:
+- react-native-reanimated (Make sure to follow [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation))
+- react-native-gesture-handler
+
+### Optional Dependencies
+Some dependencies are optional and required by specific components or features (e.g. Card's blur features requires installing `@react-native-community/blur` package)
+
+The following are optional dependencies:
+- @react-native-community/blur
+- @react-native-community/datetimepicker
+- @react-native-community/netinfo
+- @react-native-picker/picker
 
 
 ## Install Native Dependencies
@@ -47,7 +54,7 @@ Some of the components are using the native dependencies listed below - those ar
 > It's important to run `cd ios && pod install` if you are using a component that has a native dependency.
 
 - "react-native-gesture-handler": ">=1.9.0" (mandatory)
-- "react-native-reanimated": ">=1.13.2" (mandatory)
+- "react-native-reanimated": ">=2.1.0" (mandatory)
 - "@react-native-community/blur": ">=3.4.1" (required for Card component when passing `enableBlur` prop)
 - "@react-native-community/datetimepicker": "^2.1.0"
 - "@react-native-community/netinfo": "^5.6.2" (required for ConnectionStatusBar component)

expoDemo/.babelrc

@@ -1 +1,4 @@
-{}
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

expoDemo/.buckconfig

@@ -1,61 +1,13 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# node.js
-#
 node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
-
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
-
-# Bundle artifact
-*.jsbundle
-
-# Expo
-.expo
-__generated__
-web-build
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store