Full page not getting scrolled react-native

Question

I am using Wix react-native-navigation V2 I have changed android:windowSoftInputMode to "adjustPan" because the tabs were coming above the keyboard, but now in my one of the form I have contact form now I want to scroll whole from above the keyboard without showing tabs above the keyboard what should I do.

below is my AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.newnavigation">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustPan">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Please help if anyone have an idea about it. Thanks in advance

score 2 · Answer 1 · answered Jan 22 '19 at 11:25

2

Actually, I guess your problem is not related to the Android or iOS native side. Also, it is not related to what library you used for implementing UI. You should set react-native style to the component that used it. Please pay attention to the below codes:

import { SomeComponent } from 'anywhere';
import { StyleSheet } from 'react-native';
...
<SomeComponent style={styles.container}>
...
const styles = StyleSheet.create({
  container: {
    minHeight: '100%'
  }
});

Buddy, believe me, if SomeComponent is ScrollView or anything else with any property, it surely will be getting the scroll.

Honestly, I had this issue and I found out the problem is for my styling and nothing else.

answered Jan 22 '19 at 11:25

thanks, but i have checked all styling. Due to adjustPan the screen ignoring keyboard it is a problem – Ahtesham Shah Jan 22 '19 at 11:36
Dear @AhteshamShah, Thank you for attention to my answer. thanks. – Jan 22 '19 at 11:44
@AhteshamShah, I'm at work now. it's my work time. a few hours later I will work on your issue. – Jan 22 '19 at 11:54

score 0 · Accepted Answer · answered Jan 22 '19 at 12:19

Thanks @Mehrdad88sh I have solved it by using KeyboardAvoidingView

import { KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... your UI ...
</KeyboardAvoidingView>

for more details see given link https://facebook.github.io/react-native/docs/keyboardavoidingview

Full page not getting scrolled react-native

2 Answers2