React-native-tab-view: `currentlyFocusedField` is deprecated (RN 0.63, Pager.js)

Created on 9 Jul 2020  路  6Comments  路  Source: satya164/react-native-tab-view

Current behaviour

Pager.js is using currentlyFocusedField to blur focused inputs on swipe.

Expected behaviour

Pager.js should be calling currentlyFocusedInput instead, as per RN 0.63 changes.

Code sample

      if (isSwiping === TRUE) {
        onSwipeStart === null || onSwipeStart === void 0 ? void 0 : onSwipeStart();
        this.interactionHandle = InteractionManager.createInteractionHandle();

        if (keyboardDismissMode === 'auto') {
         // Here's the problem v
          const input = TextInput.State.currentlyFocusedField(); // When a gesture begins, blur the currently focused input

          TextInput.State.blurTextInput(input); // Store the id of this input so we can refocus it if gesture was cancelled

          this.previouslyFocusedTextInput = input;
        } else if (keyboardDismissMode === 'on-drag') {
          Keyboard.dismiss();
        }
      } else {
        onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd();

        if (this.interactionHandle !== null) {
          InteractionManager.clearInteractionHandle(this.interactionHandle);
        }

        if (keyboardDismissMode === 'auto') {
          if (indexAtSwipeEnd === currentIndex) {
            // The index didn't change, we should restore the focus of text input
            const input = this.previouslyFocusedTextInput;

            if (input) {
              TextInput.State.focusTextInput(input);
            }
          }

          this.previouslyFocusedTextInput = null;
        }
      }

Screenshots (if applicable)

Simulator Screen Shot - iPhone 11 - 2020-07-09 at 15 12 00

What have you tried

Posting this bug report

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | 13.4
| react-native | 0.63
| react-native-tab-view | 2.14.4
| react-native-gesture-handler | 1.6.1
| react-native-reanimated | 1.8.0
| node | 10.16.3
| npm or yarn | 6.14.5

bug

Most helpful comment

The issue is solved in #1010 but it's not released yet. If you need to remove the error, while waiting for the official release, you can install the component passing directly the Git URL (i.e. yarn add https://github.com/react-native-community/react-native-tab-view.git) in order to obtain the updated version. When it'll be released, I suggest you to reinstall the component using the released (more stable) version.

All 6 comments

Couldn't find version numbers for the following packages in the issue:

  • ``

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native-reanimated (found: 1.8.0, latest: 1.9.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

WhatsApp Image 2020-07-09 at 7 00 00 PM

I am also facing the same issue after upgrading to the latest version of the react-native.

This error is coming only on swiping between tabs.

    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.6.1",
    "@react-navigation/material-top-tabs": "^5.2.12",
    "@react-navigation/native": "^5.6.1",
    "@react-navigation/stack": "^5.6.2",
    "@twotalltotems/react-native-otp-input": "^1.3.7",
    "axios": "^0.19.2",
    "formik": "^2.1.4",
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-keyboard-aware-scrollview": "^2.1.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.7",
    "react-native-screens": "^2.9.0",
    "react-native-svg": "^12.1.0",
    "react-native-tab-view": "^2.14.4",
    "react-native-vector-icons": "^7.0.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "yup": "^0.29.1"

Same Issue!

The issue is solved in #1010 but it's not released yet. If you need to remove the error, while waiting for the official release, you can install the component passing directly the Git URL (i.e. yarn add https://github.com/react-native-community/react-native-tab-view.git) in order to obtain the updated version. When it'll be released, I suggest you to reinstall the component using the released (more stable) version.

Fix is released with v2.15.0, btw. Thanks!

Fixed indeed, cheers :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

glennvgastel picture glennvgastel  路  3Comments

nastarfan picture nastarfan  路  3Comments

jasonkw9 picture jasonkw9  路  3Comments

moerabaya picture moerabaya  路  4Comments

t3chnoboy picture t3chnoboy  路  3Comments