https://github.com/jondot/react-native-bundles

Hand-picked bundles of React Native libraries and components that go well together for any kind of app
https://github.com/jondot/react-native-bundles

components react-native

Last synced: 8 months ago
JSON representation

Hand-picked bundles of React Native libraries and components that go well together for any kind of app

Host: GitHub
URL: https://github.com/jondot/react-native-bundles
Owner: jondot
Created: 2017-04-09T08:21:32.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2018-04-09T08:07:27.000Z (about 8 years ago)
Last Synced: 2025-07-27T06:03:10.284Z (11 months ago)
Topics: components, react-native
Homepage:
Size: 32.2 KB
Stars: 8
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# React Native Bundles

Hand-picked bundles of React Native libraries and components that go well together for
any kind of app. Let's kill components fatigue!.

In other words, turn this:

```js
{
// in package.json
// ...
"dependencies": {
"@exponent/ex-navigation": "2.7.1",
"@shoutem/ui": "^0.9.1",
"axios": "^0.15.3",
"faker": "^4.1.0",
"firebase": "^3.7.1",
"immutable": "^3.8.1",
"lodash": "^4.16.6",
"nachos-ui": "^0.1.2",
"ramda": "^0.23.0",
"react-native-app-intro": "^1.1.5",
"react-native-code-push": "^1.15.0-beta",
"react-native-contacts": "^0.7.1",
"react-native-fabric": "0.4.0",
// ...
}
}
```

Into this:

```js
{
// in package.json
// ...
"dependencies": {
"rnbundle-core": "0.1.0",
"rnbundle-redux": "0.1.0",
"rnbundle-chat-app": "0.4.0",
}
}
```

## Quick Start

Use `npm` (as of `yarn` v0.22 there's no support for `postinstall`):

$ npm i -S rnbundle-core

If you use `yarn` and would like to lock a version, you should use it
on top of `npm`:

$ yarn add rnbundle-core

This will install the bundled libraries and components, and will link
native resources and code using `rnpm`.

## Rationale

Maintaining the awesome list, and after having built a few apps and writing a
book about it, I get asked these a lot of times. "What navigation library really
work?", "Do X go well with Redux?", "Does Y work with MobX?"
and so on.

People are always trying to navigate the bleeding edge and the fatigue that
comes with it, and this is an attempt to alleviate that.

Having used and maintained starter kits, in the general sense for bleeding
edge technologies, they don't work. They are too complex to understand when
you're a newcomer, too fragile and opinionated when you're experienced,
and they become a pain to maintain when you're the creator so they often
get abandoned or being rewritten.

This project undercuts starter kits, and just lets you have the bare
essentials. It fixes in place the architectural stack of components that work
well together, and you wire it; leading to more confidence, understanding and
cleaner maintenance.

## Adding Bundles

Pull requests for new bundles to this list will be welcome. Here's some
pointers in case you want to make one.

* A bundle is a `package.json` file.
* Unlike creating an app template, creating a bundle is really nothing more
than listing out your dependencies.
* If you have native dependencies, you need to use `rnpm` (more on this below).

### Creating a Bundle

Initialize the `react-native-bundles` project, and make a new npm module:

```
$ git clone https://github.com/jondot/react-native-bundles
$ cd react-native-bundles
$ yarn
$ mkdir packages/your-bundle-name && cd your-bundle-name
$ npm init
```

You can add your recommended components now as you would with a normal
npm module (`npm i -S any-module` or `yarn add any-module`).

Then add a `README.md` so that your users wouldn't be surprised. A good one
to follow would be the `[packages/rnbundle-core](packages/rnbundle-core)` one.

### Native Modules

Native modules that require linking (with `rnpm`, for example), cannot
be transitively linked. Meaning, if an app requires `rnbundle-core` and that
in turn requires `react-native-blur`, which is a native-linked library, then
no package manager (npm or yarn) would run the native linking step. For
that reason you will need a custom hook in your `package.json` file:

```
"scripts": {
"postinstall": "cd ../../ && rnpm link react-native-vector-icons && rnpm link react-native-permissions && rnpm link react-native-fs && rnpm link react-native-code-push && rnpm link react-native-firebase-analytics && rnpm link react-native-blur"
},
```

This script would go a couple folders up, which is where the host app will live,
and runs `rnpm` link for you per native library.

## Thanks

To all [Contributors](https://github.com/jondot/foobanzle/graphs/contributors) - you make this happen, thanks!

# Copyright

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/jondot/react-native-bundles

Awesome Lists containing this project

README