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

ignite-ir-boilerplate-andross-temp-fork

v2.3.4

Published

Infinite Red's hot boilerplate for React Native.

Downloads

10

Readme

Ignite IR Boilerplate ("Andross")

Build Status

The latest and greatest boilerplate for Infinite Red opinions

This is the boilerplate that Infinite Red uses as a way to test bleeding-edge changes to our React Native stack.

Currently includes:

  • React Native 0.55.1 (but you can change this if you want to experiment)
  • React Navigation
  • Redux
  • Redux Sagas
  • And more!

Quick Start

When you've installed the Ignite CLI, you can get started with this boilerplate like this:

ignite new MyLatestCreation

You can also change the React Native version, just keep in mind, we may not have tested this just yet.

ignite new MyLatestCreation --react-native-version 0.46.0-rc.2

By default we'll ask you some questions during install as to which features you'd like. If you just want them all, you can skip the questions:

ignite new MyLatestCreation --max

If you want very few of these extras:

ignite new MyLatestCreation --min

Boilerplate walkthrough

Your App folder is where most of the goodies are found in an Ignite Next app. Let's walk through them in more detail. Start with Containers/App.js (described below) and work your way down the walkthrough in order.

Containers

Containers are (mostly) full screens, although they can be sections of screens or application containers.

  • App.js - your main application. We create a Redux store and configure it here
  • RootContainer.js - main view of your application. Contains your status bar and navigation component
  • LaunchScreen.js - this is the first screen shown in your application. It's loaded into the Navigation component
  • LoginScreen.js - an example login screen. Read the comments in there to learn more!
  • Styles - styling for each of the above containers and screens

To generate a new Container or Screen you can use the following generator commands:

  • ignite g container New - Will create a New.js and also a Styles/NewStyle.js.
  • ignite g list New - The same as the container command, but it will give you a walkthrough to generate a ListView screen. Allowing you to even pick FlatList or not, grid, and some other options.
  • ignite g screen New - Will create a NewScreen.js and also a Styles/NewScreenStyle.js. Important to mention that the screen generator will add the Screen on the file/class name to make easier to identify.

Those commands will also add the new container to the navigations file.

Navigation

Your primary and other navigation components reside here.

  • AppNavigation.js - loads in your initial screen and creates your menu(s) in a StackNavigation
  • Styles - styling for the navigation
  • ReduxNavigation.js - This file contains the core navigation of your application. If you ever change your launch screen, make sure to change it also at if (nav.routes.length === 1 && (nav.routes[0].routeName === 'LaunchScreen')) {, otherwise you may encounter navigation problems with the Android back button!

Components

React components go here...pretty self-explanatory. We won't go through each in detail -- open each file to read the comments and view the code.

To generate a new Component you can use the following generator commands:

  • ignite g component New - Will create a New.js and also a Styles/NewStyle.js.
  • ignite g component path/New - The same as above, but will use a relative path
  • ignite g component --folder path - An alternative to ignite g component path/index
  • ignite g component --folder path new - An alternative to ignite g component relativePath/New

Storybook

Storybook has been setup to show off components in the different states. Storybook is a great way to develop and test components outside of use in your app. Simply run npm run storybook to get started. All stores are contained in the *.story.js files along side the components.

Themes

Styling themes used throughout your app styles.

  • ApplicationStyles.js - app-wide styles
  • Colors.js - defined colors for your app
  • Fonts.js - defined fonts for your app
  • Images.js - loads and caches images used in your app
  • Metrics.js - useful measurements of things like navBarHeight

Config

Initialize and configure things here.

  • AppConfig.js - simple React Native configuration here
  • DebugConfig.js - define how you want your debug environment to act
  • ReactotronConfig.js - configures Reactotron in your project (Note: this will be extracted into a plugin in the future)
  • ReduxPersist.js - configures Redux Persist (Note: this will be extracted into a plugin in the future)

Fixtures

Contains json files that mimic API responses for quicker development. These are used by the Services/FixtureApi.js object to mock API responses.

Redux, Sagas

Contains a preconfigured Redux and Redux-Sagas setup. Review each file carefully to see how Redux interacts with your application.

Here again we have generators to help you out. You just have to use one of the following:

  • ignite g redux Amazing - Will generate and link the redux for Amazing.
  • ignite g saga Amazing - The same as above, but for the Sagas

TODO: explain more about Redux & Redux Sagas here

Services

Contains your API service and other important utilities for your application.

  • Api.js - main API service, giving you an interface to communicate with your back end
  • ExamplesRegistry.js - lets you view component and Ignite plugin examples in your app
  • FixtureApi.js - mocks your API service, making it faster to develop early on in your app
  • ImmutablePersistenceTransform.js - part of the redux-persist implementation (will be removed)
  • RehydrationServices.js - part of the redux-persist implementation (will be removed)

Lib

We recommend using this folder for modules that can be extracted into their own NPM packages at some point.

Images

Contains actual images (usually png) used in your application.

Transforms

Helpers for transforming data between API and your application and vice versa. An example is provided that you can look at to see how it works.

Tests

This folder (located as a sibling to App) contains sample Jest snapshot and unit tests for your application.

If you would like to have the ignite generate command include the generation of tests when available, add "test": "jest" or "test": "ava" to ./ignite/ignite.json, depending on the test runner you are using.

Previous Boilerplates

Premium Support

Ignite CLI and Ignite IR Boilerplate, as open source projects, are free to use and always will be. Infinite Red offers premium Ignite CLI support and general mobile app design/development services. Email us at [email protected] to get in touch with us for more details.