npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-hamsters

v1.0.10

Published

Worker threads implementation for use within ReactNative & Hamsters.js, allowing you to make use of the multithreading and parallel processing in your ReactNative application.

Downloads

42

Readme

react-native-hamsters

npm version downloads

This project is based on the work of several previous projects, this is a stand alone worker threads implementation for use within ReactNative and with Hamsters.js, allowing you to make full use of the multithreading and parallel processing in your React Native application.

Getting started

npm install hamsters.js --save npm install react-native-hamsters --save

Thread Life Cycle

  • Worker Threads are paused when the app enters in the background
  • Worker Threads are resumed once the app is running in the foreground
  • During development, when you reload the main JS bundle (shake device -> Reload) the Worker Threads are killed

Android

For android you will need to make a slight modification to your MainApplication.java file. In the getPackages method pass in mReactNativeHost to the ReactNativeHamstersPackage constructor:

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new ReactNativeHamstersPackage(mReactNativeHost)  // <-- Here
      );
    }

Also note that only the official react native modules are available from your threads (vibration, fetch, etc...). To include additional native modules in your threads, pass them into the ReactNativeHamstersPackage constructor after the mReactNativeHost like this: new ReactNativeHamstersPackage(mReactNativeHost, new ExampleNativePackage(), new SQLitePackage())

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-hamsters and add react-native-hamsters.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libreact-native-hamsters.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.reactlibrary.ReactNativeHamstersPackage; to the imports at the top of the file
  • Add new ReactNativeHamstersPackage(mReactNativeHost) to the list returned by the getPackages() method
  • Also note that only the official react native modules are available from your threads (vibration, fetch, etc...). To include additional native modules in your threads, pass them into the ReactNativeHamstersPackage constructor after the mReactNativeHost like this: new ReactNativeHamstersPackage(mReactNativeHost, new ExampleNativePackage(), new SQLitePackage())
  1. Append the following lines to android/settings.gradle:

     include ':react-native-hamsters'
     project(':react-native-hamsters').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-hamsters/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

      compile project(':react-native-hamsters')

Windows

Windows support is not yet implemented, [PRs are welcome if you want to give it a shot!(https://github.com/ReactWindows/react-native)

  1. In Visual Studio add the react-native-hamsters.sln in node_modules/react-native-hamsters/windows/react-native-hamsters.sln folder to their solution, reference from their app.
  2. Open up your MainPage.cs app
  • Add using ThreadReactNativeHamsters; to the usings at the top of the file
  • Add new ReactNativeHamstersPackage() to the List<IReactPackage> returned by the Packages method

Usage

To get started head to the ReactNative section of the Hamsters.js Wiki

Debugging

Instantiating Worker Threads creates multiple react native JS processes and can make debugging remotely behave unpredictably. It's recommended to use a third party debugging tool like Reactotron to aid with this. Each process, including your main application as well as your thread code can connect to Reactotron and log debugging messages.

Building for Release

You will need to manually bundle your thread files for use in a production release of your app. This documentation assumes you have a single thread file called reactNativeHamster.js in your project root. If your file is named differently or in a different location, you can update the documented commands accordingly.

Note: If your single thread file is in a different location, the folder structure needs to be replicated under ./ios and ./android/app/src/main/assets/threads.

 ./node_modules/hamsters.js/build/common/reactNativeHamster.js => ./ios/App/reactNativeHamster.bundle

iOS

For iOS you can use the following command:

  node node_modules/react-native/local-cli/cli.js bundle --dev false --assets-dest ./ios --entry-file ./node_modules/hamsters.js/build/common/reactNativeHamster.js --platform ios --bundle-output ./ios/App/reactNativeHamster.bundle

Once you have generated the bundle file in your ios folder, you will also need to add the bundle file to you project in Xcode. In Xcode's file explorer you should see a folder with the same name as your app, containing a main.bundle file as well as an appDelegate.m file. Right click on that folder and select the 'Add Files to ' option, which will open up finder and allow you to select your ios/reactNativeHamster.bundle file. You will only need to do this once, and the file will be included in all future builds.

Android

For Android first copy reactNativeHamster.js from Hamsters.js /build/common/reactNativeHamster.js into the react native project root.

And then you can use the following command:

  rm -rf /tmp/metro-*
  react-native bundle --platform android --dev false --entry-file reactNativeHamster.js --bundle-output android/app/src/main/assets/reactNativeHamster.bundle --assets-dest android/app/src/main/res

For convenience I recommend adding these thread building commands as npm scripts to your project.

Example App

Included in this repository is a simple example application demonstrating basic usage of react-native-hamsters with Hamsters.js

Support Hamsters.js

Hamsters.js is a self funded project, in order to provide updates and host the project website I rely on donations. Please consider donating today so I can continue to support this project, thank you. Hamsters.js donation page