KeyboardAvoidingView in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

KeyboardAvoidingView behavior on iOS

What will happen when the keyboard appears in this React Native code using KeyboardAvoidingView with behavior set to 'padding' on iOS?

React Native

import React from 'react';
import { KeyboardAvoidingView, TextInput, Platform } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}>
      <TextInput placeholder="Type here" style={{marginTop: 600, height: 40, borderColor: 'gray', borderWidth: 1}} />
    </KeyboardAvoidingView>
  );
}

A The keyboard does not appear at all.

B The TextInput stays fixed and is hidden behind the keyboard.

C The entire view shrinks vertically but the TextInput stays in place.

D The TextInput moves up so it is not hidden by the keyboard.

💡 Hint

Think about how 'padding' behavior adjusts the view when the keyboard shows on iOS.

On iOS, KeyboardAvoidingView with behavior 'padding' adds padding to the bottom of the view equal to the keyboard height, moving the TextInput up so it remains visible.

❓ ui_behavior

intermediate

KeyboardAvoidingView behavior on Android

In this React Native code, what is the effect of setting KeyboardAvoidingView behavior to 'height' on Android when the keyboard appears?

React Native

import React from 'react';
import { KeyboardAvoidingView, TextInput, Platform } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'android' ? 'height' : 'padding'} style={{flex: 1}}>
      <TextInput placeholder="Enter text" style={{marginTop: 600, height: 40, borderColor: 'gray', borderWidth: 1}} />
    </KeyboardAvoidingView>
  );
}

A The keyboard covers the TextInput without any adjustment.

B The KeyboardAvoidingView adds padding at the bottom, pushing content up.

C The KeyboardAvoidingView reduces its height by the keyboard height, moving content up.

D The TextInput automatically scrolls into view without layout changes.

💡 Hint

Consider how 'height' behavior changes the container size on Android.

On Android, 'height' behavior reduces the height of KeyboardAvoidingView by the keyboard height, effectively moving content up to avoid being hidden.

❓ lifecycle

advanced

KeyboardAvoidingView and keyboard dismissal

What happens if you wrap your screen in KeyboardAvoidingView but forget to set keyboardVerticalOffset on iOS when you have a fixed header of 80 pixels?

React Native

import React from 'react';
import { KeyboardAvoidingView, TextInput, Platform } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}>
      <TextInput placeholder="Input" style={{marginTop: 600, height: 40, borderColor: 'gray', borderWidth: 1}} />
    </KeyboardAvoidingView>
  );
}

A The TextInput will be hidden behind the fixed header when keyboard appears.

B The TextInput will be correctly positioned above the keyboard and header.

C The keyboard will not appear at all.

D The app will crash due to missing keyboardVerticalOffset.

💡 Hint

Think about how keyboardVerticalOffset adjusts for fixed elements like headers.

Without keyboardVerticalOffset, KeyboardAvoidingView does not account for fixed headers, so the TextInput may be hidden behind the header when the keyboard appears.

📝 Syntax

advanced

Correct usage of KeyboardAvoidingView props

Which of the following KeyboardAvoidingView usages will cause a syntax error?

A <KeyboardAvoidingView behavior=padding style={{flex: 1}}><TextInput /></KeyboardAvoidingView>

B <KeyboardAvoidingView behavior="padding" style={{flex: 1}}><TextInput /></KeyboardAvoidingView>

C <KeyboardAvoidingView behavior={"height"} style={{flex: 1}}><TextInput /></KeyboardAvoidingView>

D <KeyboardAvoidingView behavior={'position'} style={{flex: 1}}><TextInput /></KeyboardAvoidingView>

💡 Hint

Check how string props must be passed in JSX.

In JSX, string props must be quoted. behavior=padding without quotes causes a syntax error.

🔧 Debug

expert

Unexpected KeyboardAvoidingView behavior on Android

You notice that on Android, KeyboardAvoidingView with behavior='padding' does not move the TextInput up when the keyboard appears. What is the most likely cause?

A You forgot to wrap the TextInput inside a ScrollView.

B Android does not support 'padding' behavior for KeyboardAvoidingView, so it has no effect.

C The keyboardVerticalOffset is set too high, pushing content off screen.

D The TextInput is inside a View with fixed height preventing layout changes.

💡 Hint

Check platform support for KeyboardAvoidingView behaviors.

On Android, 'padding' behavior is not supported by KeyboardAvoidingView, so it does not move content up. 'height' or 'position' should be used instead.

Practice

1. What is the main purpose of KeyboardAvoidingView in React Native?

easy

A. To move UI elements so they are not hidden by the keyboard

B. To change the keyboard layout

C. To disable the keyboard

D. To style the keyboard colors

Solution

1. Step 1: Understand the role of KeyboardAvoidingView

   KeyboardAvoidingView adjusts the screen layout when the keyboard appears so inputs stay visible.

