Question 282152 in React native Question posted in
The official React Native documentation can be found here.

How to use an npm package installed with an alias in React Native

I have a React Native app that I need to implement external keyboard navigation support for. I’m trying to install a third party package react-native-a11y to help with this. However, I already have a local package titled react-native-a11y that would be a significant amount of work to rename/reconfigure, so I’m attempting to import the new package with an alias react-native-a11y-helper.

I have something like the following in my package.json:

 "react-native-a11y-alias": "npm:[email protected]",

And after pnpm install, the package is showing up in node_modules with the desired alias as the package name. Then in my code I import a component from the package with no issues at build time:

import { KeyboardFocusView } from 'react-native-a11y-alias';

But the metro bundler throws the following error when I run the app on my Android device:

error: Error: Unable to resolve module react-native-a11y-helper from <file>.tsx: react-native-a11y-helper could not be found within the project or in these directories:
  node_modules
  ../node_modules

I’ve also tried importing with require, but no luck.

How can I use this package properly in RN?

Tags:

2

Answers


  1. 0

    As the document of react-native-a11y:

    This library is not finished yer and currently on beta stage.

    So you need to follow the install guild carefully:

    1. npm i react-native-a11y
    2. cd ios && pod install
    3. Add to the MainActivity.java:
      //android/app/src/main/java/com/project-name/MainActivity.java

  ...
  import android.content.Intent;
  import android.content.res.Configuration;
  ...
  
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    this.sendBroadcast(intent);
  }
    1. iOS only Link keyboard(Game) binary with libraries:
    • Open xcode
    • Select folder in the project bar
    • Select target project
    • Select Build Phases
    • Expand Link Binary With Libraries
    • Press plus icon
    • You can search for Game
    • Select GameController.framework, GameKit.framework, GameplayKit.framework
    1. Add provider to root of your app:
    watch: examples/A11ySample/App.tsx

export const App = () => {
  return (
    <A11yProvider>
        // content here
    </A11yProvider>
  );
};
    Login or Signup to reply.
  2. 0

    There should not be a situation where there are several identical packages in a project. Recommendation, remove the package that is already installed and install it again (latest version) and make configurations for all cases that are needed. What is the difficulty to leave only one package and work with it?

    This package is on GitHub with the necessary instructions, https://github.com/ArturKalach/react-native-a11y

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search