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 🙏

© 2022 – Pkg Stats / Ryan Hefner

react-native-template-nona

v1.0.0

Published

React Native Template that can be initialised with the react-native CLI tool

Downloads

5

Readme

Nona - React Native Template

Features

Usage

Init the project with the following command:

npx react-native init MyApp --template nona

Read your new projects README.md and docs to get started, and edit if you want to change anything.

The quickest way to run the application:

  • Install Gemfiles from the root with bundle install
  • Run npm run env:development to generate an env file
  • Run npm run start to start your bundler
  • Run npm run ios or npm run android

Splashscreen Customisation

  • This template makes use of 'expo-splash-screen' to show a splashscreen on startup. You can refer to the documentation here for where to change this in your project (it involves opening the project in xCode), making some changes to the Android project.

Android Build Notes

Some changes have been made to the Android build settings via setting certain properties in gradle.properties. At present they are:

org.gradle.daemon=true
org.gradle.configureondemand=true
org.gradle.jvmargs=-Xmx2048M -XX:MaxPermSize=1024m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

Feel free to change them as you see fit.

Husky

This project has husky hooks at .husky. You should follow the guide setting up Husky here. To avoid installing these hooks on ci you can add the following to your scripts.

"prepare": "is-ci || husky install"

CircleCI

The CircleCI config is included as an example of how you might go about setting up the project to build and deploy. Feel free to change it as you see fit. Things to note include:

  • In this config, the keystore files are hosted on an S3 bucket and downloaded at build time. You can see from config.yml that this is at:

echo 'export S3_URL=s3://$ANDROID_KEYSTORE_BUCKET/<< parameters.stage >>/' >> $BASH_ENV

So you would need to define that in your environment, and store the keystore in that bucket for this to work. You can also see that from ptemplate/android/fastlane/Fastfile that it is copying from the region eu-west-1, so if your bucket is in a different region you will have to change that.

Environment variables that you will need set in your project in CircleCI and what they do:

  • GH_TOKEN - A GitHub personal access token, that Semantic release will use to create release commits.
  • ANDROID_KEYSTORE_BUCKET - bucket name that houses your Android keystore files
  • ANDROID_KEYSTORE_PASSWORD - Android Keystore Password
  • AWS_ACCESS_KEY_ID - AWS access key
  • AWS_SECRET_ACCESS_KEY - AWS secret access key
  • APP_STORE_CONNECT_KEY_ID - The Appstore Connect Key ID That you are using. (see here)
  • APP_STORE_CONNECT_ISSUER_ID - See here
  • APP_STORE_CONNECT_API_KEY_B64 - The Base64 encoded API key - See here.

Environment variables that you may want to change in config.yml and what they do:

  • KEY_FILE - Key file for the Android Keystore
  • KEY_ALIAS - Alias for the Android Keystore

Fastlane

Setup Notes

Fastfiles are provided but you will have to change some of the details to get things to work, and go through setting up Match. The following are a list of files you will need to edit:

  • ios/fastlane/Appfile - Change to your bundle identifier and Team ID.
  • ios/fastlane/MatchFile - Change all the details to your repo and bundle identifier. You will also need to setup a match repo to house your certs/provisioning profiles and go through the process of setting it up.
  • android/fastlane/Appfile - Change your application identifier.

You might also want to store metadata for your application in your version control system.

Screenshot Generation

This project is automatically set up to generate screenshots for iOS. To change what screenshots are captured, you need to edit the UI Test in XCode. It can save a huge amount of time if you do this, and you can upload Screenshots automatically as part of your Fastlane delivery process. Android is not supported at this time.

Here is the guide to setting this up. You may want to rename the targets NonaTemplateUITests and NonaTemplateTests and the relevant files in your project.

Also a note on using testID to identify items. This works for TouchableOpacity, but not for Button in React Native.

Sentry

Sentry is set up with the project, but needs a few more things to be provided for it to work.

  • ios/sentry.properties - Change the values in that file to match your team and project.
  • Open the project in XCode via the .workspace file. Go to build phases, and edit Upload Debug Symbols To Sentry and uncomment #../node_modules/@sentry/cli/bin/sentry-cli upload-dsym
  • Set your Sentry DSN value in env/common.json and re-init your environment with the env command.

Semantic Release

For semantic release to work properly using the example CircleCI config you are going to need to run your jobs ideally as a Machine User. That user should have the ability to push new commits on your develop trunk, as it will create a release commit when doing so.

You're also going to need to follow the guide here to create a token that you can set in Circle as an environment variable.