2. Step 2: Identify the correct purpose

   It does not change keyboard layout or disable it, only moves UI elements to avoid overlap.

3. Final Answer:

   To move UI elements so they are not hidden by the keyboard -> Option A

4. Quick Check:

   KeyboardAvoidingView purpose = move UI [OK]

Hint: Remember: It moves views, does not change keyboard itself [OK]

Common Mistakes:

• Thinking it changes keyboard style
• Confusing it with keyboard disabling
• Assuming it controls keyboard input

2. Which of the following is the correct way to set the behavior prop for KeyboardAvoidingView on iOS?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall iOS recommended behavior

   On iOS, the common behavior is "padding" to add padding when keyboard appears.

2. Step 2: Match behavior prop value

   "padding" is the correct string to use; "height" and "position" are valid but less common on iOS; "scroll" is invalid.

3. Final Answer:

   <KeyboardAvoidingView behavior="padding"> -> Option D

4. Quick Check:

   iOS behavior = padding [OK]

Hint: Use "padding" for iOS KeyboardAvoidingView behavior [OK]

Common Mistakes:

• Using invalid behavior like "scroll"
• Confusing Android and iOS behavior props
• Omitting quotes around behavior value

3. What will happen when this code runs on Android?

import React from 'react';
import { KeyboardAvoidingView, TextInput, Platform } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
      <TextInput placeholder="Type here" style={{ marginTop: 100, height: 40, borderColor: 'gray', borderWidth: 1 }} />
    </KeyboardAvoidingView>
  );
}

medium

A. The TextInput will be hidden behind the keyboard

B. The TextInput will move up when keyboard appears to stay visible

C. The app will crash due to invalid behavior prop

D. The keyboard will not appear at all

Solution

1. Step 1: Analyze behavior prop for Android

   For Android, behavior is set to "height", which adjusts the view height to avoid keyboard overlap.

2. Step 2: Predict UI behavior

   TextInput will move up as KeyboardAvoidingView adjusts height, keeping input visible.

3. Final Answer:

   The TextInput will move up when keyboard appears to stay visible -> Option B

4. Quick Check:

   Android behavior = height moves input up [OK]

Hint: Check Platform.OS to know behavior effect [OK]

Common Mistakes:

• Assuming behavior prop causes crash
• Thinking keyboard won't appear
• Ignoring platform-specific behavior

4. Identify the error in this code snippet:

import { KeyboardAvoidingView, TextInput } from 'react-native';

export default function App() {
  return (
    <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
      <TextInput placeholder="Enter text" />
    </KeyboardAvoidingView>
  );
}

The keyboard still hides the TextInput on iOS devices.

medium

A. Missing <ScrollView> to enable scrolling when keyboard appears

B. behavior prop should be set to "height" on iOS

C. TextInput needs a fixed height style

D. KeyboardAvoidingView must be wrapped in a View with flex: 0

Solution

1. Step 1: Understand KeyboardAvoidingView limits

   KeyboardAvoidingView alone may not scroll content; without ScrollView, inputs can be hidden if screen is small.

2. Step 2: Identify missing scroll container

   Wrapping content in ScrollView allows scrolling when keyboard appears, preventing hiding.

3. Final Answer:

   Missing <ScrollView> to enable scrolling when keyboard appears -> Option A

4. Quick Check:

   Use ScrollView with KeyboardAvoidingView to avoid hiding [OK]

Hint: Add ScrollView inside KeyboardAvoidingView for scroll [OK]

Common Mistakes:

• Changing behavior prop incorrectly
• Not using flex: 1 on container
• Assuming fixed height fixes keyboard overlap

5. You want to create a form that works well on both iOS and Android. Which is the best way to use KeyboardAvoidingView to handle the keyboard properly?

hard

A. Set behavior to "position" on iOS only and do not use ScrollView

B. Set behavior to "padding" on all platforms and wrap inputs in a ScrollView

C. Set behavior to "height" on Android, "padding" on iOS, and wrap inputs in a ScrollView

D. Do not use KeyboardAvoidingView; rely on default keyboard behavior

Solution

1. Step 1: Choose platform-specific behavior

   Best practice is to use "padding" on iOS and "height" on Android for KeyboardAvoidingView behavior.

2. Step 2: Wrap inputs in ScrollView

   ScrollView allows content to scroll if keyboard covers inputs, improving usability on small screens.

3. Final Answer:

   Set behavior to "height" on Android, "padding" on iOS, and wrap inputs in a ScrollView -> Option C

4. Quick Check:

   Platform behavior + ScrollView = best keyboard handling [OK]

Hint: Use platform check for behavior and add ScrollView [OK]

Common Mistakes:

• Using same behavior for all platforms
• Not wrapping inputs in ScrollView
• Ignoring Android keyboard behavior differences