fix on scroll event

This commit is contained in:
ammarahm-ed
2020-04-22 13:37:01 +05:00
parent dac5cf6cd6
commit bcfa559270
3 changed files with 19 additions and 30 deletions

View File

@@ -27,7 +27,7 @@ const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
); );
const AnimatedSafeAreaView = Animatable.createAnimatableComponent(SafeAreaView); const AnimatedSafeAreaView = Animatable.createAnimatableComponent(SafeAreaView);
let previousOffset = 0;
export const Container = ({ export const Container = ({
children, children,
bottomButtonOnPress, bottomButtonOnPress,
@@ -55,31 +55,21 @@ export const Container = ({
const [hideHeader, setHideHeader] = useState(false); const [hideHeader, setHideHeader] = useState(false);
const [buttonHide, setButtonHide] = useState(false); const [buttonHide, setButtonHide] = useState(false);
const insets = useSafeArea(); const insets = useSafeArea();
let offsetY = 0;
let countUp = 1;
let countDown = 0;
let searchResult = []; let searchResult = [];
const onScroll = y => { const onScroll = currentOffset => {
if (searchResults.length > 0) return; if (searchResults.length > 0) return;
if (y < 30) {
countUp = 1;
countDown = 0;
setHideHeader(false);
}
if (y > offsetY) { if (currentOffset > previousOffset) {
if (y - offsetY < 150 || countDown > 0) return; console.log('call A', currentOffset, previousOffset);
countDown = 1;
countUp = 0;
setHideHeader(true); setHideHeader(true);
} else { } else {
if (offsetY - y < 50 || countUp > 0) return; console.log('call B', currentOffset, previousOffset);
countDown = 0;
countUp = 1;
setHideHeader(false); setHideHeader(false);
} }
offsetY = y; previousOffset = currentOffset;
}; };
const onChangeText = value => { const onChangeText = value => {

View File

@@ -1,17 +1,17 @@
import React, { useEffect, useState } from 'react'; import React, {useEffect, useState} from 'react';
import { TextInput } from 'react-native'; import {TextInput} from 'react-native';
import Animated, { Easing } from 'react-native-reanimated'; import Animated, {Easing} from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { br, SIZE, WEIGHT } from '../../common/common'; import {br, SIZE, WEIGHT} from '../../common/common';
import { useTracked } from '../../provider'; import {useTracked} from '../../provider';
import { inputRef } from '../../utils/refs'; import {inputRef} from '../../utils/refs';
import { DDS } from '../../utils/utils'; import {DDS} from '../../utils/utils';
const { Value, timing, block } = Animated; const {Value, timing, block} = Animated;
export const Search = props => { export const Search = props => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const { colors, searchResults } = state; const {colors, searchResults} = state;
const [focus, setFocus] = useState(false); const [focus, setFocus] = useState(false);
@@ -46,7 +46,7 @@ export const Search = props => {
height: 60, height: 60,
justifyContent: 'center', justifyContent: 'center',
marginTop: _marginAnim, marginTop: _marginAnim,
paddingHorizontal: 12 paddingHorizontal: 12,
}}> }}>
<Animated.View <Animated.View
transition={['borderWidth']} transition={['borderWidth']}
@@ -91,7 +91,7 @@ export const Search = props => {
placeholderTextColor={colors.icon} placeholderTextColor={colors.icon}
/> />
<Icon <Icon
style={{ paddingRight: DDS.isTab ? 12 : 12 }} style={{paddingRight: DDS.isTab ? 12 : 12}}
onPress={() => { onPress={() => {
props.onSubmitEditing(); props.onSubmitEditing();
}} }}

View File

@@ -40,7 +40,6 @@ const SimpleList = ({
const _onScroll = event => { const _onScroll = event => {
if (!event) return; if (!event) return;
let y = event.nativeEvent.contentOffset.y; let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y); eSendEvent(eScrollEvent, y);
}; };