unicorn-demo-app 6.2.0-snapshot.1908 → 6.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "6.2.0-snapshot.1908",
+  "version": "6.2.1",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/screens/componentScreens/HintsScreen.tsx

@@ -3,6 +3,7 @@ import React, {Component} from 'react';
 import {Alert} from 'react-native';
 import {Colors, View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib';
 
+
 const settingsIcon = require('../../assets/icons/settings.png');
 const reactions = ['❤️', '😮', '😔', '😂', '😡'];
 
@@ -17,7 +18,7 @@ type HintScreenState = {
   useSideTip?: boolean;
   showCustomContent?: boolean;
   showReactionStrip?: boolean;
-  enableShadow?: boolean;
+  enableShadow?: boolean
 };
 
 export default class HintsScreen extends Component<HintScreenProps, HintScreenState> {
@@ -46,11 +47,11 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
 
   onHintPressed = () => {
     Alert.alert('Hint Pressed');
-  };
+  }
 
   onReactionPress = () => {
     Alert.alert('Reaction button pressed');
-  };
+  }
 
   renderCustomContent() {
     return (
@@ -88,9 +89,9 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       enableShadow
     } = this.state;
     const targetFrame = {x: 140, y: 100, width: 10, height: 10};
-    const message = useShortMessage
-      ? 'Add other cool and useful stuff.'
-      : 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
+    const message = useShortMessage ? 
+      'Add other cool and useful stuff.' : 
+      'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
 
     return (
       <View flex>
@@ -128,11 +129,8 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             // edgeMargins={30}
             // onBackgroundPress={() => this.setState({showHint: !showHint})}
             customContent={
-              showCustomContent
-                ? this.renderCustomContent()
-                : showReactionStrip
-                  ? this.renderReactionStrip()
-                  : undefined
+              showCustomContent ? 
+                this.renderCustomContent() : showReactionStrip ? this.renderReactionStrip() : undefined
             }
             color={!showCustomContent && showReactionStrip ? Colors.white : undefined}
             removePaddings={!showCustomContent && showReactionStrip}
@@ -222,8 +220,8 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
           </View>
 
           <View row centerV marginV-10>
-            <Switch
-              value={showReactionStrip}
+            <Switch 
+              value={showReactionStrip} 
               onValueChange={value => this.setState({showReactionStrip: value, enableShadow: true})}
             />
             <Text marginL-10>Show reaction strip</Text>

package/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -14,7 +14,6 @@ interface State {
   asCarousel: boolean;
   centerSelected: boolean;
   fewItems: boolean;
-  initialIndex: number;
   selectedIndex: number;
   key: string | number;
   items: TabControllerItemProps[];
@@ -27,7 +26,6 @@ class TabControllerScreen extends Component<{}, State> {
       asCarousel: true,
       centerSelected: false,
       fewItems: false,
-      initialIndex: 0,
       selectedIndex: 0,
       key: Date.now(),
       items: []
@@ -148,14 +146,14 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   render() {
-    const {key, initialIndex, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
+    const {key, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
     return (
       <View flex bg-grey70>
         <TabController
           key={key}
           asCarousel={asCarousel}
           // selectedIndex={selectedIndex}
-          initialIndex={initialIndex}
+          initialIndex={0}
           onChangeIndex={this.onChangeIndex}
           items={items}
         >

package/src/screens/incubatorScreens/TouchableOpacityScreen.js

@@ -16,6 +16,26 @@ class TouchableOpacityScreen extends Component {
     this.setState({longPressCounter: this.state.longPressCounter + 1});
   };
 
+  renderExample(title, props) {
+    return (
+      <View row marginT-20 centerV>
+        <Text text70 marginR-20>
+          {title}
+        </Text>
+        <Incubator.TouchableOpacity
+          onPress={this.onPress}
+          onLongPress={this.onLongPress}
+          backgroundColor={Colors.blue30}
+          style={{alignItems: 'center', paddingHorizontal: 20, paddingVertical: 8, borderRadius: 50}}
+          activeOpacity={1}
+          {...props}
+        >
+          <Text white>Button</Text>
+        </Incubator.TouchableOpacity>
+      </View>
+    );
+  }
+
   renderRNTouchableExample = () => {
     return (
       <View row centerV marginT-20>
@@ -47,7 +67,11 @@ class TouchableOpacityScreen extends Component {
           LONG PRESS COUNTER: {longPressCounter}
         </Text>
 
-        <Incubator.TouchableOpacity
+        {this.renderExample('feedbackColor', {backgroundColor: Colors.red30, feedbackColor: Colors.red10})}
+        {this.renderExample('activeScale', {activeScale: 0.95})}
+        {this.renderExample('activeOpacity', {activeOpacity: 0.6})}
+
+        <Incubator.TouchableOpacity2
           marginT-20
           onPress={this.onPress}
           onLongPress={this.onLongPress}
@@ -57,9 +81,9 @@ class TouchableOpacityScreen extends Component {
           activeOpacity={1}
           activeScale={0.98}
         >
-          <Text white>TouchableOpacity</Text>
-        </Incubator.TouchableOpacity>
-        <Incubator.TouchableOpacity
+          <Text white>TouchableOpacity2</Text>
+        </Incubator.TouchableOpacity2>
+        <Incubator.TouchableOpacity2
           marginT-20
           paddingH-20
           paddingV-8
@@ -71,8 +95,8 @@ class TouchableOpacityScreen extends Component {
           activeOpacity={1}
           activeScale={0.98}
         >
-          <Text white>TouchableOpacity (without LongPress)</Text>
-        </Incubator.TouchableOpacity>
+          <Text white>TouchableOpacity2 (without LongPress)</Text>
+        </Incubator.TouchableOpacity2>
         {this.renderRNTouchableExample()}
       </View>
     );