react-native-gesture-handler#NativeViewGestureHandler JavaScript Examples
The following examples show how to use
react-native-gesture-handler#NativeViewGestureHandler.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ScrollableBottomSheet.js From actual with MIT License | 5 votes |
|
render() {
const { shouldCheckScrollPan, forcedHeight } = this.state;
const {
renderHeader,
renderScroll = this.defaultRenderScroll
} = this.props;
return (
<BottomSheet
ref={el => (this.sheet = el)}
onMove={this.onMove}
{...this.props}
>
{({ panEvent, onHandlerStateChange }) => {
return (
<View style={{ flex: 1 }}>
{renderHeader && renderHeader()}
<PanGestureHandler
ref={this.checkScrollHandler}
enabled={shouldCheckScrollPan}
activeOffsetY={20}
failOffsetY={[-1, 10000]}
onGestureEvent={panEvent}
onHandlerStateChange={onHandlerStateChange}
simultaneousHandlers={this.scrollWrapperHandler}
>
<Animated.View style={{ flex: 1 }}>
<PanGestureHandler
ref={this.scrollWrapperHandler}
simultaneousHandlers={[
this.scrollHandler,
this.checkScrollHandler
]}
onGestureEvent={this.onScrollPan}
>
<View
style={
forcedHeight
? { flex: 1, paddingBottom: forcedHeight }
: { flex: 1 }
}
>
<NativeViewGestureHandler
ref={this.scrollHandler}
simultaneousHandlers={this.scrollWrapperHandler}
{...(shouldCheckScrollPan
? { waitFor: this.checkScrollHandler }
: {})}
>
{renderScroll({
ref: el => (this.scrollView = el),
automaticallyAdjustContentInsets: false,
onScrollBeginDrag: this.onScrollBeginDrag,
onScrollEndDrag: this.onScrollEndDrag,
onScroll: this.onScroll,
onMomentumScrollEnd: this.onMomentumScrollEnd,
scrollEventThrottle: 1
})}
</NativeViewGestureHandler>
</View>
</PanGestureHandler>
</Animated.View>
</PanGestureHandler>
</View>
);
}}
</BottomSheet>
);
}
Example #2
| Source File: budget.js From actual with MIT License | 4 votes |
|
render() {
const {
type,
categoryGroups,
month,
monthBounds,
editMode,
refreshControl,
onPrevMonth,
onNextMonth,
onAddCategory,
onReorderCategory,
onReorderGroup,
onShowBudgetDetails,
onOpenActionSheet,
onBudgetAction
} = this.props;
let { editingCategory } = this.state;
let currentMonth = monthUtils.currentMonth();
return (
<NamespaceContext.Provider value={monthUtils.sheetForMonth(month, type)}>
<View
style={{ flex: 1, backgroundColor: 'white' }}
data-testid="budget-table"
>
<BudgetHeader
currentMonth={month}
monthBounds={monthBounds}
editMode={editMode}
onDone={() => this.props.onEditMode(false)}
onOpenActionSheet={onOpenActionSheet}
onPrevMonth={onPrevMonth}
onNextMonth={onNextMonth}
/>
<View
style={{
flexDirection: 'row',
paddingHorizontal: 10,
paddingVertical: 10,
paddingRight: 14,
backgroundColor: 'white',
borderBottomWidth: 1,
borderColor: colors.n9
}}
>
{type === 'report' ? (
<Saved projected={month >= currentMonth} />
) : (
<ToBudget
toBudget={rolloverBudget.toBudget}
onPress={onShowBudgetDetails}
/>
)}
<View style={{ flex: 1, zIndex: -1 }} />
<View style={{ width: 90 }}>
<Label title="BUDGETED" style={{ color: colors.n1 }} />
<CellValue
binding={reportBudget.totalBudgetedExpense}
type="financial"
style={[
styles.smallText,
{ color: colors.n1, textAlign: 'right', fontWeight: '500' }
]}
formatter={(value) => {
return format(-parseFloat(value || '0'), 'financial');
}}
/>
</View>
<View style={{ width: 90 }}>
<Label title="BALANCE" style={{ color: colors.n1 }} />
<CellValue
binding={rolloverBudget.totalBalance}
type="financial"
style={[
styles.smallText,
{ color: colors.n1, textAlign: 'right', fontWeight: '500' }
]}
/>
</View>
</View>
<AndroidKeyboardAvoidingView includeStatusBar={true}>
{!editMode ? (
<ScrollView
ref={(el) => (this.list = el)}
keyboardShouldPersistTaps="always"
refreshControl={refreshControl}
style={{ backgroundColor: colors.n10 }}
automaticallyAdjustContentInsets={false}
>
<BudgetGroups
type={type}
categoryGroups={categoryGroups}
editingId={editingCategory}
editMode={editMode}
gestures={this.gestures}
month={month}
onEditCategory={this.onEditCategory}
onAddCategory={onAddCategory}
onReorderCategory={onReorderCategory}
onReorderGroup={onReorderGroup}
onBudgetAction={onBudgetAction}
/>
</ScrollView>
) : (
<DragDrop>
{({
dragging,
onGestureEvent,
onHandlerStateChange,
scrollRef,
onScroll
}) => (
<NativeViewGestureHandler
enabled={!dragging}
waitFor={this.gestures.pan}
ref={this.gestures.scroll}
>
<Animated.ScrollView
ref={(el) => {
scrollRef.current = el;
this.list = el;
}}
onScroll={onScroll}
keyboardShouldPersistTaps="always"
scrollEventThrottle={16}
scrollEnabled={!dragging}
style={{ backgroundColor: colors.n10 }}
>
<PanGestureHandler
avgTouches
minDeltaX={2}
minDeltaY={2}
maxPointers={1}
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}
ref={this.gestures.pan}
waitFor={this.gestures.scroll}
>
<Animated.View>
<BudgetGroups
categoryGroups={categoryGroups}
editingId={editingCategory}
editMode={editMode}
gestures={this.gestures}
onEditCategory={this.onEditCategory}
onAddCategory={onAddCategory}
onReorderCategory={onReorderCategory}
onReorderGroup={onReorderGroup}
/>
</Animated.View>
</PanGestureHandler>
<DragDropHighlight />
</Animated.ScrollView>
</NativeViewGestureHandler>
)}
</DragDrop>
)}
</AndroidKeyboardAvoidingView>
</View>
</NamespaceContext.Provider>
);
}
