React Native : Subviews of KeyboardAvoidingView have lag / move at different speeds

Solution 1: Quick fix for iOS

You can wrap your elements in a View, which will make them react to keyboard the way you want:

// styles
contentContainer: {
    alignItems: 'center',
}

// SearchScreen
<View style={styles.contentContainer}>
    <Text style={styles.searchTitle}>Search for a Movie in the OMDB Database</Text>
    <TextInput style={styles.searchField} onChangeText={text => this.setState({search:text})} ></TextInput>
    <SearchButton navigation = {this.props.navigation} getArguments={getArguments}/>
</View>

However, this will only work on iOS. Keyboard works slightly differently on Android. So solution 2 is a more solid way to do things.

Solution 2: Animations

Keyboard avoidance is quite tricky, Spencer Carli's article that Dominik referred to is a great resource for solutions using KeyboardAvoidingView. Those usually give you what you need. But if you want a smooth, controlled transition between keyboard states, you should use animations. The flow would go like this:

1. Add Keyboard event listeners to your component (keyboardDidShow and keyboardDidHide)
2. Wrap the content you want to move in an Animated.View
3. on keyboardDidShow, animate the y position of the Animated.View by the offset you want. The event returned (of type KeyboardEvent), along with the Dimensions API have all the measurements you need. Tip: use an Animated.timing animation with bezier Easing to control how the view moves.
4. on keyboardDidHide, repeat the animation but in the opposite direction.

Hope this helps!