unicorn-demo-app 7.44.0-snapshot.7202 → 7.44.0-snapshot.7204

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unicorn-demo-app",
3
- "version": "7.44.0-snapshot.7202",
3
+ "version": "7.44.0-snapshot.7204",
4
4
  "main": "src/index.js",
5
5
  "author": "Ethan Sharabi <ethan.shar@gmail.com>",
6
6
  "license": "MIT",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": "^18.2.0",
26
- "react-native": "^0.71.2",
26
+ "react-native": "^0.76.9",
27
27
  "react-native-ui-lib": "*",
28
28
  "semver": "^5.5.0"
29
29
  }
package/src/index.js CHANGED
@@ -1,8 +1,7 @@
1
- import {UIManager, I18nManager} from 'react-native';
1
+ import {I18nManager} from 'react-native';
2
2
  import {navigationData as menuStructure} from './screens/MenuStructure';
3
3
  import {loadDemoConfigurations} from './configurations';
4
4
 
5
- UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); // eslint-disable-line
6
5
  I18nManager.allowRTL(true);
7
6
 
8
7
  module.exports = {
@@ -86,7 +86,7 @@ export const navigationData = {
86
86
  screens: [
87
87
  {title: 'Action Sheet', tags: 'action sheet cross-platform', screen: 'unicorn.components.ActionSheetScreen'},
88
88
  {title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
89
- {title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
89
+ {title: 'Feature Highlight', tags: 'native feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
90
90
  {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
91
91
  {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
92
92
  {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'}
@@ -122,10 +122,10 @@ export const navigationData = {
122
122
  {title: 'LoadingScreen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
123
123
  {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
124
124
  {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
125
- {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
125
+ {title: 'TabController', tags: 'tabbar controller', screen: 'unicorn.components.TabControllerScreen'},
126
126
  {
127
127
  title: 'TabControllerWithStickyHeader',
128
- tags: 'tabbar controller native sticky header',
128
+ tags: 'tabbar controller sticky header',
129
129
  screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
130
130
  },
131
131
  {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
@@ -153,28 +153,28 @@ export const navigationData = {
153
153
  screens: [
154
154
  {
155
155
  title: 'KeyboardAwareScrollView',
156
- tags: 'KeyboardAwareScrollView',
156
+ tags: 'native KeyboardAwareScrollView',
157
157
  screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
158
158
  },
159
159
  {
160
160
  title: 'Dynamic Fonts',
161
- tags: 'dynamic fonts load download',
161
+ tags: 'native dynamic fonts load download',
162
162
  screen: 'unicorn.nativeComponents.DynamicFontsScreen'
163
163
  },
164
164
  {
165
165
  title: 'Highlight Overlay',
166
- tags: 'native overlay',
166
+ tags: 'native native overlay',
167
167
  screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
168
168
  },
169
169
  {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
170
170
  {
171
171
  title: 'KeyboardTracking (iOS)',
172
- tags: 'KeyboardTracking',
172
+ tags: 'native KeyboardTracking',
173
173
  screen: 'unicorn.nativeComponents.KeyboardTrackingViewScreen'
174
174
  },
175
175
  {
176
176
  title: 'KeyboardAccessoryView',
177
- tags: 'KeyboardInput',
177
+ tags: 'native KeyboardInput',
178
178
  screen: 'unicorn.nativeComponents.KeyboardAccessoryViewScreen'
179
179
  }
180
180
  ]
@@ -200,8 +200,7 @@ export const navigationData = {
200
200
  screens: [
201
201
  {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
202
202
  {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
203
- {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
204
- {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
203
+ {title: 'Native TouchableOpacity', tags: 'native touchable', screen: 'unicorn.incubator.TouchableOpacityScreen'},
205
204
  {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
206
205
  {
207
206
  title: 'ExpandableOverlay',
@@ -728,7 +728,7 @@ exports[`TextField Screen renders screen 1`] = `
728
728
  },
729
729
  undefined,
730
730
  {
731
- "color": "#D52712",
731
+ "color": "#FC3D2F",
732
732
  },
733
733
  undefined,
734
734
  undefined,
@@ -1269,7 +1269,7 @@ exports[`TextField Screen renders screen 1`] = `
1269
1269
  },
1270
1270
  undefined,
1271
1271
  {
1272
- "color": "#D52712",
1272
+ "color": "#FC3D2F",
1273
1273
  },
1274
1274
  undefined,
1275
1275
  undefined,
@@ -1522,16 +1522,38 @@ exports[`TextField Screen renders screen 1`] = `
1522
1522
  numberOfLines={1}
1523
1523
  onLayout={[Function]}
1524
1524
  style={
1525
- {
1526
- "backgroundColor": "transparent",
1527
- "color": "#6E7881",
1528
- "fontFamily": "System",
1529
- "fontSize": 16,
1530
- "fontWeight": "400",
1531
- "lineHeight": 24,
1532
- "opacity": 0,
1533
- "writingDirection": "ltr",
1534
- }
1525
+ [
1526
+ {
1527
+ "backgroundColor": "transparent",
1528
+ "color": "#20303C",
1529
+ "writingDirection": "ltr",
1530
+ },
1531
+ undefined,
1532
+ {
1533
+ "color": "#6E7881",
1534
+ },
1535
+ undefined,
1536
+ undefined,
1537
+ {},
1538
+ undefined,
1539
+ undefined,
1540
+ undefined,
1541
+ [
1542
+ {},
1543
+ [
1544
+ {},
1545
+ {
1546
+ "fontFamily": "System",
1547
+ "fontSize": 16,
1548
+ "fontWeight": "400",
1549
+ "lineHeight": 24,
1550
+ },
1551
+ ],
1552
+ {
1553
+ "opacity": 0,
1554
+ },
1555
+ ],
1556
+ ]
1535
1557
  }
1536
1558
  testID="undefined.floatingPlaceholder"
1537
1559
  >
@@ -1635,7 +1657,7 @@ exports[`TextField Screen renders screen 1`] = `
1635
1657
  },
1636
1658
  undefined,
1637
1659
  {
1638
- "color": "#D52712",
1660
+ "color": "#FC3D2F",
1639
1661
  },
1640
1662
  undefined,
1641
1663
  undefined,
@@ -1866,7 +1888,7 @@ exports[`TextField Screen renders screen 1`] = `
1866
1888
  },
1867
1889
  undefined,
1868
1890
  {
1869
- "color": "#D52712",
1891
+ "color": "#FC3D2F",
1870
1892
  },
1871
1893
  undefined,
1872
1894
  undefined,
@@ -2118,16 +2140,38 @@ exports[`TextField Screen renders screen 1`] = `
2118
2140
  numberOfLines={1}
2119
2141
  onLayout={[Function]}
2120
2142
  style={
2121
- {
2122
- "backgroundColor": "transparent",
2123
- "color": "#20303C",
2124
- "fontFamily": "System",
2125
- "fontSize": 16,
2126
- "fontWeight": "400",
2127
- "lineHeight": 24,
2128
- "opacity": 0,
2129
- "writingDirection": "ltr",
2130
- }
2143
+ [
2144
+ {
2145
+ "backgroundColor": "transparent",
2146
+ "color": "#20303C",
2147
+ "writingDirection": "ltr",
2148
+ },
2149
+ undefined,
2150
+ {
2151
+ "color": "#20303C",
2152
+ },
2153
+ undefined,
2154
+ undefined,
2155
+ {},
2156
+ undefined,
2157
+ undefined,
2158
+ undefined,
2159
+ [
2160
+ {},
2161
+ [
2162
+ {},
2163
+ {
2164
+ "fontFamily": "System",
2165
+ "fontSize": 16,
2166
+ "fontWeight": "400",
2167
+ "lineHeight": 24,
2168
+ },
2169
+ ],
2170
+ {
2171
+ "opacity": 0,
2172
+ },
2173
+ ],
2174
+ ]
2131
2175
  }
2132
2176
  testID="undefined.floatingPlaceholder"
2133
2177
  >
@@ -2231,7 +2275,7 @@ exports[`TextField Screen renders screen 1`] = `
2231
2275
  },
2232
2276
  undefined,
2233
2277
  {
2234
- "color": "#D52712",
2278
+ "color": "#FC3D2F",
2235
2279
  },
2236
2280
  undefined,
2237
2281
  undefined,
@@ -2433,16 +2477,38 @@ exports[`TextField Screen renders screen 1`] = `
2433
2477
  numberOfLines={1}
2434
2478
  onLayout={[Function]}
2435
2479
  style={
2436
- {
2437
- "backgroundColor": "transparent",
2438
- "color": "#20303C",
2439
- "fontFamily": "System",
2440
- "fontSize": 16,
2441
- "fontWeight": "400",
2442
- "lineHeight": 24,
2443
- "opacity": 0,
2444
- "writingDirection": "ltr",
2445
- }
2480
+ [
2481
+ {
2482
+ "backgroundColor": "transparent",
2483
+ "color": "#20303C",
2484
+ "writingDirection": "ltr",
2485
+ },
2486
+ undefined,
2487
+ {
2488
+ "color": "#20303C",
2489
+ },
2490
+ undefined,
2491
+ undefined,
2492
+ {},
2493
+ undefined,
2494
+ undefined,
2495
+ undefined,
2496
+ [
2497
+ {},
2498
+ [
2499
+ {},
2500
+ {
2501
+ "fontFamily": "System",
2502
+ "fontSize": 16,
2503
+ "fontWeight": "400",
2504
+ "lineHeight": 24,
2505
+ },
2506
+ ],
2507
+ {
2508
+ "opacity": 0,
2509
+ },
2510
+ ],
2511
+ ]
2446
2512
  }
2447
2513
  testID="undefined.floatingPlaceholder"
2448
2514
  >
@@ -3126,7 +3192,7 @@ exports[`TextField Screen renders screen 1`] = `
3126
3192
  },
3127
3193
  undefined,
3128
3194
  {
3129
- "color": "#D52712",
3195
+ "color": "#FC3D2F",
3130
3196
  },
3131
3197
  undefined,
3132
3198
  undefined,
@@ -4023,7 +4089,7 @@ exports[`TextField Screen renders screen 1`] = `
4023
4089
  },
4024
4090
  undefined,
4025
4091
  {
4026
- "color": "#D52712",
4092
+ "color": "#FC3D2F",
4027
4093
  },
4028
4094
  undefined,
4029
4095
  undefined,
@@ -4726,7 +4792,7 @@ exports[`TextField Screen renders screen 1`] = `
4726
4792
  },
4727
4793
  undefined,
4728
4794
  {
4729
- "color": "#D52712",
4795
+ "color": "#FC3D2F",
4730
4796
  },
4731
4797
  undefined,
4732
4798
  undefined,
@@ -4986,7 +5052,7 @@ exports[`TextField Screen renders screen 1`] = `
4986
5052
  },
4987
5053
  undefined,
4988
5054
  {
4989
- "color": "#D52712",
5055
+ "color": "#FC3D2F",
4990
5056
  },
4991
5057
  undefined,
4992
5058
  undefined,
@@ -5276,7 +5342,7 @@ exports[`TextField Screen renders screen 1`] = `
5276
5342
  },
5277
5343
  undefined,
5278
5344
  {
5279
- "color": "#D52712",
5345
+ "color": "#FC3D2F",
5280
5346
  },
5281
5347
  undefined,
5282
5348
  undefined,
@@ -6017,7 +6083,7 @@ exports[`TextField Screen renders screen 1`] = `
6017
6083
  },
6018
6084
  undefined,
6019
6085
  {
6020
- "color": "#D52712",
6086
+ "color": "#FC3D2F",
6021
6087
  },
6022
6088
  undefined,
6023
6089
  undefined,
@@ -6318,7 +6384,7 @@ exports[`TextField Screen renders screen 1`] = `
6318
6384
  },
6319
6385
  undefined,
6320
6386
  {
6321
- "color": "#D52712",
6387
+ "color": "#FC3D2F",
6322
6388
  },
6323
6389
  undefined,
6324
6390
  undefined,
@@ -6647,7 +6713,7 @@ exports[`TextField Screen renders screen 1`] = `
6647
6713
  },
6648
6714
  undefined,
6649
6715
  {
6650
- "color": "#D52712",
6716
+ "color": "#FC3D2F",
6651
6717
  },
6652
6718
  undefined,
6653
6719
  undefined,
@@ -7023,7 +7089,7 @@ exports[`TextField Screen renders screen 1`] = `
7023
7089
  },
7024
7090
  undefined,
7025
7091
  {
7026
- "color": "#D52712",
7092
+ "color": "#FC3D2F",
7027
7093
  },
7028
7094
  undefined,
7029
7095
  undefined,
@@ -7299,7 +7365,7 @@ exports[`TextField Screen renders screen 1`] = `
7299
7365
  },
7300
7366
  undefined,
7301
7367
  {
7302
- "color": "#D52712",
7368
+ "color": "#FC3D2F",
7303
7369
  },
7304
7370
  undefined,
7305
7371
  undefined,
@@ -7554,7 +7620,7 @@ exports[`TextField Screen renders screen 1`] = `
7554
7620
  },
7555
7621
  undefined,
7556
7622
  {
7557
- "color": "#D52712",
7623
+ "color": "#FC3D2F",
7558
7624
  },
7559
7625
  undefined,
7560
7626
  undefined,
@@ -7844,7 +7910,7 @@ exports[`TextField Screen renders screen 1`] = `
7844
7910
  },
7845
7911
  undefined,
7846
7912
  {
7847
- "color": "#D52712",
7913
+ "color": "#FC3D2F",
7848
7914
  },
7849
7915
  undefined,
7850
7916
  undefined,
@@ -4,8 +4,8 @@ import _ from 'lodash';
4
4
  import {AnimatedImage, Colors} from 'react-native-ui-lib'; //eslint-disable-line
5
5
 
6
6
  const SampleImages = [
7
- 'https://static.pexels.com/photos/50721/pencils-crayons-colourful-rainbow-50721.jpeg',
8
- 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
7
+ 'https://images.pexels.com/photos/2529146/pexels-photo-2529146.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
8
+ 'https://images.pexels.com/photos/2529158/pexels-photo-2529158.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
9
9
  ];
10
10
 
11
11
  export default class AnimatedImageScreen extends Component {
@@ -1,6 +1,6 @@
1
1
  import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
2
2
  import React, {Component} from 'react';
3
- import {StyleSheet, Animated, TextStyle} from 'react-native';
3
+ import {StyleSheet, Animated} from 'react-native';
4
4
  import _ from 'lodash';
5
5
  import {renderBooleanOption, renderSliderOption} from '../ExampleScreenPresenter';
6
6
 
@@ -58,7 +58,7 @@ class CarouselVerticalScreen extends Component<{}, State> {
58
58
  return (
59
59
  <View absT>
60
60
  {_.times(numberOfPagesShown, page => (
61
- <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]] as TextStyle}>
61
+ <Text key={page} h1 animated style={[styles.animatedPageCounter, animatedStyles[page]]}>
62
62
  {page}
63
63
  </Text>
64
64
  ))}
@@ -129,7 +129,7 @@ export default SortableListScreen;
129
129
  const styles = StyleSheet.create({
130
130
  itemContainer: {
131
131
  height: 52,
132
- borderColor: Colors.$outlineDefault,
132
+ borderBottomColor: Colors.$outlineDefault,
133
133
  borderBottomWidth: 1
134
134
  },
135
135
  selectedItemContainer: {
@@ -68,7 +68,7 @@ export default class StackAggregatorScreen extends Component {
68
68
  containerStyle={{marginTop: 12}}
69
69
  onItemPress={this.onItemPress}
70
70
  collapsed={false}
71
- contentContainerStyle={{backgroundColor: Colors.red70}}
71
+ backgroundColor={Colors.red70}
72
72
  // itemBorderRadius={10}
73
73
  // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
74
74
  >
@@ -62,7 +62,7 @@ class Tab2 extends Component {
62
62
  <Avatar
63
63
  size={50}
64
64
  source={{
65
- uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'
65
+ uri: 'https://images.pexels.com/photos/2529159/pexels-photo-2529159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
66
66
  }}
67
67
  />
68
68
  <Text text40 marginL-20>
@@ -1,6 +1,6 @@
1
1
  import React, {Component} from 'react';
2
2
  import {StyleSheet, ScrollView} from 'react-native';
3
- import {FlatList} from 'react-native-gesture-handler';
3
+ import {FlatList, GestureHandlerRootView} from 'react-native-gesture-handler';
4
4
  import {
5
5
  Assets,
6
6
  View,
@@ -147,7 +147,7 @@ class PanViewScreen extends Component {
147
147
  render() {
148
148
  const {showToast, showDialog} = this.state;
149
149
  return (
150
- <View style={styles.root}>
150
+ <GestureHandlerRootView style={styles.root}>
151
151
  <View marginL-page height={50} centerV>
152
152
  <Text text50>New Pan View</Text>
153
153
  </View>
@@ -163,7 +163,7 @@ class PanViewScreen extends Component {
163
163
  </ScrollView>
164
164
  {showToast && this.renderToast()}
165
165
  {showDialog && this.renderDialog()}
166
- </View>
166
+ </GestureHandlerRootView>
167
167
  );
168
168
  }
169
169
  }
@@ -16,7 +16,10 @@ export default class HighlightOverlayViewScreen extends PureComponent {
16
16
  }
17
17
 
18
18
  componentDidMount() {
19
- this.setState({showFTE: true});
19
+ // setting timeout to allow Android's transition animation to complete
20
+ setTimeout(() => {
21
+ this.setState({showFTE: true});
22
+ }, 1000);
20
23
  }
21
24
 
22
25
  onRefUpdated(ref) {
@@ -23,6 +23,7 @@ export default class SafeAreaSpacerViewScreen extends PureComponent {
23
23
  <Text red50> SafeAreaSpacerView </Text>
24
24
  {'can be used as a BOTTOM or TOP spacer and will get the height of the safe area insets'}
25
25
  </Text>
26
+ <SafeAreaSpacerView style={{width: 100, backgroundColor: 'red'}}/>
26
27
  </View>
27
28
  </ScrollView>
28
29
  <View style={styles.topView}>