Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-native: How to control what keyboard pushes up

Tags:

react-native

The structure of the app is fairly simple: A searchbar, a listview and react-native-tabs at the bottom. The problem: If I click on the searchbar on Android it pushes the whole app up, so I see the tabs directly over the keyboard. But on iOS the keyboard overlays the whole app, without pushing anything up. Is there any way to control that?
I'm happy to share code / screenshots if the question isn't clear.
Thanks

edit:

<View style={{flex:1, backgroundColor:'#f2f2f2'}}>     <ListView         dataSource={this.state.dataSource}         renderRow={this.renderSearchResults.bind(this)}         style={styles.listView}/>     <KeyboardAvoidingView         style={styles.addQuestionBar}         behavior={'position'}>         <Text>             Don't see your question?         </Text>         <TouchableOpacity>             <Text>                 Add it             </Text>         </TouchableOpacity>     </KeyboardAvoidingView> </View> 
like image 259
dv3 Avatar asked Sep 06 '16 08:09

dv3


People also ask

How do you control what keyboard pushes up React Native?

Use android:windowSoftInputMode="adjustResize". KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest. xml . Instead, you should use "adjustResize" and have a wonderful life.

What is keyboard avoiding View React Native?

It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.


1 Answers

Set android:windowSoftInputMode="adjustPan" in your manifest file, and it will work as you expect.

E.g.

<application   android:name=".MainApplication"   android:allowBackup="true"   ...   <activity     android:name=".MainActivity"     android:label="@string/app_name"     ...     android:windowSoftInputMode="adjustPan">     ...   </activity>   ... </application> 
like image 134
Jeph Avatar answered Nov 19 '22 23:11

Jeph