Merge branch 'master' into release

Author: ethanshar

android/app/build.gradle

@@ -4,7 +4,7 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     entryFile: "index.js",
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"

android/app/src/main/java/com/rnuilib/MainApplication.java

@@ -11,6 +11,8 @@
 import com.wix.reactnativeuilib.UiLibPackageList;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
+import com.facebook.react.bridge.JSIModulePackage;
+import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 
 
 public class MainApplication extends NavigationApplication {
@@ -21,6 +23,11 @@ protected String getJSMainModuleName() {
             return "demo";
         }
 
+        @Override
+        protected JSIModulePackage getJSIModulePackage() {
+            return new ReanimatedJSIModulePackage();
+        }
+
         @Override
         public boolean getUseDeveloperSupport() {
             return BuildConfig.DEBUG;

babel.config.js

@@ -1,8 +1,10 @@
 module.exports = {
   env: {
     test: {
-      presets: ['module:metro-react-native-babel-preset']
+      presets: ['module:metro-react-native-babel-preset'],
+      plugins: ['react-native-reanimated/plugin']
     }
   },
-  presets: ['module:metro-react-native-babel-preset']
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin']
 };

demo/src/configurations.js

@@ -1,4 +1,4 @@
-import {Assets, Typography, Spacings} from 'react-native-ui-lib'; // eslint-disable-line
+import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-lib'; // eslint-disable-line
 
 Assets.loadAssetsGroup('icons.demo', {
   add: require('./assets/icons/add.png'),
@@ -17,9 +17,31 @@ Assets.loadAssetsGroup('images.demo', {
 Typography.loadTypographies({
   h1: {...Typography.text40},
   h2: {...Typography.text50},
-  h3: {...Typography.text60}
+  h3: {...Typography.text60},
+  body: Typography.text70
 });
 
 Spacings.loadSpacings({
   page: Spacings.s5
 });
+
+/* Dark Mode Schemes */
+Colors.loadSchemes({
+  light: {
+    screenBG: 'transparent',
+    textColor: Colors.grey10,
+    moonOrSun: Colors.yellow30,
+    mountainForeground: Colors.green30,
+    mountainBackground: Colors.green50
+  },
+  dark: {
+    screenBG: Colors.grey10,
+    textColor: Colors.white,
+    moonOrSun: Colors.grey80,
+    mountainForeground: Colors.violet10,
+    mountainBackground: Colors.violet20
+  }
+});
+
+/* Components */
+Incubator.TextField.defaultProps = {...Incubator.TextField.defaultProps, preset: 'default'};

demo/src/screens/MenuStructure.js

@@ -4,6 +4,7 @@ export const navigationData = {
     screens: [
       {title: 'Border Radius', tags: 'corener border radius circle', screen: 'unicorn.style.BorderRadiusesScreen'},
       {title: 'Colors', tags: 'palette rgb hex', screen: 'unicorn.style.ColorsScreen'},
+      {title: 'Dark Mode', tags: 'dark mode colors', screen: 'unicorn.style.DarkModeScreen'},
       {title: 'Shadows (iOS)', tags: 'shadow', screen: 'unicorn.style.ShadowsScreen'},
       {title: 'Spacings', tags: 'space margins paddings gutter', screen: 'unicorn.style.SpacingsScreen'},
       {title: 'Typography', tags: 'fonts text', screen: 'unicorn.style.TypographyScreen'}

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -62,13 +62,11 @@ class ExpandableSectionScreen extends PureComponent {
 
   getHeaderElement() {
     return (
-      <View>
-        <Text margin-10 dark10 text60>
+      <View margin-10 spread row>
+        <Text dark10 text60>
           ExpandableSection's sectionHeader
         </Text>
-        <View style={styles.header}>
-          <Image style={styles.icon} source={this.getChevron()} />
-        </View>
+        <Image style={styles.icon} source={this.getChevron()}/>
       </View>
     );
   }
@@ -124,12 +122,7 @@ class ExpandableSectionScreen extends PureComponent {
 export default ExpandableSectionScreen;
 
 const styles = StyleSheet.create({
-  header: {
-    marginLeft: 380,
-    marginTop: 20,
-    position: 'absolute'
-  },
   icon: {
-    backgroundColor: 'transparent'
+    alignSelf: 'center'
   }
 });

demo/src/screens/componentScreens/FeatureHighlightScreen.js

@@ -3,7 +3,6 @@ import React, {Component} from 'react';
 import {AccessibilityInfo, findNodeHandle} from 'react-native';
 import {Colors, Typography, View, Text, Button, FeatureHighlight} from 'react-native-ui-lib'; // eslint-disable-line
 
-
 const titles = [
   'Get Notified',
   'Title two is a long title that will not get cut by default, but can be limited',
@@ -14,18 +13,17 @@ const titles = [
 ];
 const messages = [
   'Important notifications appear right on your clubs and groups. Tap them to get more information about the most' +
-  'important things that you should pay attention to.',
+    'important things that you should pay attention to.',
   'Short message with information about the above highlighted feature',
   'A long message, that will not get cut (but can be limited) with information about the highlighted feature.' +
-  ' Please note that if the message is too long and will cause the content box to render off screen, you will get a' +
-  ' warning about it',
+    ' Please note that if the message is too long and will cause the content box to render off screen, you will get a' +
+    ' warning about it',
   'Very short message',
   'Short message with information about the below highlighted feature',
   'Here is where you can view demos of all Uilib components'
 ];
 
 class FeatureHighlightScreen extends Component {
-
   constructor(props) {
     super(props);
 
@@ -51,11 +49,11 @@ class FeatureHighlightScreen extends Component {
         AccessibilityInfo.setAccessibilityFocus(reactTag);
       }
     });
-  }
+  };
 
   showHighlight = () => {
     this.setState({showFTE: true});
-  }
+  };
 
   addTarget(ref, id) {
     if (ref && !this.targets[id]) {
@@ -68,7 +66,7 @@ class FeatureHighlightScreen extends Component {
     const newTargetIndex = currentTargetIndex + 1;
 
     this.moveToPage(newTargetIndex);
-  }
+  };
 
   moveToPage(index) {
     if (index < _.size(this.targets)) {
@@ -80,18 +78,18 @@ class FeatureHighlightScreen extends Component {
 
   getPageControlProps() {
     return {
-      numOfPages: titles.length, 
-      currentPage: this.state.currentTargetIndex, 
+      numOfPages: titles.length,
+      currentPage: this.state.currentTargetIndex,
       onPagePress: this.onPagePress,
       color: Colors.dark30,
       inactiveColor: Colors.dark80,
       size: 8
     };
   }
 
-  onPagePress = (index) => {
+  onPagePress = index => {
     this.moveToPage(index);
-  }
+  };
 
   renderHighlighterOverlay() {
     const {showFTE, currentTargetIndex} = this.state;
@@ -103,13 +101,15 @@ class FeatureHighlightScreen extends Component {
         title={titles[currentTargetIndex]}
         message={messages[currentTargetIndex]}
         titleStyle={currentTargetIndex === lastPage ? {...Typography.text70} : undefined}
-        messageStyle={currentTargetIndex === lastPage ? {...Typography.text60, fontWeight: '900', lineHeight: 28} : undefined}
+        messageStyle={
+          currentTargetIndex === lastPage ? {...Typography.text60, fontWeight: '900', lineHeight: 28} : undefined
+        }
         confirmButtonProps={{label: 'Got It', onPress: this.moveNext}}
         onBackgroundPress={this.closeHighlight}
         getTarget={() => this.targets[currentTargetIndex]}
         // highlightFrame={{x: 30, y: 70, width: 150, height: 30}}
         // highlightFrame={{x: 160, y: 336, width: 150, height: 56}}
-        borderRadius={currentTargetIndex === 4 ? 4 : undefined}
+        borderRadius={_.includes([1, 2, 3, 4], currentTargetIndex) ? 4 : undefined}
         pageControlProps={currentTargetIndex < lastPage ? this.getPageControlProps() : undefined}
       />
     );
@@ -121,42 +121,53 @@ class FeatureHighlightScreen extends Component {
         <View row flex>
           <View left>
             <View
-              marginT-40 br100 bg-yellow10
+              marginT-40
+              br100
+              bg-yellow10
               style={{width: 32, height: 32}}
               testID={'0'}
-              ref={r => (this.addTarget(r, '0'))}
+              ref={r => this.addTarget(r, '0')}
             />
-            <View marginT-40 bg-red10 style={{width: 12, height: 12}} testID={'1'} ref={r => (this.addTarget(r, '1'))}/>
+            <View marginT-40 bg-red10 style={{width: 12, height: 12}} testID={'1'} ref={r => this.addTarget(r, '1')}/>
           </View>
           <View right flex>
             <View row flex>
               <View
-                marginT-40 marginR-60 bg-cyan30
+                marginT-40
+                marginR-60
+                bg-cyan30
                 style={{width: 50, height: 70}}
                 testID={'2'}
-                ref={r => (this.addTarget(r, '2'))}
+                ref={r => this.addTarget(r, '2')}
+              />
+              <View
+                marginT-40
+                bg-violet30
+                style={{width: 70, height: 50}}
+                testID={'3'}
+                ref={r => this.addTarget(r, '3')}
               />
-              <View marginT-40 bg-violet30 style={{width: 70, height: 50}} testID={'3'} ref={r => (this.addTarget(r, '3'))}/>
             </View>
             <View
-              marginT-40 marginR-50
+              marginT-40
+              marginR-50
               bg-purple40
               style={{width: 150, height: 56}}
               testID={'4'}
-              ref={r => (this.addTarget(r, '4'))}
+              ref={r => this.addTarget(r, '4')}
             />
           </View>
         </View>
         <View center padding-25>
-          <View ref={r => this.viewRef = r}>
+          <View ref={r => (this.viewRef = r)}>
             <Text marginT-20>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-              industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+              industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type
+              and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
               into electronic typesetting, <Text>remaining</Text> essentially unchanged.
             </Text>
           </View>
-          <View marginT-20 testID={'5'} ref={r => (this.addTarget(r, '5'))}>
+          <View marginT-20 testID={'5'} ref={r => this.addTarget(r, '5')}>
             <Button label="Show Overlay" onPress={this.showHighlight}/>
           </View>
         </View>

demo/src/screens/foundationScreens/DarkModeScreen.tsx

@@ -0,0 +1,54 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {View, Text, Constants} from 'react-native-ui-lib';
+
+class DarkModeScreen extends Component {
+  state = {};
+  render() {
+    return (
+      <View flex padding-page bg-screenBG>
+        <Text h1 textColor>
+          Dark Mode
+        </Text>
+        {Constants.isIOS ? (
+          <Text marginT-s2 body textColor>
+            Change to dark mode in simulator by pressing Cmd+Shift+A
+          </Text>
+        ) : (
+          <Text marginT-s2 body textColor>Change to dark mode</Text>
+        )}
+
+        <View style={styles.moonOrSun} bg-moonOrSun/>
+        <View style={[styles.mountain, styles.mountainBackground]} bg-mountainBackground/>
+        <View style={[styles.mountain, styles.mountainForeground]} bg-mountainForeground/>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  mountain: {
+    position: 'absolute',
+    width: 1000,
+    height: 1000,
+    borderRadius: 500
+  },
+  mountainForeground: {
+    left: -500,
+    bottom: -800
+  },
+  mountainBackground: {
+    right: -500,
+    bottom: -850
+  },
+  moonOrSun: {
+    position: 'absolute',
+    right: 50,
+    bottom: 350,
+    width: 100,
+    height: 100,
+    borderRadius: 50
+  }
+});
+
+export default DarkModeScreen;

demo/src/screens/foundationScreens/index.js

@@ -1,6 +1,7 @@
 export function registerScreens(registrar) {  
   registrar('unicorn.style.BorderRadiusesScreen', () => require('./BorderRadiusesScreen').default);
   registrar('unicorn.style.ColorsScreen', () => require('./ColorsScreen').default);
+  registrar('unicorn.style.DarkModeScreen', () => require('./DarkModeScreen').default);
   registrar('unicorn.style.TypographyScreen', () => require('./TypographyScreen').default);
   registrar('unicorn.style.ShadowsScreen', () => require('./ShadowsScreen').default);
   registrar('unicorn.style.SpacingsScreen', () => require('./SpacingsScreen').default);

eslint-rules/index.js

@@ -6,14 +6,17 @@ module.exports = {
     'assets-deprecation': require('./lib/rules/assets-deprecation'),
     'typography-deprecation': require('./lib/rules/typography-deprecation'),
     'function-deprecation': require('./lib/rules/function-deprecation'),
+    'prop-value-shape-deprecation': require('./lib/rules/prop-value-shape-deprecation'),
     // for duplicate rules usage
     'component-deprecation_warn': require('./lib/rules/component-deprecation'),
     'assets-deprecation_warn': require('./lib/rules/assets-deprecation'),
     'typography-deprecation_warn': require('./lib/rules/typography-deprecation'),
     'function-deprecation_warn': require('./lib/rules/function-deprecation'),
+    'prop-value-shape-deprecation_warn': require('./lib/rules/prop-value-shape-deprecation'),
     'component-deprecation_error': require('./lib/rules/component-deprecation'),
     'assets-deprecation_error': require('./lib/rules/assets-deprecation'),
     'typography-deprecation_error': require('./lib/rules/typography-deprecation'),
     'function-deprecation_error': require('./lib/rules/function-deprecation'),
-  },
+    'prop-value-shape-deprecation_error': require('./lib/rules/prop-value-shape-deprecation')
+  }
 };