From c9acd44eeb7e433af3281be092bfc518f8dece7d Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 13 Jul 2023 12:37:24 +0200 Subject: [PATCH 1/4] Refactor KeyboardDismissingFlatList to functional component --- .../KeyboardDismissingFlatList/index.js | 77 ++++++++----------- 1 file changed, 32 insertions(+), 45 deletions(-) diff --git a/src/components/KeyboardDismissingFlatList/index.js b/src/components/KeyboardDismissingFlatList/index.js index fca1a49ebf8d..4d94d5f579b6 100644 --- a/src/components/KeyboardDismissingFlatList/index.js +++ b/src/components/KeyboardDismissingFlatList/index.js @@ -1,58 +1,45 @@ -import React, {Component} from 'react'; +import React, {useState, useEffect} from 'react'; import {FlatList, Keyboard} from 'react-native'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; -class KeyboardDismissingFlatList extends Component { - constructor(props) { - super(props); +function KeyboardDismissingFlatList(props) { + const [isScreenTouched, setIsScreenTouched] = useState(false); - this.touchStart = this.touchStart.bind(this); - this.touchEnd = this.touchEnd.bind(this); - } + const touchStart = () => { + setIsScreenTouched(true); + }; - componentDidMount() { - if (!DeviceCapabilities.canUseTouchScreen()) { - return; - } - - // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where - // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically. - document.addEventListener('touchstart', this.touchStart); - document.addEventListener('touchend', this.touchEnd); - } + const touchEnd = () => { + setIsScreenTouched(false); + }; - componentWillUnmount() { + useEffect(() => { if (!DeviceCapabilities.canUseTouchScreen()) { return; } - document.removeEventListener('touchstart', this.touchStart); - document.removeEventListener('touchend', this.touchEnd); - } - - touchStart() { - this.isScreenTouched = true; - } - - touchEnd() { - this.isScreenTouched = false; - } - - render() { - return ( - { - // Only dismiss the keyboard whenever the user scrolls the screen - if (!this.isScreenTouched) { - return; - } - Keyboard.dismiss(); - }} - /> - ); - } + document.addEventListener('touchstart', touchStart); + document.addEventListener('touchend', touchEnd); + + return () => { + document.removeEventListener('touchstart', touchStart); + document.removeEventListener('touchend', touchEnd); + }; + }, []); + + return ( + { + // Only dismiss the keyboard whenever the user scrolls the screen + if (!isScreenTouched) { + return; + } + Keyboard.dismiss(); + }} + /> + ); } export default KeyboardDismissingFlatList; From 0573cce4b5f2c134738d84fd876bfc25a4ada390 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 14 Jul 2023 10:37:02 +0200 Subject: [PATCH 2/4] Use useCallback --- .../KeyboardDismissingFlatList/index.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/KeyboardDismissingFlatList/index.js b/src/components/KeyboardDismissingFlatList/index.js index 4d94d5f579b6..1abf8466aa3d 100644 --- a/src/components/KeyboardDismissingFlatList/index.js +++ b/src/components/KeyboardDismissingFlatList/index.js @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react'; +import React, {useState, useEffect, useCallback} from 'react'; import {FlatList, Keyboard} from 'react-native'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; @@ -27,17 +27,19 @@ function KeyboardDismissingFlatList(props) { }; }, []); + const onScroll = useCallback(() => { + // Only dismiss the keyboard whenever the user scrolls the screen + if (!isScreenTouched) { + return; + } + Keyboard.dismiss(); + }, [isScreenTouched]); + return ( { - // Only dismiss the keyboard whenever the user scrolls the screen - if (!isScreenTouched) { - return; - } - Keyboard.dismiss(); - }} + onScroll={onScroll} /> ); } From be71c2213afbd221e459f6164f0b29bd98481170 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 17 Jul 2023 10:28:42 +0200 Subject: [PATCH 3/4] Use useRef instead of useState --- src/components/KeyboardDismissingFlatList/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/KeyboardDismissingFlatList/index.js b/src/components/KeyboardDismissingFlatList/index.js index 1abf8466aa3d..79146b8815f5 100644 --- a/src/components/KeyboardDismissingFlatList/index.js +++ b/src/components/KeyboardDismissingFlatList/index.js @@ -1,16 +1,16 @@ -import React, {useState, useEffect, useCallback} from 'react'; +import React, {useRef, useEffect, useCallback} from 'react'; import {FlatList, Keyboard} from 'react-native'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; function KeyboardDismissingFlatList(props) { - const [isScreenTouched, setIsScreenTouched] = useState(false); + const isScreenTouched = useRef(false); const touchStart = () => { - setIsScreenTouched(true); + isScreenTouched.current = true; }; const touchEnd = () => { - setIsScreenTouched(false); + isScreenTouched.current = false; }; useEffect(() => { @@ -29,11 +29,11 @@ function KeyboardDismissingFlatList(props) { const onScroll = useCallback(() => { // Only dismiss the keyboard whenever the user scrolls the screen - if (!isScreenTouched) { + if (!isScreenTouched.current) { return; } Keyboard.dismiss(); - }, [isScreenTouched]); + }, []); return ( Date: Wed, 19 Jul 2023 09:27:52 +0200 Subject: [PATCH 4/4] Comment and displayName --- src/components/KeyboardDismissingFlatList/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/KeyboardDismissingFlatList/index.js b/src/components/KeyboardDismissingFlatList/index.js index 79146b8815f5..c8fc8fb27147 100644 --- a/src/components/KeyboardDismissingFlatList/index.js +++ b/src/components/KeyboardDismissingFlatList/index.js @@ -18,6 +18,8 @@ function KeyboardDismissingFlatList(props) { return; } + // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where + // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically. document.addEventListener('touchstart', touchStart); document.addEventListener('touchend', touchEnd); @@ -44,4 +46,6 @@ function KeyboardDismissingFlatList(props) { ); } +KeyboardDismissingFlatList.displayName = 'KeyboardDismissingFlatList'; + export default KeyboardDismissingFlatList;