Skip to content

Commit ddf74ae

Browse files
Inbal-TishInbal-Tish
authored
GestureHandlerRoot - wrap components instead of screens (#3244)
* Moving GestureHandlerRootView to wrap components instead of screens. Slider - migrate usages * Incubator and other screens remove wrapping and move to proper component * style to styleSheet
1 parent 454dfab commit ddf74ae

File tree

26 files changed

+85
-102
lines changed

26 files changed

+85
-102
lines changed

‎demo/src/screens/ExampleScreenPresenter.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ export function renderSliderOption(title: string,
169169
</Text>
170170
<View row centerV>
171171
<Slider
172+
migrate
172173
testID={key}
173174
value={initial}
174175
containerStyle={{flex: 1}}

‎demo/src/screens/MainScreen.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
44
import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
55
import {ViewPropTypes} from 'deprecated-react-native-prop-types';
66
import {Navigation} from 'react-native-navigation';
7-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
87
import {
98
Assets,
109
Colors,
@@ -462,4 +461,4 @@ const styles = StyleSheet.create({
462461
searchResultsContainer: {paddingTop: 20}
463462
});
464463

465-
export default gestureHandlerRootHOC(MainScreen);
464+
export default MainScreen;

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@ import _ from 'lodash';
22
import PropTypes from 'prop-types';
33
import React, {Component, PureComponent} from 'react';
44
import {StyleSheet, Alert, FlatList} from 'react-native';
5-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
65
import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
76
import conversations from '../../data/conversations';
87

9-
108
const collectionsIcon = require('../../assets/icons/collections.png');
119
const starIcon = require('../../assets/icons/star.png');
1210
const shareIcon = require('../../assets/icons/share.png');
@@ -47,7 +45,7 @@ class ConversationListScreen extends Component {
4745
icon: collectionsIcon,
4846
background: Colors.blue30,
4947
onPress: () => Alert.alert(`Archive button pressed for item #${item.name}`)
50-
},
48+
}
5149
];
5250
const leftButton = {
5351
text: 'Read',
@@ -94,19 +92,19 @@ class ConversationListScreen extends Component {
9492

9593
addRef = (ref, index) => {
9694
this.refArray[index] = ref;
97-
}
95+
};
9896

9997
onEndReached = () => {
10098
this.getNewItems();
101-
}
99+
};
102100

103101
onSwipeableWillOpen = (props) => {
104102
this.closeLast(props.index);
105-
}
103+
};
106104

107105
renderItem = ({item, index}) => {
108-
return <ContactItem item={item} index={index} addRef={this.addRef} onSwipeableWillOpen={this.onSwipeableWillOpen}/>
109-
}
106+
return <ContactItem item={item} index={index} addRef={this.addRef} onSwipeableWillOpen={this.onSwipeableWillOpen}/>;
107+
};
110108

111109
keyExtractor = (item, index) => `${item.name}-${index}`;
112110

@@ -128,7 +126,7 @@ class ContactItem extends PureComponent {
128126
index: PropTypes.number,
129127
addRef: PropTypes.func,
130128
onSwipeableWillOpen: PropTypes.func
131-
}
129+
};
132130

133131
render() {
134132
const {item, index, addRef, onSwipeableWillOpen} = this.props;
@@ -192,4 +190,4 @@ const styles = StyleSheet.create({
192190
}
193191
});
194192

195-
export default gestureHandlerRootHOC(ConversationListScreen);
193+
export default ConversationListScreen;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {Component} from 'react';
22
import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
33
import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
4-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
54
import conversations from '../../data/conversations';
65

76
import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
@@ -325,4 +324,4 @@ const styles = StyleSheet.create({
325324
}
326325
});
327326

328-
export default gestureHandlerRootHOC(DrawerScreen);
327+
export default DrawerScreen;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const IconScreen = () => {
3838
</View>
3939

4040
{renderBooleanOption('Custom Size', 'customSize', {spread: false, state: customSize, setState: setCustomSize})}
41-
<Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
41+
<Slider migrate maximumValue={100} value={24} step={1} onValueChange={setSize}/>
4242
<Text marginB-50 marginT-s2>
4343
Custom size: {size}
4444
</Text>
@@ -48,7 +48,7 @@ const IconScreen = () => {
4848
state: customBadgeSize,
4949
setState: setCustomBadgeSize
5050
})}
51-
<Slider maximumValue={100} value={20} step={1} onValueChange={setBadgeSize}/>
51+
<Slider migrate maximumValue={100} value={20} step={1} onValueChange={setBadgeSize}/>
5252
<Text marginB-50 marginT-s2>
5353
Custom badge size: {badgeSize}
5454
</Text>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {useState, useCallback, useRef, useMemo} from 'react';
22
import {StyleSheet, TouchableWithoutFeedback, Keyboard as RNKeyboard} from 'react-native';
3-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
43
import {
54
Text,
65
Spacings,
@@ -200,7 +199,7 @@ const NumberInputScreen = () => {
200199
);
201200
};
202201

