Merge pull request #27415 from teneeto/chore/16221-migrate-with-keyba…

…ord-state-file-to-function-component

chore: migrate withKeyaboardState class to function component

src/components/withKeyboardState.js

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-unused-state */
-import React, {forwardRef, createContext} from 'react';
-import PropTypes from 'prop-types';
+import React, {forwardRef, createContext, useEffect, useState} from 'react';
 import {Keyboard} from 'react-native';
+import PropTypes from 'prop-types';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
 const KeyboardStateContext = createContext(null);
@@ -15,32 +14,24 @@ const keyboardStateProviderPropTypes = {
     children: PropTypes.node.isRequired,
 };
 
-class KeyboardStateProvider extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isKeyboardShown: false,
-        };
-    }
-
-    componentDidMount() {
-        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-            this.setState({isKeyboardShown: true});
+function KeyboardStateProvider(props) {
+    const {children} = props;
+    const [isKeyboardShown, setIsKeyboardShown] = useState(false);
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+            setIsKeyboardShown(true);
         });
-        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-            this.setState({isKeyboardShown: false});
+        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+            setIsKeyboardShown(false);
         });
-    }
 
-    componentWillUnmount() {
-        this.keyboardDidShowListener.remove();
-        this.keyboardDidHideListener.remove();
-    }
+        return () => {
+            keyboardDidShowListener.remove();
+            keyboardDidHideListener.remove();
+        };
+    }, []);
 
-    render() {
-        return <KeyboardStateContext.Provider value={this.state}>{this.props.children}</KeyboardStateContext.Provider>;
-    }
+    return <KeyboardStateContext.Provider value={{isKeyboardShown}}>{children}</KeyboardStateContext.Provider>;
 }
 
 KeyboardStateProvider.propTypes = keyboardStateProviderPropTypes;