Skip to content

Instantly share code, notes, and snippets.

@FanchenBao
Last active January 5, 2021 03:37
Show Gist options
  • Select an option

  • Save FanchenBao/c596e829a2b39129e2a44b8b9511f732 to your computer and use it in GitHub Desktop.

Select an option

Save FanchenBao/c596e829a2b39129e2a44b8b9511f732 to your computer and use it in GitHub Desktop.
This gist accompanies the medium article "Test hooks on 'keyboardDidShow' in React Native Functional Component"
import * as React from 'react';
import {View, Text, Keyboard} from 'react-native';
const MyComponent = () => {
const [showText, setShowText] = React.useState(true);
// Use keyboard event (https://reactnative.dev/docs/keyboard)
React.useEffect(() => {
Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
Keyboard.addListener('keyboardDidHide', _keyboardDidHide);
// cleanup function
return () => {
Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
};
}, []);
const _keyboardDidShow = () => setShowText(false);
const _keyboardDidHide = () => setShowText(true);
if (showText) {
return (
<View>
<Text>Bear, Beets, Battlestar Galactica</Text>
</View>
);
}
return null;
};
export {MyComponent};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment