unicorn-demo-app 8.2.1 → 8.2.2-snapshot.7685

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "8.2.1",
+  "version": "8.2.2-snapshot.7685",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-native": "^0.77.3",
+    "react": "^19.0.0",
+    "react-native": "^0.78.3",
     "react-native-ui-lib": "*",
     "semver": "^5.5.0"
   }

package/src/screens/MainScreen.js

@@ -1,8 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 import {Navigation} from 'react-native-navigation';
 import {
   Assets,
@@ -27,12 +25,6 @@ const chevronIcon = require('../assets/icons/chevronRight.png');
 const FADER_SIZE = 50;
 
 class MainScreen extends Component {
-  static propTypes = {
-    containerStyle: ViewPropTypes.style,
-    renderItem: PropTypes.func,
-    pageStyle: ViewPropTypes.style
-  };
-
   settingsScreenName = 'unicorn.Settings';
 
   static options() {

package/src/screens/componentScreens/ChipScreen.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, type JSX} from 'react';
 import {Alert} from 'react-native';
 import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib';
 

package/src/screens/componentScreens/ConversationListScreen.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {Component, PureComponent} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
@@ -121,13 +120,6 @@ class ConversationListScreen extends Component {
 }
 
 class ContactItem extends PureComponent {
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number,
-    addRef: PropTypes.func,
-    onSwipeableWillOpen: PropTypes.func
-  };
-
   render() {
     const {item, index, addRef, onSwipeableWillOpen} = this.props;
 

package/src/screens/componentScreens/FeatureHighlightScreen.tsx

@@ -165,7 +165,11 @@ class FeatureHighlightScreen extends Component<{}, State> {
           </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

package/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
+import {Colors, Text, FloatingButton, FloatingButtonLayouts, Keyboard} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
@@ -8,6 +8,7 @@ interface State {
   showPrimary: boolean;
   showSecondary: boolean;
   showVertical: boolean;
+  withTrackingView: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
@@ -16,7 +17,8 @@ export default class FloatingButtonScreen extends Component<{}, State> {
     showPrimary: true,
     showSecondary: true,
     showVertical: true,
-    fullWidth: false
+    fullWidth: false,
+    withTrackingView: false
   };
 
   notNow = () => {
@@ -30,7 +32,8 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary, showVertical} = this.state;
+    const {showSecondary, showVertical, withTrackingView} = this.state;
+    const Container = withTrackingView ? Keyboard.KeyboardTrackingView : React.Fragment;
     return (
       <View style={styles.container}>
         <Text text60 center $textDefault marginB-s4>
@@ -41,6 +44,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
         {renderBooleanOption.call(this, 'Show Primary Button', 'showPrimary')}
         {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
         {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
+        {renderBooleanOption.call(this, 'With tracking view', 'withTrackingView')}
 
         <ScrollView showsVerticalScrollIndicator={false}>
           <View paddingT-20>
@@ -67,30 +71,32 @@ export default class FloatingButtonScreen extends Component<{}, State> {
           </View>
         </ScrollView>
 
-        <FloatingButton
-          visible={this.state.showButton}
-          fullWidth={this.state.fullWidth}
-          button={
-            this.state.showPrimary
-              ? {
-                label: 'Approve',
-                onPress: this.close
-              }
-              : undefined
-          }
-          secondaryButton={
-            showSecondary
-              ? {
-                label: 'Not now',
-                onPress: this.notNow
-              }
-              : undefined
-          }
-          buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
-          // bottomMargin={80}
-          // hideBackgroundOverlay
-          // withoutAnimation
-        />
+        <Container>
+          <FloatingButton
+            visible={this.state.showButton}
+            fullWidth={this.state.fullWidth}
+            button={
+              this.state.showPrimary
+                ? {
+                  label: 'Approve',
+                  onPress: this.close
+                }
+                : undefined
+            }
+            secondaryButton={
+              showSecondary
+                ? {
+                  label: 'Not now',
+                  onPress: this.notNow
+                }
+                : undefined
+            }
+            buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
+            // bottomMargin={80}
+            // hideBackgroundOverlay
+            // withoutAnimation
+          />
+        </Container>
       </View>
     );
   }

package/src/screens/componentScreens/NumberInputScreen.tsx

@@ -28,7 +28,7 @@ const DISCOUNT_PERCENTAGE = {min: 1, max: 80};
 const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`;
 
 const NumberInputScreen = () => {
-  const currentData = useRef<NumberInputData>();
+  const currentData = useRef<NumberInputData>(undefined);
   const [text, setText] = useState<string>('');
   const [showLabel, setShowLabel] = useState<boolean>(true);
   const [exampleType, setExampleType] = useState<ExampleType>('price');

package/src/screens/componentScreens/OverlaysScreen.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, type JSX} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {View, Text, Image, Card, Constants, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 

package/src/screens/componentScreens/SearchInputScreen.tsx

@@ -6,7 +6,7 @@ const SearchInputScreen = () => {
   const [showCancelBtn, setShowCancelBtn] = useState(false);
   const [showLoader, setShowLoader] = useState(false);
   const [showCustomRightElement, setShowCustomRightElement] = useState(false);
-  const searchInput = useRef<SearchInputRef>();
+  const searchInput = useRef<SearchInputRef>(undefined);
 
   const onChangeText = (text: string) => {
     console.log('UILIB text: ', text);

package/src/screens/componentScreens/TimelineScreen.tsx

@@ -15,7 +15,7 @@ const contents = [
 const TimelineScreen = () => {
   const [anchorIndex, setAnchorIndex] = useState(0);
   const [expand, setExpand] = useState(false);
-  const anchor = useRef();
+  const anchor = useRef(undefined);
 
   const onPress = useCallback(() => {
     setAnchorIndex(anchorIndex === 0 ? 1 : 0);

package/src/screens/foundationScreens/TypographyScreen.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib';
@@ -7,10 +6,6 @@ import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib
 const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black'];
 
 export default class TypographyScreen extends Component {
-  static propTypes = {
-    color: PropTypes.string
-  };
-
   static defaultProps = {
     color: Colors.grey10
   };

package/src/screens/realExamples/ListActions/ActionsList.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {Animated, LayoutAnimation, PanResponder, I18nManager} from 'react-native';
 import {Constants, Assets, Colors, View, TouchableOpacity, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
@@ -17,11 +16,6 @@ const DIRECTIONS = {
 
 export default class ActionsList extends Component {
   static displayName = 'ActionsList';
-  
-  static propTypes = {
-    item: PropTypes.object,
-    index: PropTypes.number
-  }
 
   constructor(props) {
     super(props);

package/src/screens/DemoScreen.js

@@ -1,96 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import {ScrollView, Switch} from 'react-native';
-import {View, TextField, Text, Badge, Colors} from 'react-native-ui-lib';//eslint-disable-line
-
-export default class DemoScreen extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      backgroundColor: Colors.red50,
-      label: '12',
-    };
-
-    this.updatePropValue = this.updatePropValue.bind(this);
-  }
-
-  componentDidMount() {
-    this.getComponentProps();
-  }
-
-  getComponentProps() {
-    const DemoComponent = this.getComponent();
-    return DemoComponent.propTypes;
-  }
-
-  shouldRenderProp(propId) {
-    let shouldRender = true;
-    shouldRender = shouldRender && propId !== 'testID';
-    if (this.propsToRender) {
-      shouldRender = shouldRender && _.includes(this.propsToRender, propId);
-    }
-    return shouldRender;
-  }
-
-  updatePropValue(value, propId, prop) {
-    let validValue = value;
-
-    if (prop === PropTypes.number) {
-      validValue = isNaN(value) ? undefined : Number(value);
-    }
-
-    this.setState({
-      [propId]: validValue,
-    });
-  }
-
-
-  renderProp(prop, propId) {
-    if (!this.shouldRenderProp(propId)) return;
-
-    if (PropTypes.bool === prop) {
-      return (
-        <View row spread key={propId} paddingV-10>
-          <Text test70 grey60>
-            {propId}
-          </Text>
-          <Switch
-            value={this.state[propId]}
-            onValueChange={value => this.updatePropValue(value, propId, prop)}
-          />
-        </View>
-      );
-    }
-
-    // if (_.includes([PropTypes.string, PropTypes.number], prop)) {
-    return (
-      <View key={propId}>
-        <TextField
-          placeholder={propId}
-          floatingPlaceholder
-          enableError={false}
-          value={this.state[propId]}
-          onChangeText={text => this.updatePropValue(text, propId, prop)}
-          autoCapitalize='none'
-        />
-      </View>
-    );
-    // }
-  }
-
-  renderComponentSettings() {
-    const props = this.getComponentProps();
-    return (
-      <ScrollView keyboardShouldPersistTaps>
-        <View padding-15>
-          {_.map(props, (prop, propId) => {
-            return this.renderProp(prop, propId);
-          })}
-        </View>
-      </ScrollView>
-    );
-  }
-}