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

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')}
/>

first screen shot

second screen shot


Solution 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'