KeyboardAvoidingView does not work well with ScrollView's keyboardDismissMode set to interactive

[bjornlll]

Components used:

• ScrollView with keyboardDismissMode set to interactive
• InputAccessoryView for the sticky toolbar on top of the keyboard
• KeyboardAvoidingView wrapped around the ScrollView, behavior set to position

Expected: As I scroll to gradually dismiss the keyboard, the KeyboardAvoidingView gradually adjusts the position of ScrollView. See WhatsApp or Telegram for proper implementation of what I'm trying to achieve.

What really happens: KeyboardAvoidingView does not gradually update the position of ScrollView. Instead, you get one position when we've half-dismissed the keyboard resulting in a rather unsmooth user experience.

This issue has previously been covered #13073 but the issue was closed since, for the author's purpose, his problem had been solved. The root cause - this - however, is not solved.

Telegram's implementation (what I want to achieve)

[bjornlll]

It seems, if I understand this correctly, that the reason it's difficult to build a KeyboardAvoidingView that reacts to changes in height of the keyboard's position is that the events triggered by Keyboard do not provide granular enough feedback (see here).

Specifically, if these two events had provided updates when the keyboard is drag-closed, it wouldn't be too complicated to implement:

• keyboardWillChangeFrame
• keyboardDidChangeFrame

Had these two events fired whenever the height of the keyboard changes it'd been easily doable.

[mrousavy]

see #31402

[bjornlll]

see #31402

That's amazing @mrousavy! Thanks. I'll put that to use straight away.

[johnpawl]

I want to get back to android activity from react-native activity using backkey .

MainActivity.java

public class MainActivity extends AppCompatActivity {

Button button;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startRNPage();
        }
    });
}

private void startRNPage() {
    Intent intent = new Intent(this, ReactNativeActivity.class);
    startActivity(intent);
    finish();
}
}

ReactNativeActivity.java

public class ReactNativeActivity extends AppCompatActivity {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    SoLoader.init(this, false);

    mReactRootView = new ReactRootView(this);
    List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    // Remember to include them in `settings.gradle` and `app/build.gradle` too.

    

    mReactInstanceManager = ReactInstanceManager.builder()
    .setApplication(getApplication())
    .setCurrentActivity(this)
    .setBundleAssetName("index.android.bundle")
    .setJSMainModulePath("index")
    .addPackages(packages)
    .setUseDeveloperSupport(BuildConfig.DEBUG)
    .setInitialLifecycleState(LifecycleState.RESUMED)
    .build();
    // The string here (e.g. "MyReactNativeApp") has to match
    // the string in AppRegistry.registerComponent() in index.js
    mReactRootView.startReactApplication(mReactInstanceManager, "firstpro", null);

    setContentView(mReactRootView);
    }
@Override
public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
      super.onBackPressed();
    }
}
}

I also tried the following code in ReactNativeActivity.java

public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
    }
}

If I pressed the back button it didn't get back to android activity.

How can I get back to android activity from react-native activity using backkey?