Merge pull request #1018 from synonymdev/fix/keyboard-back

fix(ui): improve useKeyboard hook

Author: pwltr

src/hooks/keyboard.ts

@@ -9,10 +9,16 @@ const useKeyboard = (): {
 	const [keyboardHeight, setKeyboardHeight] = useState(0);
 
 	useEffect(() => {
+		const keyboardWillShowListener = RNKeyboard.addListener(
+			// ios has keyboardWillShow, android doesn't
+			Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+			() => {
+				setKeyboardShown(true);
+			},
+		);
 		const keyboardDidShowListener = RNKeyboard.addListener(
 			'keyboardDidShow',
 			(event: KeyboardEvent) => {
-				setKeyboardShown(true);
 				setKeyboardHeight(event.endCoordinates.height);
 			},
 		);
@@ -26,8 +32,9 @@ const useKeyboard = (): {
 		);
 
 		return () => {
-			keyboardDidHideListener.remove();
+			keyboardWillShowListener.remove();
 			keyboardDidShowListener.remove();
+			keyboardDidHideListener.remove();
 		};
 	}, []);
 

src/screens/Wallets/Receive/ReceiveDetails.tsx

@@ -47,7 +47,6 @@ const ReceiveDetails = ({
 	const { t } = useTranslation('wallet');
 	const { keyboardShown } = useKeyboard();
 	const { isSmallScreen } = useScreenSize();
-	const [isInputFocused, setIsInputFocused] = useState(false);
 	const [showNumberPad, setShowNumberPad] = useState(false);
 	const invoice = useSelector(receiveSelector);
 	const unit = useSelector(balanceUnitSelector);
@@ -117,16 +116,14 @@ const ReceiveDetails = ({
 									blurOnSubmit={true}
 									returnKeyType="done"
 									testID="ReceiveNote"
-									onFocus={(): void => setIsInputFocused(true)}
-									onBlur={(): void => setIsInputFocused(false)}
 									onChangeText={(txt): void => {
 										updateInvoice({ message: txt });
 									}}
 								/>
 							</View>
 						</View>
 
-						{!keyboardShown && !isInputFocused && (
+						{!keyboardShown && (
 							<AnimatedView
 								style={styles.bottom}
 								color="transparent"

src/screens/Wallets/Send/Recipient.tsx

@@ -54,7 +54,6 @@ const Recipient = ({
 	const lightningBalance = useLightningBalance(false);
 	const [decodedInvoice, setDecodedInvoice] = useState<TInvoice>();
 	const [handledOsPaste, setHandledOsPaste] = useState(false);
-	const [showImage, setShowImage] = useState(true);
 	const selectedWallet = useSelector(selectedWalletSelector);
 	const selectedNetwork = useSelector(selectedNetworkSelector);
 	const transaction = useSelector(transactionSelector);
@@ -157,14 +156,6 @@ const Recipient = ({
 		selectedWallet,
 	]);
 
-	useEffect(() => {
-		if (keyboardShown) {
-			setShowImage(false);
-		} else {
-			setShowImage(true);
-		}
-	}, [keyboardShown]);
-
 	const handleScan = (): void => {
 		navigation.navigate('Scanner');
 	};
@@ -217,13 +208,7 @@ const Recipient = ({
 		[index, value, selectedNetwork, selectedWallet, sdk, t],
 	);
 
-	const onFocus = useCallback((): void => {
-		setShowImage(false);
-	}, []);
-
 	const onBlur = useCallback(async (): Promise<void> => {
-		setShowImage(true);
-
 		//An OS Paste was triggered. No need to process onBlur data.
 		if (handledOsPaste) {
 			return;
@@ -326,11 +311,10 @@ const Recipient = ({
 				</Caption13Up>
 
 				<AddressOrSlashpay
-					style={[styles.input, !showImage && styles.inputKeyboard]}
+					style={[styles.input, keyboardShown && styles.inputKeyboard]}
 					value={transaction.lightningInvoice || address}
 					slashTagsUrl={transaction.slashTagsUrl}
 					onChangeText={onChangeText}
-					onFocus={onFocus}
 					onBlur={onBlur}
 					testID="AddressOrSlashpay">
 					<IconButton style={styles.inputAction} onPress={handleScan}>
@@ -348,8 +332,8 @@ const Recipient = ({
 					</IconButton>
 				</AddressOrSlashpay>
 
-				<View style={[styles.bottom, !showImage && styles.bottomKeyboard]}>
-					{!keyboardShown && showImage && (
+				<View style={[styles.bottom, keyboardShown && styles.bottomKeyboard]}>
+					{!keyboardShown && (
 						<AnimatedView
 							style={styles.image}
 							color="transparent"