11

I use react native, and react-native-router-flux for navigation

when I want to move screen, an error appears "currentlyFocusedField is deprecated and will be removed in a future release. Use currentlyFocusedInput"

but the screen still moved with the error

how do i fix it

this is my router

    import 'react-native-gesture-handler';

import React, { Component } from 'react';
import {
    Router,
    Scene,
    Stack,
} from 'react-native-router-flux';

import Loading from '../screens/Loading';
import Welcome from '../screens/Welcome';
import Register from '../screens/Auth/Register';

export default class RouterLinked extends Component {
    render() {
        return (
            <Router>
                <Stack key="root" type="replace">
                    <Scene key="Welcome" component={Welcome} initial={true} hideNavBar={true}/>
                    <Scene key="Register" component={Register} title="Register" />
                    <Scene key="Loading" component={Loading} />
                </Stack>
            </Router>
        );
    }
}

and this is my home page

import React, { Component } from 'react';
import { View, Button, Text } from 'react-native';

import { Actions } from 'react-native-router-flux';

export default class Welcome extends Component {
    render() {

        return(
            <View>
                <Text>Welcome</Text>
                <Button 
                    title="Click"
                    onPress={() => Actions.push('Register')}
                />
            </View>
        );
    }
}
Anang Ma'ruf
  • 185
  • 1
  • 3
  • 8

4 Answers4

14

I have the same issue. I fixed this issue by the following steps.

  1. First find this file form the @react-navigation package form the node_modules folder.

enter image description here

  1. Replace all currentlyFocusedField() with currentlyFocusedInput().

  2. Reload your application.

That's all. Thanks.

Sushil
  • 2,324
  • 1
  • 27
  • 26
  • 4
    So yes this fixes it, but you generally don't want to make changes within `node_modules`. This shouldn't be committed, and any reinstall of modules will undo this change. – mrmicrowaveoven Feb 04 '21 at 19:31
  • 1
    @mrmicrowaveoven as a workaround you can use `patch-package` to update node_modules when you install a library. https://www.npmjs.com/package/patch-package. Of course this is just a temp fix. – Erick Maeda Jun 16 '21 at 20:40
  • Do note this depends on your react-navigation version. In very old versions (2.x.x) you will find it in react-navigation/src/navigators/createKeyboardAwareNavigator – Dror Bar Dec 05 '21 at 15:57
3

This is a issue related to react-navigation package

The fix might just require find & replace all instances of currentlyFocusedField with currentlyFocusedInput

Probably this was fixed through this commit: Github commit although I still get the error at my end.

Debojyoti Chatterjee
  • 368
  • 2
  • 7
1

i added following plugin and fixed it.

  "@react-navigation/core": "^5.13.1",
    "@react-navigation/native": "^5.8.1",
    "@react-navigation/stack": "^5.11.0",
kalyani_jamunkar
  • 582
  • 1
  • 13
  • 33
0

We can use patch-package to update node_modules/@react-navigation/native

  1. Edit "node_modules/@react-navigation/native/src/createKeyboardAwareNavigator.js":

    Find matches for this code: TextInput.State.currentlyFocusedField();

    And replace for this: TextInput.State.currentlyFocusedInput ? TextInput.State.currentlyFocusedInput() : TextInput.State.currentlyFocusedField();

  2. Run npx patch-package

  3. Run npm i patch-package

  4. Add to your package.json scripts:

"scripts": {
  "postinstall": "patch-package"
 }

Consider discarding this patch after upgrading to react-navigation@4.4.1 https://github.com/react-navigation/react-navigation/issues/8457#issuecomment-698464510

Daniel Delgado
  • 4,813
  • 5
  • 40
  • 48