fix custom tabs navigation

This commit is contained in:
ammarahm-ed
2021-07-17 20:33:50 +05:00
parent a7f71e5ff0
commit 57d02f9cc6

View File

@@ -1,7 +1,7 @@
import React, {Component, createRef} from 'react'; import React, {Component, createRef} from 'react';
import {Platform} from 'react-native'; import {Platform} from 'react-native';
import {FlatList, TextInput, View} from 'react-native'; import {FlatList, TextInput, View} from 'react-native';
import { DDS } from '../../services/DeviceDetection'; import {DDS} from '../../services/DeviceDetection';
import {editing} from '../../utils'; import {editing} from '../../utils';
export default class CustomTabs extends Component { export default class CustomTabs extends Component {
@@ -42,8 +42,11 @@ export default class CustomTabs extends Component {
} }
if (cOffset > pOffset - 50 || DDS.isSmallTab) { if (cOffset > pOffset - 50 || DDS.isSmallTab) {
if ((!DDS.isSmallTab && x > 50 || y > heightCheck) || (DDS.isSmallTab && x > this.props.widths.b)) { if (
(!DDS.isSmallTab && x > 50) ||
y > heightCheck ||
(DDS.isSmallTab && x > this.props.widths.b)
) {
this.responderAllowedScroll = false; this.responderAllowedScroll = false;
this.setScrollEnabled(false); this.setScrollEnabled(false);
return; return;
@@ -99,7 +102,6 @@ export default class CustomTabs extends Component {
offset = 0; offset = 0;
this.nextPage = 0; this.nextPage = 0;
} }
this.listRef.current?.scrollToOffset({ this.listRef.current?.scrollToOffset({
offset: offset, offset: offset,
animated: animated, animated: animated,
@@ -121,6 +123,13 @@ export default class CustomTabs extends Component {
onScroll = event => { onScroll = event => {
this.moved = true; this.moved = true;
this.scrollOffset = event.nativeEvent.contentOffset.x; this.scrollOffset = event.nativeEvent.contentOffset.x;
if (this.scrollOffset < this.props.offsets.b - 100 || this.nextPage !== 1) {
editing.movedAway = true;
} else {
editing.movedAway = false;
editing.currentlyEditing = true;
}
this.props.onScroll(this.scrollOffset); this.props.onScroll(this.scrollOffset);
if (this.scrollTimeout) { if (this.scrollTimeout) {
clearTimeout(this.scrollTimeout); clearTimeout(this.scrollTimeout);
@@ -160,8 +169,11 @@ export default class CustomTabs extends Component {
let page = 0; let page = 0;
if (this.scrollOffset > this.props.offsets.b - 50) { if (this.scrollOffset > this.props.offsets.b - 50) {
page = 1; page = 1;
this.nextPage = 1;
editing.movedAway = false;
} else { } else {
this.nextPage = 0; this.nextPage = 0;
editing.movedAway = true;
this.hideKeyboardIfVisible(); this.hideKeyboardIfVisible();
} }
let drawerState = page === 0 && this.scrollOffset < 10; let drawerState = page === 0 && this.scrollOffset < 10;
@@ -183,11 +195,10 @@ export default class CustomTabs extends Component {
onListTouchEnd = event => { onListTouchEnd = event => {
if (this.lastOffset < 30 && event) { if (this.lastOffset < 30 && event) {
let width = this.props.dimensions.width; let width = this.props.dimensions.width;
let px = event.nativeEvent.pageX let px = event.nativeEvent.pageX;
if (px > width * 0.75 || (DDS.isSmallTab && px > this.props.widths.a)) { if (px > width * 0.75 || (DDS.isSmallTab && px > this.props.widths.a)) {
this.goToIndex(1); this.goToIndex(1);
} }
} }
}; };
@@ -219,11 +230,13 @@ export default class CustomTabs extends Component {
alwaysBounceHorizontal={false} alwaysBounceHorizontal={false}
scrollToOverflowEnabled={false} scrollToOverflowEnabled={false}
scrollsToTop={false} scrollsToTop={false}
scrollEventThrottle={1} scrollEventThrottle={2}
directionalLockEnabled directionalLockEnabled
overScrollMode="auto" overScrollMode="never"
maxToRenderPerBatch={100} maxToRenderPerBatch={100}
keyboardDismissMode="none" keyboardDismissMode="none"
disableVirtualization
removeClippedSubviews={Platform.OS === 'android'}
keyboardShouldPersistTaps="always" keyboardShouldPersistTaps="always"
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
disableIntervalMomentum={true} disableIntervalMomentum={true}