From 83e655b9a252cf623b2f5c094212375723457285 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Thu, 27 Aug 2020 09:48:16 -0700 Subject: [TMA-132] App Splash Screen (#38) * Add splash screen to onboarding stack * Fix improper wizard behavior * Set search bar autoCapitalize to none * Add splash screen fade transition * Update stack navigator screenOptions --- src/components/onboarding/RegistrationWizard.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) (limited to 'src/components/onboarding') diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx index 31c3bbdf..0094c8af 100644 --- a/src/components/onboarding/RegistrationWizard.tsx +++ b/src/components/onboarding/RegistrationWizard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import {View, StyleSheet, ViewProps, Keyboard} from 'react-native'; import * as Animatable from 'react-native-animatable'; @@ -13,12 +13,17 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { // detects visibility of keyboard to display or hide wizard const [keyboardVisible, setKeyboardVisible] = React.useState(false); - Keyboard.addListener('keyboardDidShow', () => { - setKeyboardVisible(true); - }); - Keyboard.addListener('keyboardDidHide', () => { - setKeyboardVisible(false); - }); + useEffect(() => { + const showKeyboard = () => setKeyboardVisible(true); + Keyboard.addListener('keyboardWillShow', showKeyboard); + return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); + }, []); + + useEffect(() => { + const hideKeyboard = () => setKeyboardVisible(false); + Keyboard.addListener('keyboardWillHide', hideKeyboard); + return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard); + }, []); return ( -- cgit v1.2.3-70-g09d2