Merge branch 'master' into release

Author: ethanshar

.buildkite/pipeline.yml

@@ -13,3 +13,4 @@ steps:
     - "npm run test"
     - "npm run build"
     - "[[ $BUILDKITE_PULL_REQUEST == 'false' ]] && npm run bkRelease && npm run demo || true"
+    timeout_in_minutes: 15

.gitignore

@@ -43,6 +43,9 @@ buck-out/
 \.buckd/
 *.keystore
 
+lib/
+.vscode
+
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the

android/app/build.gradle

@@ -91,8 +91,8 @@ dependencies {
     } 
     implementation project(':react-native-navigation')
     implementation project(':react-native-ui-lib')
-    implementation 'com.facebook.fresco:fresco:2.0.0'
-    implementation 'com.facebook.fresco:animated-gif:2.0.0'
+    implementation 'com.facebook.fresco:fresco:2.5.0'
+    implementation 'com.facebook.fresco:animated-gif:2.5.0'
 
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         compileSdkVersion = 30
         targetSdkVersion = 30
         ndkVersion = "20.1.5948944"
-        RNNKotlinVersion = "1.3.61" // Or any version above 1.3.x
+        RNNKotlinVersion = "1.6.0"
     }
     repositories {
         mavenLocal()

demo/src/screens/componentScreens/DateTimePickerScreen.js renamed to demo/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -3,15 +3,14 @@ import {ScrollView} from 'react-native';
 import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
-
-  getCustomInputValue = value => {
+  getCustomInputValue = (value: string) => {
     if (!value) {
       return 'Default';
     }
-    return value.includes(new Date().getFullYear() + 1) ? 'Next Year' : value;
+    return value.includes((new Date().getFullYear() + 1).toString()) ? 'Next Year' : value;
   };
 
-  renderCustomInput = (props, toggle) => {
+  renderCustomInput = (props: {value: string}, toggle: (shouldToggle: boolean) => void) => {
     const {value} = props;
     return (
       <TouchableOpacity
@@ -23,7 +22,9 @@ export default class DateTimePickerScreen extends Component {
         }}
       >
         <Text>Valid from</Text>
-        <Text absR color={Colors.primary} text80BO>{this.getCustomInputValue(value)}</Text>
+        <Text absR color={Colors.primary} text80BO>
+          {this.getCustomInputValue(value)}
+        </Text>
       </TouchableOpacity>
     );
   };
@@ -33,6 +34,7 @@ export default class DateTimePickerScreen extends Component {
       <ScrollView style={{padding: 14}}>
         <Text text40>Date Time Picker</Text>
         <DateTimePicker
+          // @ts-expect-error
           containerStyle={{marginVertical: 20}}
           title={'Date'}
           placeholder={'Select a date'}

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -9,6 +9,8 @@ const BROKEN_URL = 'file:///Desktop/website/img/cupcake.jpg';
 const DEFAULT_SIZE = 100;
 
 const file = Assets.svgs.demo.logo;
+const uri = {uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'};
+const uriWithCss = {uri: 'http://thenewcode.com/assets/svg/accessibility.svg'};
 const xml = `
   <svg width="32" height="32" viewBox="0 0 32 32">
     <path
@@ -38,6 +40,13 @@ enum SizeType {
   Percentage = '50%'
 }
 
+enum SvgType {
+  File = 'file',
+  Uri = 'uri',
+  UriWithCss = 'use_with_css',
+  Xml = 'xml'
+}
+
 interface State {
   cover: boolean;
   showOverlayContent: boolean;
@@ -46,7 +55,7 @@ interface State {
   margin: number;
   showErrorImage: boolean;
   showSvg: boolean;
-  isFile: boolean;
+  svgType: SvgType;
   sizeType: SizeType;
 }
 
@@ -59,10 +68,25 @@ class ImageScreen extends Component<{}, State> {
     margin: 0,
     showErrorImage: false,
     showSvg: false,
-    isFile: false,
+    svgType: SvgType.File,
     sizeType: SizeType.None
   };
 
+  getSvgSource() {
+    const {svgType} = this.state;
+    switch (svgType) {
+      case SvgType.File:
+        return file;
+      case SvgType.Uri:
+        return uri;
+      case SvgType.UriWithCss:
+        return uriWithCss;
+      case SvgType.Xml:
+      default:
+        return xml;
+    }
+  }
+
   renderOverlayContent() {
     const {cover, overlayType, showOverlayContent} = this.state;
     if (showOverlayContent) {
@@ -105,14 +129,15 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderSvgImage() {
-    const {isFile, sizeType} = this.state;
+    const {sizeType} = this.state;
     const size: any = Number(sizeType) || sizeType;
+    const source = this.getSvgSource();
     return (
       <>
         {size ? (
-          <Image source={isFile ? file : xml} width={size} height={size}/>
+          <Image source={source} width={size} height={size}/>
         ) : (
-          <Image source={isFile ? file : xml}/>
+          <Image source={source}/>
         )}
       </>
     );
@@ -134,10 +159,9 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderSvgOptions() {
-    const {isFile} = this.state;
     return (
       <>
-        {renderBooleanOption.call(this, isFile ? 'Load from file' : 'Use xml const', 'isFile')}
+        {renderRadioGroup.call(this, 'SVG Type', 'svgType', SvgType, {isRow: true})}
         {renderRadioGroup.call(this, 'Size Type', 'sizeType', SizeType, {isRow: true})}
       </>
     );

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ModalProps} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
-import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, Button, Incubator, Colors, BorderRadiuses, Constants} from 'react-native-ui-lib'; //eslint-disable-line
 
 interface Item {
   value: string;
@@ -33,10 +33,11 @@ const colors: Item[] = [
 
 export default class IncubatorDialogScreen extends Component {
   state = {visible: false};
+  modalProps: ModalProps = {supportedOrientations: ['portrait', 'landscape']};
 
   renderVerticalItem = ({item}: {item: Item}) => {
     return (
-      <Text text50 margin-20 color={item.value}>
+      <Text text50 margin-20 color={item.value} onPress={this.closeDialog}>
         {item.label}
       </Text>
     );
@@ -54,6 +55,10 @@ export default class IncubatorDialogScreen extends Component {
     this.setState({visible: false});
   };
 
+  onDismiss = () => {
+    this.setState({visible: false});
+  };
+
   render() {
     const {visible} = this.state;
 
@@ -65,7 +70,14 @@ export default class IncubatorDialogScreen extends Component {
         <View flex center>
           <Button marginV-20 label="Open Dialog" onPress={this.openDialog}/>
         </View>
-        <Incubator.Dialog visible={visible} onDismiss={this.closeDialog} bottom containerStyle={styles.dialogContainer}>
+        <Incubator.Dialog
+          useSafeArea
+          visible={visible}
+          onDismiss={this.onDismiss}
+          bottom
+          centerH
+          modalProps={this.modalProps}
+        >
           <View style={styles.dialog}>
             <Text text60 margin-s2>
               Title (swipe here)
@@ -86,14 +98,11 @@ export default class IncubatorDialogScreen extends Component {
 }
 
 const styles = StyleSheet.create({
-  dialogContainer: {
-    bottom: 20,
-    alignSelf: 'center'
-  },
   dialog: {
+    marginBottom: 20,
     backgroundColor: Colors.white,
-    width: 200,
-    height: 300,
+    maxHeight: Constants.screenHeight * 0.8,
+    width: 300,
     borderRadius: BorderRadiuses.br20
   },
   verticalScroll: {

docs/foundation/modifiers.md

@@ -112,9 +112,9 @@ The last type of modifiers is for styling your components
 ```
 
 
-! all styling modifiers are based on our [`Colors` & `Typography` presets](/react-native-ui-lib/foundation/style).  
+! all styling modifiers are based on our [`Colors` & `Typography` presets](/docs/foundation/style).  
 You can load your own presets and use them as modifiers. 
 
 
 
-Check out [this example](/react-native-ui-lib/getting-started/usage) where we use most of these props.
+Check out [this example](/docs/getting-started/usage) where we use most of these props.

docs/getting-started/setup.md

@@ -24,7 +24,9 @@ import {KeyboardTrackingView, KeyboardAwareInsetsView, KeyboardRegistry, Keyboar
 
 ## Install UILib
 
-First, run `npm install react-native-ui-lib`
+- Run `npm install react-native-ui-lib`  
+- Install mandatory [peer dependencies](#peer-dependencies), `npm i react-native-reanimated react-native-gesture-handler`
+- Install ios pods, `cd ios && pod install`
 
 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*
@@ -62,10 +64,9 @@ Some of the components are using the native dependencies listed below - those ar
 
 ## Demo App
 
-Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/master/demo). To run it:
-
-- Clone the repo
-- Install dependencies: `npm install`
-- (for iOS) `cd ios && pod install && cd ..`
-- Start the packager: `npm start`
-- Build the app: `npm run ios` or `npm run android` (or from Xcode or Android Studio).
+- Clone the project `git clone [email protected]:wix/react-native-ui-lib.git`
+- `cd react-native-ui-lib`
+- Install dependencies `npm install`
+- (for iOS) `cd ios && pod install`
+- Start the packager `npm start`
+- Build the app `npm run ios` or `npm run android` (or from Xcode or Android Studio).

docuilib/docusaurus.config.js

@@ -7,16 +7,17 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
   module.exports = {
     title: 'RNUILib',
     tagline: 'React Native UI Lib',
-    url: 'https://github.com/wix/react-native-ui-lib',
-    baseUrl: '/',
+    url: 'https://wix.github.io',
+    baseUrl: '/react-native-ui-lib/',
     onBrokenLinks: 'throw',
     onBrokenMarkdownLinks: 'warn',
     favicon: 'img/favicon.ico',
     organizationName: 'wix', // Usually your GitHub org/user name.
     projectName: 'react-native-ui-lib', // Usually your repo name.
+    trailingSlash: false,
     customFields: {
       expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
-      stars: '3.8'
+      stars: '3.9'
     },
     plugins: ['docusaurus-plugin-sass'],
     presets: [

docuilib/src/components/ComponentsSection.module.scss

@@ -6,13 +6,16 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-
+  padding-left: 40px;
+  padding-right: 40px;
+  
   .componentsInner {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
+    padding: 0;
 
     p {
       @include desktop {

docuilib/src/components/FeatureSection.module.scss

@@ -7,6 +7,8 @@
   padding-bottom: 100px;
   width: 100%;
   text-align: center;
+  padding-left: 40px;
+  padding-right: 40px;
 
   .cards {
     display: flex;

docuilib/src/components/MainSection.module.scss

@@ -2,10 +2,10 @@
 
 .main {
   position: relative;
-  height: 75vh;
   width: 100%;
   display: flex;
   justify-content: center;
+  margin-bottom: 40px;
 
   @include desktop {
     height: 100vh;
@@ -22,16 +22,16 @@
   }
 
   .mainContent {
-    position: absolute;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     top: 15vh;
     text-align: center;
-    padding: 0 40px;
+    padding: 40px;
 
     @include desktop() {
+      position: absolute;
       padding: 0;
       top: 15vw;
       left: 7vw;
@@ -40,9 +40,15 @@
     }
 
     > p {
-      font-size: 3em;
+      font-size: 2.5em;
       font-weight: 600;
       margin: 0;
+      line-height: 1.2;
+      
+      @include desktop {
+        font-size: 3em;
+        line-height: 1.5;
+      }
 
       > .libName {
         color: $primary;
@@ -55,8 +61,10 @@
       border: 1px solid;
       border-radius: 2px;
       align-self: center;
-
+      margin-top: 20px;
+      
       @include desktop {
+        margin-top: 0;
         align-self: flex-start;
       }
 

docuilib/src/components/MainSection.tsx

@@ -8,7 +8,6 @@ import GoldStarSvg from '@site/static/img/goldStar.svg';
 
 export default () => {
   const {siteConfig} = useDocusaurusContext();
-  console.warn('ethan - siteConfig', siteConfig.customFields.stars)
 
   return (
     <div className={styles.main}>