Textinput breaks view layout in React Native. How to fix it?

Question

Textinput breaks view layout. first ss all views normaly work but I click texinput breaks example in second ss we see textinput under the logo. How to fix it ?

<TextInput
  value={values.username}
  style={styles.input}
  placeholder='Adınızı Giriniz..'
  onChangeText={handleChange('username')}
/>

Answer 1

Ideally, you can use

<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={-200}>
<ScrollView>
YOUR UI HERE
</ScrollView>
<KeyboardAvoidingView>

Play with keyboardVerticalOffset so you can get the desired behavior. As this value differs in android and iOS so consider Platform.OS === 'ios'