Endless loop caused by state react-native

user_12593376 0
Viewed 124

I am trying to show/hide a component based on whether or not the keyboard is open. I am struggling to understand why i end up with a never ending loop. Here's my code:

    const [isKeyboardOpen, setIsKeyboardOpen] = useState(true);

    useEffect(() => {
        Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
        Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

        // cleanup function
        return () => {
            console.log('cleanup')
            Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
            Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
        };
    }, []);


    const _keyboardDidShow = () => {
        console.log('opened')
        setIsKeyboardOpen(true);
    };

    const _keyboardDidHide = () => {
        console.log('closed')
        setIsKeyboardOpen(false);

    };

Please help.

react-native-ios react-native react-hooks reactjs javascript
1 Answers

I hope this solves your problem

const [isKeyboardOpen, setIsKeyboardOpen] = useState(true);

useEffect(() => {
    Keyboard.addListener("keyboardDidShow", () =>_keyboardDidShow());
    Keyboard.addListener("keyboardDidHide", () =>_keyboardDidHide());

    // cleanup function
    return () => {
        console.log('cleanup')
        Keyboard.removeListener("keyboardDidShow",() => _keyboardDidShow());
        Keyboard.removeListener("keyboardDidHide", () =>_keyboardDidHide());
    };
}, []);


const _keyboardDidShow = () => {
    console.log('opened')
    setIsKeyboardOpen(true);
};

const _keyboardDidHide = () => {
    console.log('closed')
    setIsKeyboardOpen(false);

};
user_115024580
Related