CODEWITHSUNDEEP
reactjsreact-nativereact-native-router-flux
Anang Ma'ruf
Anang Ma'ruf

Reputation: 195

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

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>
        );
    }
}

Upvotes: 11

Views: 21037

Answers (4)

Daniel Delgado
Daniel Delgado

Reputation: 5333

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

Upvotes: 0

Sushil
Sushil

Reputation: 2490

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.

Upvotes: 14

kalyani_jamunkar
kalyani_jamunkar

Reputation: 620

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",

Upvotes: 1

Debojyoti Chatterjee
Debojyoti Chatterjee

Reputation: 388

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.

Upvotes: 3

Related Questions