Guide for bringing in a complete npm library into React Native beyond just a single file access

Currently, I am facing an issue with importing the sjcl library into my project. Even though there are multiple files within the library, I am only able to import one file successfully.

This is what I have tried from the command line:

npm install sjcl --save
react-native link

Within a React Native JavaScript file:

import sjcl from 'sjcl';

It seems like this method only imports the sjcl.js file from the node package, rather than all the files included in it. I specifically need to import sha1.js from node_modules/sjcl/core/sha1.js. Despite trying different approaches, I have been unsuccessful in importing it successfully.

Is there a way to import an entire npm library into a React Native project effectively?

javascriptnpmreact-native

Answer №1

Encountering a similar issue while attempting to load the ECC module, I came up with a workaround solution by installing sjcl using npm. To implement this workaround, create a file called LocalExports.js and include the following code:

import sjcl from 'sjcl';
export {default as sjcl} from 'sjcl';
window.sjcl = sjcl;

Then, you can import it in any other file like so:

import {sjcl} from './LocalExports';
import 'sjcl/core/bn'; 
import 'sjcl/core/ecc';

*Edit - Additionally, I stumbled upon this official resource that outlines the recommended approach: https://github.com/bitwiseshiftleft/sjcl/wiki/Getting-Started

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason that a basic click function fails to locate the selector?

I have created a quick JavaScript module that opens an image and fades out a container to reveal the image. The HTML markup for the image looks like this: <div style="margin-bottom:1px;" class="rsNavItem rsThumb front"> <di ...

javascriptjqueryonclickjquery-events

Acquiring information from a different Vue.js component

I am faced with a puzzle involving 2 components, A and B. Component A: import B from '../components/B.vue'; export default { components: { B }, methods: { test: function() { console.log(B.data().settin ...

javascriptvue.js

Edit the settings for the dual-axis line chart's parameters

After countless hours of scouring the Internet and numerous attempts, I have come to the decision to seek help by posting my issue on this forum. I must confess, I am not the best developer. My approach usually involves finding pre-existing code that I ca ...

javascriptchartsgoogle-apps-scriptgoogle-sheets

What is the best way to determine if a checkbox has been selected in ExtJS?

I have a panel with a checkbox inside it. I am trying to figure out how to check if the checkbox is selected or not using an external function. Can someone please assist me with this? this.currentManagerPanel = new Ext.Panel({ border: false, wid ...

javascriptextjsextjs3

Implementing SweetAlert2 in Vue.js to create a modal prompt for confirmation prior to deleting an item

I'm encountering an issue with sweetalert2 while using Laravel Vue for my app development. My goal is to have a confirmation modal pop-up when deleting a row from the database. However, whenever I click "Yes", the item is successfully removed. But if ...

javascriptvue.jssweetalert

Direction of Scrolling

Is it possible to have a div move in the opposite direction of mouse scroll, from the top right corner to the bottom left corner? Currently, it is moving from the bottom left to the top right. #block { position: absolute; top: 400px; left: 100px; < ...

javascriptscrollscrolltop

Vue.js2 - Detection of Observer in Array

A question for beginners in vue.js. I am trying to display data using the CanvasJS Library that is received via websocket. Everything works fine with the data until I introduce vue components into the mix. Let me clarify: export default { data() { r ...

javascriptvue.jsvuejs2

Using ExtJS to populate a panel with data from various sources

I am currently working with an Ext.grid.GridPanel that is connected to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specifications. Out of the 10 columns in my grid, 9 are being populated by the json store without any issues. However, I ...

javascriptjsonajaxextjs

Generate a random number to select a song file in Javascript: (Math.floor(Math.random() * songs) + 1) + '.mp3'

My current JavaScript code selects a random song from the assets/music folder and plays it: audio.src = path + 'assets/music/'+(Math.floor(Math.random() * songs) + 1)+'.mp3' However, I've noticed that sometimes the same trac ...

javascript

AngularJS: updating a module

I recently started learning AngularJS and I need some guidance on how to refresh the data in a table within a module (specifically, a list of names and post codes). Below is the script where I am trying to reload the JSON file upon clicking a button: < ...

javascriptangularjs

How can I retrieve the value from the input field using vue.js?

I am currently utilizing the vue-js-toggle-button library. While I understand that I can access the value inside the name using $refs, the issue arises as I have 3 toggle buttons and cannot set a Ref because I want to retrieve the name value dynamically i ...

javascriptvue.js

What causes Vue to only update once when there are two closely timed mutations to reactive data?

Can you take a look at this simple example? export default { data() { return { name: "Amy", age: 18, }; }, computed: { combinedDataForWatching() { return { name: this.name, age: this.age, ...

javascriptvue.jsvuejs2vue-componentvue-reactivity

The JavaScript variable assigned from the MySQL query through an Express API is returning as undefined, indicating that the promise is not resolving to

Hey there, I'm trying to assign the result of a MYSQL query to a JS variable so that I can use it multiple times. However, whenever I try to do this, I end up receiving an empty array. Can anyone point out what might be causing this issue in my code? ...

javascriptexpress

In pursuit of increased speed

When using $routeProvider in Angular, I have noticed that every time I navigate to a specific route, I see the following logs in the console: XHR finished loading: "http://localhost:8080/root/partials/view1.html". XHR finished loading: "http://localhost:8 ...

javascripthttpangularjs

Enhance the functionality of a form by dynamically adding or deleting input rows using

The feature for adding and deleting input rows dynamically seems to be experiencing some issues. While the rows are successfully created using the add function, they are not being deleted properly. It appears that the delete function call is not function ...

javascriptjquery

JavaScript's multiple inheritance concept

In the realm of JavaScript, there exists a class that seeks to 'inherit' various objects and their methods. var A = function (a,c){}; var N = { properties1: function(){}; }; var M1 = { properties2: function(){}; }; var M2 = { ...

javascript

Error encountered: MongoDB cast exception - nested subdocument

Check out this schema design: var messageSchema = new Schema({ receivers: [User], message: String, owner: { type: Schema.Types.ObjectId, ref: 'User' } }); var userSchema = new Schema({ name: String, photo: String }); var in ...

javascriptmongodbmongoose

Tips for activating the default 500 error page in Next.js

I'm having trouble getting Next.js to display its default 500 error page. While most sources discuss creating a custom error page, the Next.js documentation only briefly references their built-in 500 error page. I want the default page to show up when ...

javascriptnext.js

JavaScript seems to have difficulty correctly parsing objects from JSON

Having trouble populating a Repeat Box with objects from a JSON document. Despite my efforts, it keeps duplicating the first item instead of adding each one individually. Any ideas on what might be causing this issue? Below is the code I am currently usin ...

javascriptjsonsmartface.io

Making an Ajax request to trigger a method within a controller

Here is the code snippet I wrote: $(function () { $("input#Submit1").on('click', function () { $.ajax({ url: 'Home/GetPort', method: 'GET' }); alert("test") ...

javascriptajaxasp.net-mvc