how to fix currentlyFocusedField is deprecated and will be removed in a future release. Use currentlyFocusedInput
Asked Answered
T

4

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>
        );
    }
}
Tenuous answered 15/7, 2020 at 16:42 Comment(6)
Upgrading your dependencies will probably fix the error.Aggrade
sorry, but it's doesn't worksUnregenerate
What version of react-native-router-flux are you using, could you show your package.json?Aggrade
"dependencies": { "@react-native-community/masked-view": "^0.1.10", "react": "16.13.1", "react-native": "0.63.1", "react-native-gesture-handler": "^1.6.1", "react-native-reanimated": "^1.9.0", "react-native-router-flux": "^4.2.0", "react-native-safe-area-context": "^3.1.1", "react-native-screens": "^2.9.0" },Unregenerate
its my dependenciesUnregenerate
I also face this issue. github.com/react-navigation/react-navigation/pull/8365. Looks like this issue is fixedGnathonic
A
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.

Agrigento answered 6/11, 2020 at 12:34 Comment(3)
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.Hooligan
@Hooligan as a workaround you can use patch-package to update node_modules when you install a library. npmjs.com/package/patch-package. Of course this is just a temp fix.Mandal
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/createKeyboardAwareNavigatorBria
S
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.

Shealy answered 25/7, 2020 at 6:9 Comment(0)
T
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",
Tejeda answered 29/10, 2020 at 11:29 Comment(0)
W
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 [email protected] https://github.com/react-navigation/react-navigation/issues/8457#issuecomment-698464510

Wichman answered 18/1, 2022 at 23:16 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.