import React, { useCallback, useState } from 'react'; import { StyleSheet, View } from 'react-native'; import PropTypes from 'prop-types'; import Animated, { call, cond, greaterOrEq, useCode } from 'react-native-reanimated'; import { themes } from '../../../constants/colors'; import { CustomIcon } from '../../../lib/Icons'; import { useTheme } from '../../../theme'; import Touch from '../../../utils/touch'; import { hasNotch } from '../../../utils/deviceInfo'; const SCROLL_LIMIT = 200; const SEND_TO_CHANNEL_HEIGHT = 40; const styles = StyleSheet.create({ container: { position: 'absolute', right: 15 }, button: { borderRadius: 25 }, content: { width: 50, height: 50, borderRadius: 25, borderWidth: 1, alignItems: 'center', justifyContent: 'center' } }); const NavBottomFAB = ({ y, onPress, isThread }) => { const { theme } = useTheme(); const [show, setShow] = useState(false); const handleOnPress = useCallback(() => onPress()); const toggle = v => setShow(v); useCode( () => cond( greaterOrEq(y, SCROLL_LIMIT), call([y], () => toggle(true)), call([y], () => toggle(false)) ), [y] ); if (!show) { return null; } let bottom = hasNotch ? 100 : 60; if (isThread) { bottom += SEND_TO_CHANNEL_HEIGHT; } return ( <Animated.View style={[styles.container, { bottom }]} testID='nav-jump-to-bottom'> <Touch onPress={handleOnPress} theme={theme} style={[styles.button, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.content, { borderColor: themes[theme].borderColor }]}> <CustomIcon name='chevron-down' color={themes[theme].auxiliaryTintColor} size={36} /> </View> </Touch> </Animated.View> ); }; NavBottomFAB.propTypes = { y: Animated.Value, onPress: PropTypes.func, isThread: PropTypes.bool }; export default NavBottomFAB;