Make the textinput visible when the keyboard is shown to take notes. #30
Conversation
| function onKeyboardDidShow(e: KeyboardEvent) { | ||
| const availableWindowHeight = | ||
| Dimensions.get('window').height - e.endCoordinates.height; | ||
| if (availableWindowHeight > DEFAULT_AVAILABLE_WINDOW_HEIGHT_THRESHOLD) { | ||
| setTextVoiceInputBottom(0); | ||
| } | ||
| } | ||
|
|
||
| function onKeyboardDidHide() { | ||
| const availableWindowHeight = Dimensions.get('window').height; | ||
| setTextVoiceInputBottom(DEFAULT_TEXT_VOICE_INPUT_BOTTOM); | ||
| } |
There was a problem hiding this comment.
These two functions should be defined with useCallback so their identity doesn't change from render to render, and they should be listed as dependencies of the useEffect on line 105. Even though this should work fine without doing that, it's very easy to unintentionally introduce bugs the way this is currently written:
If these stay as fresh function declarations on every render but they're not listed in the dependency array of the useEffect on line 105, then the useEffect call might be using stale versions of the functions.
If you add the function names to the dependency array but don't use useCallback then you'll be causing the effect to run after every render, which is not ideal from a performance perspective.
There was a problem hiding this comment.
| function onKeyboardDidShow(e: KeyboardEvent) { | |
| const availableWindowHeight = | |
| Dimensions.get('window').height - e.endCoordinates.height; | |
| if (availableWindowHeight > DEFAULT_AVAILABLE_WINDOW_HEIGHT_THRESHOLD) { | |
| setTextVoiceInputBottom(0); | |
| } | |
| } | |
| function onKeyboardDidHide() { | |
| const availableWindowHeight = Dimensions.get('window').height; | |
| setTextVoiceInputBottom(DEFAULT_TEXT_VOICE_INPUT_BOTTOM); | |
| } | |
| const onKeyboardDidShow = useCallback((e: KeyboardEvent) => { | |
| const availableWindowHeight = | |
| Dimensions.get('window').height - e.endCoordinates.height; | |
| if (availableWindowHeight > DEFAULT_AVAILABLE_WINDOW_HEIGHT_THRESHOLD) { | |
| setTextVoiceInputBottom(0); | |
| } | |
| }, []); | |
| const onKeyboardDidHide = useCallback(() => { | |
| const availableWindowHeight = Dimensions.get('window').height; | |
| setTextVoiceInputBottom(DEFAULT_TEXT_VOICE_INPUT_BOTTOM); | |
| }, []); |
| showSubscription.remove(); | ||
| hideSubscription.remove(); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
| }, []); | |
| }, [onKeyboardDidHide, onKeyboardDidShow]); |
| @@ -48,11 +54,15 @@ export default function ImageCaptureLessonScreen({ | |||
|
|
|||
| const [imageCaptured, setImageCaptured] = useState<Boolean>(false); | |||
| const [showNavigation, setShowNavigation] = useState<boolean>(true); | |||
| const [showChatBubble, setShowChatBubble] = useState<boolean>(false); | |||
There was a problem hiding this comment.
nit: this area can show multiple bubbles, so showChats or showChatArea would be a little clearer
…nd address comments.
The behavior is different for ios and android for the keyboard avoiding view with the LessonPrimaryLayout. This change takes into consideration the available window height to adjust the position of the textinput closer to the keyboard.