From 7b33a2cb7dcec35b4155694dfebee9845e4d4e15 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 19 Jul 2023 16:31:43 +0200
Subject: [PATCH 1/4] Migrate OptionsList

---
 src/components/OptionsList/index.js | 78 +++++++++++++----------------
 1 file changed, 34 insertions(+), 44 deletions(-)

diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js
index ac0d920ddcb0..80ee286e6626 100644
--- a/src/components/OptionsList/index.js
+++ b/src/components/OptionsList/index.js
@@ -1,4 +1,4 @@
-import React, {Component, forwardRef} from 'react';
+import React, {forwardRef, useEffect, useRef} from 'react';
 import {Keyboard} from 'react-native';
 import _ from 'underscore';
 import BaseOptionsList from './BaseOptionsList';
@@ -6,60 +6,50 @@ import withWindowDimensions from '../withWindowDimensions';
 import {propTypes, defaultProps} from './optionsListPropTypes';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
-class OptionsList extends Component {
-    constructor(props) {
-        super(props);
+function OptionsList(props) {
+    const isScreenTouched = useRef(false);
 
-        this.touchStart = this.touchStart.bind(this);
-        this.touchEnd = this.touchEnd.bind(this);
-    }
+    const touchStart = () => {
+        isScreenTouched.current = true;
+    };
 
-    componentDidMount() {
+    const touchEnd = () => {
+        isScreenTouched.current = false;
+    };
+
+    useEffect(() => {
         if (!DeviceCapabilities.canUseTouchScreen()) {
-            return;
+            return undefined;
         }
 
         // 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);
-    }
-
-    componentWillUnmount() {
-        if (!DeviceCapabilities.canUseTouchScreen()) {
-            return;
-        }
+        document.addEventListener('touchstart', touchStart);
+        document.addEventListener('touchend', touchEnd);
 
-        document.removeEventListener('touchstart', this.touchStart);
-        document.removeEventListener('touchend', this.touchEnd);
-    }
+        return () => {
+            document.removeEventListener('touchstart', touchStart);
+            document.removeEventListener('touchend', touchEnd);
+        };
+    }, []);
 
-    touchStart() {
-        this.isScreenTouched = true;
-    }
-
-    touchEnd() {
-        this.isScreenTouched = false;
-    }
-
-    render() {
-        return (
-            <BaseOptionsList
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {..._.omit(this.props, 'forwardedRef')}
-                ref={this.props.forwardedRef}
-                onScroll={() => {
-                    // Only dismiss the keyboard whenever the user scrolls the screen
-                    if (!this.isScreenTouched) {
-                        return;
-                    }
-                    Keyboard.dismiss();
-                }}
-            />
-        );
-    }
+    return (
+        <BaseOptionsList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {..._.omit(props, 'forwardedRef')}
+            ref={props.forwardedRef}
+            onScroll={() => {
+                // Only dismiss the keyboard whenever the user scrolls the screen
+                if (!isScreenTouched.current) {
+                    return;
+                }
+                Keyboard.dismiss();
+            }}
+        />
+    );
 }
 
+OptionsList.displayName = 'OptionsList';
 OptionsList.propTypes = {
     ...propTypes,
 };

From 261beee609af0e10af0ca146360a34b558757949 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 19 Jul 2023 16:49:24 +0200
Subject: [PATCH 2/4] Add useCallback

---
 src/components/OptionsList/index.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js
index 80ee286e6626..f158168eb7f5 100644
--- a/src/components/OptionsList/index.js
+++ b/src/components/OptionsList/index.js
@@ -1,4 +1,4 @@
-import React, {forwardRef, useEffect, useRef} from 'react';
+import React, {forwardRef, useEffect, useRef, useCallback} from 'react';
 import {Keyboard} from 'react-native';
 import _ from 'underscore';
 import BaseOptionsList from './BaseOptionsList';
@@ -19,7 +19,7 @@ function OptionsList(props) {
 
     useEffect(() => {
         if (!DeviceCapabilities.canUseTouchScreen()) {
-            return undefined;
+            return;
         }
 
         // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where
@@ -33,18 +33,20 @@ function OptionsList(props) {
         };
     }, []);
 
+    const onScroll = useCallback(() => {
+        // Only dismiss the keyboard whenever the user scrolls the screen
+        if (!isScreenTouched.current) {
+            return;
+        }
+        Keyboard.dismiss();
+    }, []);
+
     return (
         <BaseOptionsList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {..._.omit(props, 'forwardedRef')}
             ref={props.forwardedRef}
-            onScroll={() => {
-                // Only dismiss the keyboard whenever the user scrolls the screen
-                if (!isScreenTouched.current) {
-                    return;
-                }
-                Keyboard.dismiss();
-            }}
+            onScroll={onScroll}
         />
     );
 }

From a081d169c58eebcf553e622e19948f19aaf70fb1 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 20 Jul 2023 10:35:53 +0200
Subject: [PATCH 3/4] Address review

---
 src/components/OptionsList/index.js | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/index.js
index f158168eb7f5..2164b479df94 100644
--- a/src/components/OptionsList/index.js
+++ b/src/components/OptionsList/index.js
@@ -9,19 +9,18 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 function OptionsList(props) {
     const isScreenTouched = useRef(false);
 
-    const touchStart = () => {
-        isScreenTouched.current = true;
-    };
-
-    const touchEnd = () => {
-        isScreenTouched.current = false;
-    };
-
     useEffect(() => {
         if (!DeviceCapabilities.canUseTouchScreen()) {
             return;
         }
 
+        const touchStart = () => {
+            isScreenTouched.current = true;
+        };
+        const touchEnd = () => {
+            isScreenTouched.current = false;
+        };
+
         // 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);
@@ -52,9 +51,7 @@ function OptionsList(props) {
 }
 
 OptionsList.displayName = 'OptionsList';
-OptionsList.propTypes = {
-    ...propTypes,
-};
+OptionsList.propTypes = propTypes;
 OptionsList.defaultProps = defaultProps;
 
 export default withWindowDimensions(

From e11f985873272d82147ae9211d680067e59d172b Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 20 Jul 2023 12:45:13 +0200
Subject: [PATCH 4/4] Move functions to useEffect

---
 .../KeyboardDismissingFlatList/index.js          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/KeyboardDismissingFlatList/index.js b/src/components/KeyboardDismissingFlatList/index.js
index c8fc8fb27147..0ca8504d96ab 100644
--- a/src/components/KeyboardDismissingFlatList/index.js
+++ b/src/components/KeyboardDismissingFlatList/index.js
@@ -5,19 +5,19 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 function KeyboardDismissingFlatList(props) {
     const isScreenTouched = useRef(false);
 
-    const touchStart = () => {
-        isScreenTouched.current = true;
-    };
-
-    const touchEnd = () => {
-        isScreenTouched.current = false;
-    };
-
     useEffect(() => {
         if (!DeviceCapabilities.canUseTouchScreen()) {
             return;
         }
 
+        const touchStart = () => {
+            isScreenTouched.current = true;
+        };
+
+        const touchEnd = () => {
+            isScreenTouched.current = false;
+        };
+
         // 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);
