Skip to content

Commit 9eadd4e

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-ui-lib into release
2 parents 2efaabc + 9eda976 commit 9eadd4e

File tree

59 files changed

+809
-232
lines changed

Some content is hidden

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

59 files changed

+809
-232
lines changed

‎.flowconfig

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ emoji=true
2525

2626
exact_by_default=true
2727

28+
format.bracket_spacing=false
29+
2830
module.file_ext=.js
2931
module.file_ext=.json
3032
module.file_ext=.ios.js
@@ -60,4 +62,4 @@ untyped-import
6062
untyped-type-import
6163

6264
[version]
63-
^0.149.0
65+
^0.158.0

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ build/
2929
.gradle
3030
local.properties
3131
*.iml
32+
*.hprof
3233
android/gradlew.bat
3334
expoDemo/android/gradlew.bat
3435

‎android/app/build.gradle

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ def enableProguardInReleaseBuilds = false
1313
def jscFlavor = 'org.webkit:android-jsc:+'
1414
def enableHermes = project.ext.react.get("enableHermes", false)
1515

16+
/**
17+
* Architectures to build native code for in debug.
18+
*/
19+
def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
20+
1621
android {
1722
compileSdkVersion rootProject.ext.compileSdkVersion
1823
ndkVersion rootProject.ext.ndkVersion
@@ -44,6 +49,11 @@ android {
4449
buildTypes {
4550
debug {
4651
signingConfig signingConfigs.debug
52+
if (nativeArchitectures) {
53+
ndk {
54+
abiFilters nativeArchitectures.split(',')
55+
}
56+
}
4757
}
4858
release {
4959
// Caution! In production, you need to generate your own keystore file.

‎android/build.gradle

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ buildscript {
66
minSdkVersion = 21
77
compileSdkVersion = 30
88
targetSdkVersion = 30
9-
ndkVersion = "20.1.5948944"
9+
ndkVersion = "21.4.7075529"
1010
RNNKotlinVersion = "1.6.0"
1111
}
1212
repositories {
@@ -16,7 +16,7 @@ buildscript {
1616
}
1717
dependencies {
1818
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$RNNKotlinVersion"
19-
classpath("com.android.tools.build:gradle:4.2.1")
19+
classpath("com.android.tools.build:gradle:4.2.2")
2020

2121
// NOTE: Do not place your application dependencies here; they belong
2222
// in the individual module build.gradle files

‎android/gradle.properties

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ android.useAndroidX=true
2121
android.enableJetifier=true
2222

2323
# Version of flipper SDK to use with React Native
24-
FLIPPER_VERSION=0.93.0
24+
FLIPPER_VERSION=0.99.0

‎demo/src/screens/MainScreen.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
View,
1212
Text,
1313
TouchableOpacity,
14-
Image,
14+
Icon,
1515
Button,
1616
TabController,
1717
Incubator
@@ -180,7 +180,7 @@ class MainScreen extends Component {
180180
filterText ? (
181181
<Button link iconSource={Assets.icons.demo.close} grey10 onPress={this.clearSearch}/>
182182
) : (
183-
<Image source={Assets.icons.demo.search}/>
183+
<Icon source={Assets.icons.demo.search}/>
184184
)
185185
}
186186
/>
@@ -210,7 +210,7 @@ class MainScreen extends Component {
210210
<Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
211211
{item.title}
212212
</Text>
213-
<Image source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
213+
<Icon source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
214214
</TouchableOpacity>
215215
);
216216
} else {

‎demo/src/screens/MenuStructure.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,11 +153,11 @@ export const navigationData = {
153153
Incubator: {
154154
title: 'Incubator (Experimental)',
155155
screens: [
156-
{title: '(New) ChipsInput', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
156+
{title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
157157
{title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
158-
{title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
159-
{title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
160-
{title: '(New) Toast', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
158+
{title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
159+
{title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
160+
{title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
161161
{title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
162162
{title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
163163
{title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'},

‎demo/src/screens/componentScreens/ImageScreen.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {ScrollView} from 'react-native';
3-
import {View, Text, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
3+
import {View, Text, Icon, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
44
import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
55

66
const IMAGE_URL =
@@ -94,7 +94,7 @@ class ImageScreen extends Component<{}, State> {
9494
return (
9595
<View padding-20 flex bottom={overlayType === Image.overlayTypes.BOTTOM}>
9696
<View row centerV>
97-
<Image
97+
<Icon
9898
style={{margin: 5, marginRight: 10}}
9999
source={Assets.icons.demo.camera}
100100
tintColor={overlayType !== 'none' ? Colors.white : undefined}
@@ -106,7 +106,7 @@ class ImageScreen extends Component<{}, State> {
106106
</View>
107107
);
108108
} else {
109-
return <Image style={{margin: 5}} source={Assets.icons.demo.camera}/>;
109+
return <Icon style={{margin: 5}} source={Assets.icons.demo.camera}/>;
110110
}
111111
}
112112
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
3-
import {ScrollView, Image} from 'react-native';
4-
import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
3+
import {ScrollView} from 'react-native';
4+
import {View, Colors, Icon, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
55
import contactsData from '../../data/conversations';
66
import tagIcon from '../../assets/icons/tags.png';
77
import dropdown from '../../assets/icons/chevronDown.png';
@@ -172,7 +172,7 @@ export default class PickerScreen extends Component {
172172
renderPicker={({label}) => {
173173
return (
174174
<View row>
175-
<Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
175+
<Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
176176
<Text grey10 text80>
177177
{label} Posts
178178
</Text>
@@ -225,7 +225,7 @@ export default class PickerScreen extends Component {
225225
{item.name}
226226
</Text>
227227
</View>
228-
{props.isSelected && <Image source={Assets.icons.check}/>}
228+
{props.isSelected && <Icon source={Assets.icons.check}/>}
229229
</View>
230230
)}
231231
getItemLabel={item => item.name}

‎demo/src/screens/componentScreens/SliderScreen.tsx

Lines changed: 70 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {StyleSheet, ScrollView} from 'react-native';
3-
import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
3+
import {Colors, View, Text, Icon, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
44

55
const INITIAL_VALUE = 0;
66
const COLOR = Colors.blue30;
@@ -28,72 +28,77 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
2828

2929
onSliderValueChange = (value: number) => {
3030
this.setState({sliderValue: value});
31-
}
31+
};
3232

3333
onGradientValueChange = (value: string, alpha: number) => {
3434
this.setState({color: value, alpha});
35-
}
35+
};
3636

3737
onGroupValueChange = (value: string) => {
3838
console.warn('onGroupValueChange: ', value);
39-
}
39+
};
4040

4141
render() {
4242
const {color, alpha, sliderValue} = this.state;
4343

4444
return (
4545
<ScrollView showsVerticalScrollIndicator={false}>
4646
<View flex padding-20>
47-
<Text titleHuge marginB-20>Sliders</Text>
48-
49-
<View row centerV>
50-
<Image assetName={'megaphone'} style={styles.image}/>
51-
<Slider
52-
onValueChange={this.onSliderValueChange}
47+
<Text titleHuge marginB-20>
48+
Sliders
49+
</Text>
50+
51+
<View row centerV style={Constants.isRTL && styles.ltr}>
52+
<Icon assetName={'search'} style={styles.image}/>
53+
<Slider
54+
onValueChange={this.onSliderValueChange}
5355
value={INITIAL_VALUE}
54-
minimumValue={0}
55-
maximumValue={100}
56-
step={1}
56+
minimumValue={0}
57+
maximumValue={100}
58+
step={1}
5759
containerStyle={styles.sliderContainer}
60+
disableRTL
5861
/>
59-
<Text bodySmall grey30 style={styles.text}>{sliderValue}%</Text>
62+
<Text bodySmall grey30 style={styles.text}>
63+
{sliderValue}%
64+
</Text>
6065
</View>
61-
66+
6267
<Text marginT-30>Negatives</Text>
63-
<Slider
64-
minimumValue={-100}
65-
maximumValue={100}
66-
value={-30}
68+
<Slider
69+
minimumValue={-100}
70+
maximumValue={100}
71+
value={-30}
6772
minimumTrackTintColor={Colors.red30}
6873
thumbTintColor={Colors.red50}
6974
containerStyle={styles.slider}
7075
/>
71-
<Slider
72-
minimumValue={-300}
73-
maximumValue={-100}
74-
value={-130}
76+
<Slider
77+
minimumValue={-300}
78+
maximumValue={-100}
79+
value={-130}
7580
minimumTrackTintColor={Colors.red30}
7681
thumbTintColor={Colors.red50}
7782
containerStyle={styles.slider}
7883
/>
7984

8085
<Text marginT-20>Disabled</Text>
81-
<Slider
82-
minimumValue={100}
83-
maximumValue={200}
84-
value={120}
86+
<Slider
87+
minimumValue={100}
88+
maximumValue={200}
89+
value={120}
8590
minimumTrackTintColor={Colors.red30}
8691
thumbTintColor={Colors.green30}
8792
containerStyle={styles.slider}
8893
disabled
8994
/>
90-
95+
9196
<Text marginT-15>Custom with Steps</Text>
92-
<Slider
93-
value={50}
94-
minimumValue={0}
95-
maximumValue={100}
96-
step={25}
97+
<Slider
98+
value={50}
99+
minimumValue={0}
100+
maximumValue={100}
101+
step={25}
97102
containerStyle={styles.slider}
98103
trackStyle={styles.track}
99104
thumbStyle={styles.thumb}
@@ -105,36 +110,42 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
105110

106111
<Text marginT-15>Gradient Sliders</Text>
107112
<View row centerV>
108-
<Text text90 grey30>DEFAULT</Text>
109-
<GradientSlider
110-
color={color}
111-
containerStyle={styles.gradientSliderContainer}
113+
<Text text90 grey30>
114+
DEFAULT
115+
</Text>
116+
<GradientSlider
117+
color={color}
118+
containerStyle={styles.gradientSliderContainer}
112119
onValueChange={this.onGradientValueChange}
113120
/>
114121
<View style={styles.box}>
115122
<View style={{flex: 1, backgroundColor: color, opacity: alpha}}/>
116123
</View>
117124
</View>
118125
<View row centerV>
119-
<Text text90 grey30>HUE</Text>
120-
<GradientSlider
121-
type={GradientSlider.types.HUE}
122-
color={COLOR}
123-
containerStyle={styles.gradientSliderContainer}
126+
<Text text90 grey30>
127+
HUE
128+
</Text>
129+
<GradientSlider
130+
type={GradientSlider.types.HUE}
131+
color={COLOR}
132+
containerStyle={styles.gradientSliderContainer}
124133
onValueChange={this.onGradientValueChange}
125134
/>
126135
<View style={styles.box}>
127136
<View style={{flex: 1, backgroundColor: color}}/>
128137
</View>
129138
</View>
130-
131-
<Text marginT-25 marginB-20>Color Slider Group</Text>
132-
<ColorSliderGroup
133-
initialColor={color}
139+
140+
<Text marginT-25 marginB-20>
141+
Color Slider Group
142+
</Text>
143+
<ColorSliderGroup
144+
initialColor={color}
134145
sliderContainerStyle={styles.slider}
135146
containerStyle={styles.group}
136147
showLabels
137-
// onValueChange={this.onGroupValueChange}
148+
// onValueChange={this.onGroupValueChange}
138149
/>
139150
</View>
140151
</ScrollView>
@@ -143,6 +154,9 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
143154
}
144155

145156
const styles = StyleSheet.create({
157+
ltr: {
158+
flexDirection: 'row-reverse'
159+
},
146160
image: {
147161
tintColor: Colors.grey30
148162
},
@@ -165,23 +179,23 @@ const styles = StyleSheet.create({
165179
height: 2
166180
},
167181
thumb: {
168-
width: 26,
169-
height: 26,
170-
borderRadius: 13,
171-
borderColor: Colors.violet40,
172-
borderWidth: 1,
182+
width: 26,
183+
height: 26,
184+
borderRadius: 13,
185+
borderColor: Colors.violet40,
186+
borderWidth: 1,
173187
shadowColor: Colors.white
174188
},
175189
activeThumb: {
176-
width: 40,
177-
height: 40,
190+
width: 40,
191+
height: 40,
178192
borderRadius: 20
179193
},
180194
box: {
181-
width: 20,
195+
width: 20,
182196
height: 20,
183197
borderRadius: 4,
184-
borderWidth: 1,
198+
borderWidth: 1,
185199
borderColor: Colors.grey60
186200
},
187201
group: {

0 commit comments

Comments
 (0)