Skip to content

Commit 001f9c6

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents 289e108 + 9b70703 commit 001f9c6

File tree

111 files changed

+2558
-3750
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

111 files changed

+2558
-3750
lines changed

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,21 @@ UI Toolset & Components Library for React Native
33
<img src="https://user-images.githubusercontent.com/1780255/64093084-a11b0300-cd5f-11e9-9175-a7b4d2b717a7.png"/>
44
</p>
55

6+
<table>
7+
<tr>
8+
<td>
9+
<img height="500" src="https://user-images.githubusercontent.com/1780255/72094962-3044b280-3320-11ea-8e41-aa83743bafb9.gif">
10+
</td>
11+
<td>
12+
<img height="500" src="https://user-images.githubusercontent.com/1780255/72094961-3044b280-3320-11ea-95e2-9aa745c8b07d.gif">
13+
</td>
14+
<td>
15+
<img height="500" src="https://user-images.githubusercontent.com/1780255/72094958-2fac1c00-3320-11ea-8f67-9d759cfa4ae1.gif">
16+
</td>
17+
</tr>
18+
</table>
19+
20+
621
---
722
[![Build Status](https://travis-ci.org/wix/react-native-ui-lib.svg?branch=master)](https://travis-ci.org/wix/react-native-ui-lib)
823
[![npm](https://img.shields.io/npm/v/react-native-ui-lib.svg)](https://www.npmjs.com/package/react-native-ui-lib)

‎src/assets/icons/chevronRight.png renamed to ‎demo/src/assets/icons/chevronRight.png

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/settings.png renamed to ‎demo/src/assets/icons/settings.png

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎src/assets/icons/[email protected] renamed to ‎demo/src/assets/icons/[email protected]

File renamed without changes.

‎demo/src/demoApp.js

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import AsyncStorage from '@react-native-community/async-storage';
22
import {Navigation} from 'react-native-navigation';
33
import * as Animatable from 'react-native-animatable';
4-
import {AnimatableManager, ThemeManager, Constants, Assets, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {AnimatableManager, ThemeManager, Constants, Assets, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
55
import {registerScreens} from './screens';
66

7-
87
/** Examples - uncomment when needed */
98
// Typography.loadTypographies({
109
// h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
@@ -60,22 +59,21 @@ import {registerScreens} from './screens';
6059
// customAnimation1: {
6160
// from: {opacity: 0, translateY: 20},
6261
// to: {opacity: 1, translateY: 0},
63-
// },
62+
// },
6463
// customAnimation2: {
6564
// from: {opacity: 0, translateY: 40},
6665
// to: {opacity: 1, translateY: 0},
6766
// },
6867
// };
6968
// IMPORTANT! Make uilib's animations available globally for the app's use (option to pass adittional animation definitions)
70-
Animatable.initializeRegistryWithDefinitions(AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */));
71-
69+
Animatable.initializeRegistryWithDefinitions(AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */));
7270

7371
function getDefaultNavigationStyle() {
7472
return {
7573
statusBar: {
7674
visible: true,
7775
style: 'light',
78-
backgroundColor: ThemeManager.primaryColor, // for Android
76+
backgroundColor: ThemeManager.primaryColor // for Android
7977
},
8078
layout: {
8179
backgroundColor: Colors.white,
@@ -86,30 +84,31 @@ function getDefaultNavigationStyle() {
8684
noBorder: true, // for iOS
8785
elevation: 0, // for Android
8886
background: {
89-
color: ThemeManager.primaryColor,
87+
color: ThemeManager.primaryColor
9088
},
9189
title: {
9290
color: Colors.white,
93-
fontSize: Typography.text70.fontSize,
94-
fontFamily: Constants.isAndroid ? 'sans-serif-bold' : '.SFUIText-Heavy',
95-
alignment: 'center',
91+
fontSize: Typography.text60H.fontSize,
92+
fontFamily: Constants.isAndroid ? Typography.text65H.fontFamily : '.SFUIText-Heavy',
93+
fontWeight: 'heavy'
9694
},
9795
subtitle: {
9896
color: Colors.white,
99-
fontSize: Typography.text80.fontSize,
97+
fontSize: Typography.text80T.fontSize,
10098
fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
99+
fontWeight: 'medium'
101100
},
102101
backButton: {
103102
// visible: true,
104103
color: Colors.white,
105104
showTitle: Constants.isIOS ? false : undefined,
106-
testID: 'pop',
105+
testID: 'pop'
107106
},
108-
leftButtonColor: Colors.white,
107+
leftButtonColor: Colors.white,
109108
leftButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
110-
rightButtonColor: Colors.white,
111-
rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
112-
},
109+
rightButtonColor: Colors.white,
110+
rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6)
111+
}
113112
};
114113
}
115114

@@ -126,22 +125,22 @@ function startApp(defaultScreen) {
126125
options: {
127126
topBar: {
128127
title: {
129-
text: 'UILIB',
130-
},
131-
},
132-
},
133-
},
134-
},
135-
],
136-
},
137-
},
128+
text: 'R N U I L I B'
129+
}
130+
}
131+
}
132+
}
133+
}
134+
]
135+
}
136+
}
138137
};
139138

