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.