203-
export default gestureHandlerRootHOC(NumberInputScreen);
202+
export default NumberInputScreen;
204203

205204
const styles = StyleSheet.create({
206205
containerStyle: {

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
3-
import {ScrollView} from 'react-native-gesture-handler';
3+
import {ScrollView} from 'react-native';
44
import {
5-
View,
5+
Assets,
66
Colors,
7-
Icon,
7+
Typography,
88
Incubator,
9+
View,
910
Text,
10-
Picker,
11+
Button,
12+
Icon,
1113
Avatar,
12-
Assets,
14+
Picker,
1315
PanningProvider,
14-
Typography,
1516
PickerProps,
1617
RenderCustomModalProps,
17-
PickerMethods,
18-
Button
18+
PickerMethods
1919
} from 'react-native-ui-lib'; //eslint-disable-line
2020
import contactsData from '../../data/conversations';
2121
import {longOptions} from './PickerScreenLongOptions';

‎demo/src/screens/componentScreens/TabControllerScreen/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
TabControllerItemProps,
1212
TabControllerImperativeMethods
1313
} from 'react-native-ui-lib';
14-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
1514

1615
import Tab1 from './tab1';
1716
import Tab2 from './tab2';
@@ -224,7 +223,7 @@ class TabControllerScreen extends Component<{}, State> {
224223
}
225224
}
226225

227-
export default gestureHandlerRootHOC(TabControllerScreen);
226+
export default TabControllerScreen;
228227

229228
const styles = StyleSheet.create({
230229
labelStyle: {

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
2-
31
export function registerScreens(registrar) {
4-
52
registrar('unicorn.components.ActionSheetScreen', () => require('./ActionSheetScreen').default);
63
registrar('unicorn.components.ActionBarScreen', () => require('./ActionBarScreen').default);
74
registrar('unicorn.components.AvatarsScreen', () => require('./AvatarsScreen').default);
@@ -15,7 +12,7 @@ export function registerScreens(registrar) {
1512
registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
1613
registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
1714
registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
18-
registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
15+
registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
1916
registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
2017
registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
2118
registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +25,7 @@ export function registerScreens(registrar) {
2825
registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
2926
registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
3027
registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
31-
registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
28+
registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
3229
registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
3330
registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
3431
registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +35,12 @@ export function registerScreens(registrar) {
3835
registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
3936
registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
4037
registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
41-
registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
38+
registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
4239
registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
4340
registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
4441
registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
4542
registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
46-
registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
43+
registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
4744
registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
4845
registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
4946
registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
@@ -55,15 +52,15 @@ export function registerScreens(registrar) {
5552
registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
5653
registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
5754
registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
58-
registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => gestureHandlerRootHOC(require('./TabControllerWithStickyHeaderScreen').default));
55+
registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => require('./TabControllerWithStickyHeaderScreen').default);
5956
registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
6057
registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
6158
registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
6259
registrar('unicorn.wrappers.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
6360
registrar('unicorn.components.TourScreen', () => require('./TourScreen').default);
6461
registrar('unicorn.components.ViewScreen', () => require('./ViewScreen').default);
6562
registrar('unicorn.components.WizardScreen', () => require('./WizardScreen').default);
66-
registrar('unicorn.components.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
63+
registrar('unicorn.components.WheelPickerScreen', () => require('./WheelPickerScreen').default);
6764
// List Components
6865
registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
6966
registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);
@@ -78,4 +75,3 @@ export function registerScreens(registrar) {
7875
registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
7976
registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
8077
}
81-

‎demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
22
import {ScrollView, StyleSheet} from 'react-native';
33
import {Assets, Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
44
import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
5-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
65

76
const {Toast} = Incubator;
87

@@ -180,7 +179,7 @@ class ToastsScreen extends Component {
180179
}
181180
}
182181

183-
export default gestureHandlerRootHOC(ToastsScreen);
182+
export default ToastsScreen;
184183

185184
const styles = StyleSheet.create({
186185
scrollView: {

‎demo/src/screens/incubatorScreens/PanViewScreen.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 {StyleSheet, ScrollView} from 'react-native';
3-
import {GestureHandlerRootView, FlatList} from 'react-native-gesture-handler';
3+
import {FlatList} from 'react-native-gesture-handler';
44
import {
55
Assets,
66
View,
@@ -147,7 +147,7 @@ class PanViewScreen extends Component {
147147
render() {
148148
const {showToast, showDialog} = this.state;
149149
return (
150-
<GestureHandlerRootView style={styles.root}>
150+
<View style={styles.root}>
151151
<View marginL-page height={50} centerV>
152152
<Text text50>New Pan View</Text>
153153
</View>
@@ -163,7 +163,7 @@ class PanViewScreen extends Component {
163163
</ScrollView>
164164
{showToast && this.renderToast()}
165165
{showDialog && this.renderDialog()}
166-
</GestureHandlerRootView>
166+
</View>
167167
);
168168
}
169169
}

‎demo/src/screens/incubatorScreens/index.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
2-
31
export function registerScreens(registrar) {
42
registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
5-
registrar('unicorn.incubator.TouchableOpacityScreen', () =>
6-
gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
3+
registrar('unicorn.incubator.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
74
registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
85
registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
96
registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
107
registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
11-
registrar('unicorn.components.IncubatorSliderScreen', () => gestureHandlerRootHOC(require('./IncubatorSliderScreen').default));
8+
registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
129
}

‎demo/src/screens/index.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
2-
31
export function registerScreens(registrar) {
42
// load demo app presets
53
require('../configurations').loadDemoConfigurations();
@@ -11,7 +9,7 @@ export function registerScreens(registrar) {
119
require('./incubatorScreens').registerScreens(registrar);
1210

1311
registrar('unicorn.MainScreen', () => require('./MainScreen').default);
14-
registrar('unicorn.PlaygroundScreen', () => gestureHandlerRootHOC(require('./PlaygroundScreen').default));
12+
registrar('unicorn.PlaygroundScreen', () => require('./PlaygroundScreen').default);
1513
registrar('unicorn.Settings', () => require('./SettingsScreen').default);
1614

1715
}

‎demo/src/screens/realExamples/Pinterest/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ class Pinterest extends Component<{}, State> {
9393
activeScale={0.98}
9494
activeOpacity={1}
9595
>
96-
<Image style={[styles.image, {aspectRatio: image.aspectRatio}]} source={{uri: image.uri}} width={COLUMN_SIZE}/>
96+
<Image style={[styles.image, {aspectRatio: image?.aspectRatio}]} source={{uri: image.uri}} width={COLUMN_SIZE}/>
9797
<View absF bottom right pointerEvents="none" padding-s2>
9898
<Button
9999
iconSource={Assets.icons.demo.plus}

‎demo/src/screens/realExamples/index.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
2-
31
export function registerScreens(registrar) {
42
registrar('unicorn.examples.AppleMusic', () => require('./AppleMusic').default);
5-
registrar('unicorn.examples.Pinterest', () =>
6-
gestureHandlerRootHOC(require('./Pinterest').default));
7-
registrar('unicorn.examples.ListActionsScreen',
8-
() => require('./ListActions/ListActionsScreen').default);
3+
registrar('unicorn.examples.Pinterest', () => require('./Pinterest').default);
4+
registrar('unicorn.examples.ListActionsScreen', () => require('./ListActions/ListActionsScreen').default);
95
registrar('unicorn.examples.ProductPage', () => require('./ProductPage').default);
106
registrar('unicorn.examples.Twitter', () => require('./Twitter').default);
117
}

‎src/components/WheelPicker/index.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
FlatListProps
1212
} from 'react-native';
1313
import Animated, {useSharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
14-
import {FlatList} from 'react-native-gesture-handler';
14+
import {FlatList, GestureHandlerRootView} from 'react-native-gesture-handler';
1515
import {Colors, Spacings} from '../../style';
1616
import {Constants} from '../../commons/new';
1717
import {useThemeProps} from '../../hooks';
@@ -351,7 +351,7 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
351351
<View testID={testID} bg-$backgroundDefault style={style}>
352352
{separators}
353353
<View row centerH>
354-
<View flexG>
354+
<GestureHandlerRootView style={styles.gestureContainer}>
355355
<AnimatedFlatList
356356
{...androidFlatListProps}
357357
{...flatListProps}
@@ -379,7 +379,7 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
379379
/* This fixes an issue with RTL when centering flatlist content using alignSelf */
380380
centerContent={align === 'center' && Constants.isRTL}
381381
/>
382-
</View>
382+
</GestureHandlerRootView>
383383
</View>
384384
{label && labelContainer}
385385
{fader(FaderPosition.BOTTOM)}
@@ -393,6 +393,9 @@ export default WheelPicker;
393393
export {WheelPickerItemProps};
394394

395395
const styles = StyleSheet.create({
396+
gestureContainer: {
397+
flexGrow: 1
398+
},
396399
separators: {
397400
borderTopWidth: 1,
398401
borderBottomWidth: 1,

‎src/components/drawer/Swipeable.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ type State = {
7171

7272
export type SwipeableProps = Props;
7373

74-
export default class Swipeable extends Component<Props, State> {
74+
class Swipeable extends Component<Props, State> {
7575
static displayName = 'IGNORE';
7676
static defaultProps = {
7777
friction: 1,
@@ -534,6 +534,8 @@ export default class Swipeable extends Component<Props, State> {
534534
}
535535
}
536536

537+
export default Swipeable;
538+
537539
const styles = StyleSheet.create({
538540
container: {
539541
overflow: 'hidden'

0 commit comments

Comments
 (0)