diff --git a/src/SelectDropdown.js b/src/SelectDropdown.js index 18f66b0..a16919e 100644 --- a/src/SelectDropdown.js +++ b/src/SelectDropdown.js @@ -1,4 +1,4 @@ -import React, {forwardRef, useImperativeHandle} from 'react'; +import React, {useRef, useState, forwardRef, useImperativeHandle} from 'react'; import {View, Text, TouchableOpacity, FlatList} from 'react-native'; import styles from './styles'; import {isExist} from './helpers/isExist'; @@ -59,6 +59,7 @@ const SelectDropdown = ( ) => { const disabledInternalSearch = !!onChangeSearchInputText; /* ******************* hooks ******************* */ + const fadeAnim = useRef(new Animated.Value(0)).current; const {dropdownButtonRef, dropDownFlatlistRef} = useRefs(); const { dataArr, // @@ -92,6 +93,34 @@ const SelectDropdown = ( selectItem(index); }, })); + + const [initClose, setInitClose] = useState(false); + + const fadeInOut = value => { + Animated.timing(fadeAnim, { + toValue: value, + duration: 300, + useNativeDriver: true, + }).start(() => { + if (initClose) { + setIsVisible(false); + setInitClose(false); + } + }); + }; + + useEffect(() => { + if (isVisible) { + fadeInOut(1); + } + }, [isVisible]); + + useEffect(() => { + if (initClose) { + fadeInOut(0); + } + }, [initClose]); + /* ******************* Methods ******************* */ const openDropdown = () => { dropdownButtonRef.current.measure((fx, fy, w, h, px, py) => { @@ -101,7 +130,7 @@ const SelectDropdown = ( }); }; const closeDropdown = () => { - setIsVisible(false); + setInitClose(true); setSearchTxt(''); onBlur && onBlur(); }; @@ -172,23 +201,25 @@ const SelectDropdown = ( return ( isVisible && ( - - - index.toString()} - ref={dropDownFlatlistRef} - renderItem={renderFlatlistItem} - getItemLayout={getItemLayout} - onLayout={onLayout} - ListHeaderComponent={renderSearchView()} - stickyHeaderIndices={search && [0]} - keyboardShouldPersistTaps="always" - onEndReached={() => onScrollEndReached && onScrollEndReached()} - onEndReachedThreshold={0.5} - showsVerticalScrollIndicator={showsVerticalScrollIndicator} - /> - + + + + index.toString()} + ref={dropDownFlatlistRef} + renderItem={renderFlatlistItem} + getItemLayout={getItemLayout} + onLayout={onLayout} + ListHeaderComponent={renderSearchView()} + stickyHeaderIndices={search && [0]} + keyboardShouldPersistTaps="always" + onEndReached={() => onScrollEndReached && onScrollEndReached()} + onEndReachedThreshold={0.5} + showsVerticalScrollIndicator={showsVerticalScrollIndicator} + /> + + ) );