140139
if (defaultScreen) {
141140
rootObject.root.stack.children.push({
142141
component: {
143-
name: defaultScreen,
144-
},
142+
name: defaultScreen
143+
}
145144
});
146145
}
147146

‎demo/src/screens/MainScreen.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ import {
1818
} from 'react-native-ui-lib'; //eslint-disable-line
1919
import {navigationData} from './MenuStructure';
2020

21+
22+
const settingsIcon = require('../assets/icons/settings.png');
23+
const chevronIcon = require('../assets/icons/chevronRight.png');
24+
2125
export default class MainScreen extends Component {
2226
static propTypes = {
2327
containerStyle: ViewPropTypes.style,
@@ -46,7 +50,7 @@ export default class MainScreen extends Component {
4650
id: 'uilib.settingsButton',
4751
testID: 'uilib.settingsButton',
4852
enabled: true,
49-
icon: Assets.icons.settings
53+
icon: settingsIcon
5054
});
5155
Navigation.mergeOptions(props.componentId, navigationStyle);
5256
}
@@ -234,7 +238,7 @@ export default class MainScreen extends Component {
234238

235239
return (
236240
<View centerV row paddingL-20 marginB-10>
237-
<Image source={Assets.icons.chevronRight} style={{tintColor: Colors.dark10}} supportRTL/>
241+
<Image source={chevronIcon} style={{tintColor: Colors.dark10}} supportRTL/>
238242
<Text
239243
style={[item.deprecate && styles.entryTextDeprecated]}
240244
dark10
@@ -306,7 +310,6 @@ export default class MainScreen extends Component {
306310

307311
return (
308312
<Carousel
309-
migrate
310313
ref={carousel => (this.carousel = carousel)}
311314
containerStyle={{flex: 1}}
312315
onChangePage={this.onChangePage}

‎demo/src/screens/MenuStructure.js

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ export const navigationData = {
66
{title: 'Colors', tags: 'palette rgb hex', screen: 'unicorn.style.ColorsScreen'},
77
{title: 'Shadows (iOS)', tags: 'shadow', screen: 'unicorn.style.ShadowsScreen'},
88
{title: 'Spacings', tags: 'space margins paddings gutter', screen: 'unicorn.style.SpacingsScreen'},
9-
{title: 'Typography', tags: 'fonts text', screen: 'unicorn.style.TypographyScreen'},
10-
],
11-
},
12-
Wrappers: {
13-
title: 'Wrappers',
14-
screens: [
15-
// {title: 'View', tags: 'view wrapper', screen: 'unicorn.wrappers.ViewScreen'},
16-
// {title: 'Text', tags: 'text wrapper', screen: 'unicorn.wrappers.TextScreen'},
17-
{title: 'TouchableOpacity', tags: 'touchableOpacity wrapper', screen: 'unicorn.wrappers.TouchableOpacityScreen'},
18-
],
9+
{title: 'Typography', tags: 'fonts text', screen: 'unicorn.style.TypographyScreen'}
10+
]
1911
},
12+
// Wrappers: {
13+
// title: 'Wrappers',
14+
// screens: [
15+
// // {title: 'View', tags: 'view wrapper', screen: 'unicorn.wrappers.ViewScreen'},
16+
// // {title: 'Text', tags: 'text wrapper', screen: 'unicorn.wrappers.TextScreen'},
17+
// {title: 'TouchableOpacity', tags: 'touchableOpacity wrapper', screen: 'unicorn.wrappers.TouchableOpacityScreen'}
18+
// ]
19+
// },
2020
Components: {
2121
title: 'Components',
2222
screens: [
@@ -29,6 +29,7 @@ export const navigationData = {
2929
{title: 'Carousel', tags: 'carousel', screen: 'unicorn.components.CarouselScreen'},
3030
{title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
3131
{title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
32+
{title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
3233
{title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
3334
{title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
3435
{title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
@@ -41,8 +42,8 @@ export const navigationData = {
4142
{title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
4243
{title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
4344
{title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
44-
{title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'},
45-
],
45+
{title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
46+
]
4647
},
4748
Form: {
4849
title: 'Form',
@@ -58,36 +59,36 @@ export const navigationData = {
5859
{title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
5960
{title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
6061
{title: 'TagsInput', tags: 'tags input form', screen: 'unicorn.components.TagsInputScreen'},
61-
{title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'},
62-
],
62+
{title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
63+
]
6364
},
6465
Native: {
6566
title: 'Native',
6667
screens: [
67-
{title: 'Highlight Overlay', tags: 'native overlay', screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'},
68+
{
69+
title: 'Highlight Overlay',
70+
tags: 'native overlay',
71+
screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
72+
},
6873
{title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'},
69-
{title: 'SafeArea Sapcer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
70-
],
71-
},
72-
Interactable: {
73-
title: 'Interactable',
74-
screens: [{title: 'Drawer', tags: 'interactable drawer', screen: 'unicorn.interactableComponents.DrawerScreen'}],
74+
{title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'}
75+
]
7576
},
7677
Screens: {
7778
title: 'Screens',
7879
screens: [
7980
{title: 'Loading Screen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
8081
{title: 'Modal Screen', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
81-
{title: 'State Screen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
82-
],
82+
{title: 'State Screen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'}
83+
]
8384
},
8485
Lists: {
8586
title: 'Lists',
8687
screens: [
8788
{title: 'Basic List', tags: 'basic list', screen: 'unicorn.lists.BasicListScreen'},
8889
{title: 'Contacts List', tags: 'list contacts', screen: 'unicorn.lists.ContactsListScreen'},
89-
{title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
90-
],
90+
{title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'}
91+
]
9192
},
9293
Animations: {
9394
title: 'Animations',
@@ -96,8 +97,8 @@ export const navigationData = {
9697
{title: 'List Animations', tags: 'animated card', screen: 'unicorn.animations.ListAnimationsScreen'},
9798
{title: 'Card Animations', tags: 'animated card', screen: 'unicorn.animations.CardAnimationsScreen'},
9899
{title: 'Card Scanner', tags: 'card scanner process', screen: 'unicorn.animations.CardScannerScreen'},
99-
{title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
100-
],
100+
{title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'}
101+
]
101102
},
102103
Incubator: {
103104
title: 'Incubator',
@@ -106,11 +107,12 @@ export const navigationData = {
106107
{title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'}
107108
]
108109
},
109-
Examples: {
110-
title: 'Examples',
110+
Inspirations: {
111+
title: 'Inspirations',
111112
screens: [
112113
{title: 'Apple Music', tags: 'apple music demo screen', screen: 'unicorn.examples.AppleMusic'},
114+
{title: 'Pinterest', tags: 'pinterest demo screen', screen: 'unicorn.examples.Pinterest'},
113115
{title: 'List Actions', tags: 'list actions demo screen', screen: 'unicorn.examples.ListActionsScreen'}
114-
],
115-
},
116+
]
117+
}
116118
};

‎demo/src/screens/componentScreenScreens/ModalScreen.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class ModalScreen extends Component {
3737
color={Colors.dark10}
3838
size={15}
3939
/>
40-
<Carousel migrate onChangePage={currentPage => this.setState({currentPage})} containerStyle={{flex: 1}}>
40+
<Carousel onChangePage={currentPage => this.setState({currentPage})} containerStyle={{flex: 1}}>
4141
<View bg-green50 flex style={styles.page}>
4242
<Modal.TopBar
4343
title='modal title'

‎demo/src/screens/componentScreens/ActionBarScreen.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export default class ActionBarScreen extends Component {
3030
size={15}
3131
/>
3232
<Carousel
33-
migrate
3433
containerStyle={{flex: 1}}
3534
onChangePage={currentPage => this.setState({currentPage})}
3635
initialPage={this.state.currentPage}

0 commit comments

Comments
 (0)