Move docs to docsify
This commit is contained in:
Elliot Hesp
parent
6c4d80d162
commit
361535e96e
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
<h1 align="center">
|
||||
<img src="https://camo.githubusercontent.com/6c827e5a0bb91259f82a1f4923ab7efa4891b119/687474703a2f2f692e696d6775722e636f6d2f303158514c30782e706e67"/><br>
|
||||
|
||||
React Native Firebase
|
||||
</h1>
|
||||
|
||||
<div style="text-align: center;">
|
||||
A well tested Firebase implementation for React Native, supporting both iOS & Android apps.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
RNFirebase is a _light-weight_ layer sitting on-top of the native Firebase libraries for both iOS and Android which mirrors the Firebase Web SDK as closely as possible.
|
||||
|
||||
Although the [Firebase Web SDK](https://www.npmjs.com/package/firebase) library will work with React Native, it is mainly built for the web.
|
||||
|
||||
RNFirebase provides a JavaScript bridge to the native Firebase SDKs for both iOS and Android. Firebase will run on the native thread, allowing the rest of your app to run on the [JS thread](https://facebook.github.io/react-native/docs/performance.html#javascript-frame-rate). The Firebase Web SDK also runs on the JS thread, therefore potentially affecting the frame rate causing jank with animations, touch events etc. All in all, RNFirebase provides much faster performance (~2x) over the web SDK.
|
||||
|
||||
The native SDKs also allow us to hook into device sdk's which are not possible with the web SDK, for example crash reporting, offline realtime database support, analyics and more!
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
- Getting started
|
||||
- [Installation - iOS](/installation-ios)
|
||||
- [Installation - Android](/installation-android)
|
||||
- [Firebase Setup](/firebase-setup.md)
|
||||
- [Usage](/usage)
|
||||
|
||||
- Contributing
|
||||
- [Guidelines](/contributing/guidelines)
|
||||
- [Testing](/contributing/testing)
|
||||
|
||||
- Modules
|
||||
- [Authentication](/modules/authentication)
|
||||
- [Realtime Database](/modules/database)
|
||||
- [Analytics](/modules/analytics)
|
||||
- [Storage](/modules/storage)
|
||||
- [Cloud Messaging](/modules/cloud-messaging)
|
||||
- [Crash Reporting](/modules/crash)
|
||||
- [Transactions](/modules/transactions)
|
||||
|
||||
- Other
|
||||
- [Project Board](https://github.com/invertase/react-native-firebase/projects)
|
||||
- [FAQs / Troubleshooting](/faqs)
|
||||
- [Examples](https://github.com/invertase/react-native-firebase-examples)
|
||||
- [Chat](https://discord.gg/t6bdqMs)
|
||||
- [Gitter](https://gitter.im/invertase/react-native-firebase)
|
||||
|
|
@ -1 +0,0 @@
|
|||
# Remote Config
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Guidelines
|
||||
|
||||
We welcome any contribution to the repository. Please ensure your changes to the JavaScript code follow the styling guides controlled by ESlint. Changes to native code should be kept clean and follow the standard of existing code.
|
||||
|
||||
Changes to existing code should ensure all relevant tests on the test app pass. Any new features should have new tests created and ensure all existing tests pass.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Testing
|
||||
|
||||
TODO
|
||||
12
docs/faqs.md
12
docs/faqs.md
|
|
@ -1,6 +1,6 @@
|
|||
# FAQs / Troubleshooting
|
||||
|
||||
### Comparison to Firestack
|
||||
## Comparison to Firestack
|
||||
|
||||
Firestack was a great start to integrating Firebase and React Native, however has underlying issues which needed to be fixed.
|
||||
A V3 fork of Firestack was created to help address issues such as lack of standardisation with the Firebase Web SDK,
|
||||
|
|
@ -10,7 +10,7 @@ too large to manage on the existing repository, whilst trying to maintain backwa
|
|||
RNFirebase was re-written from the ground up, addressing these issues with core focus being around matching the Web SDK as
|
||||
closely as possible and fixing the major bugs/issues along the way.
|
||||
|
||||
### How do I integrate Redux with RNFirebase
|
||||
## How do I integrate Redux with RNFirebase
|
||||
|
||||
As every project has different requirements & structure, RNFirebase *currently* has no built in methods for Redux integration.
|
||||
As RNFirebase can be used outside of a Components context, you do have free reign to integrate it as you see fit. For example,
|
||||
|
|
@ -42,7 +42,7 @@ export function onAuthStateChanged() {
|
|||
}
|
||||
```
|
||||
|
||||
### [Android] Google Play Services related issues
|
||||
## [Android] Google Play Services related issues
|
||||
|
||||
The firebase SDK requires a certain version of Google Play Services installed on Android in order to function properly.
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ party emulator such as GenyMotion.
|
|||
Using this kind of workaround with Google Play Services can be problematic, so we
|
||||
recommend using the native Android Studio emulators to reduce the chance of these complications.
|
||||
|
||||
### [Android] Turning off Google Play Services availability errors
|
||||
## [Android] Turning off Google Play Services availability errors
|
||||
|
||||
G.P.S errors can be turned off using a config option like so:
|
||||
|
||||
|
|
@ -79,7 +79,7 @@ const firebase = RNFirebase.initializeApp({
|
|||
```
|
||||
This will stop your app from immediately red-boxing or crashing, but won't solve the underlying issue of G.P.S not being available or of the correct version. This will mean certain functionalities won't work properly and your app may even crash.
|
||||
|
||||
### [Android] Checking for Google Play Services availability with React Native Firebase
|
||||
## [Android] Checking for Google Play Services availability with React Native Firebase
|
||||
|
||||
React Native Firebase actually has a useful helper object for checking G.P.S availability:
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ This error will match the messages and error codes mentioned above, and can be f
|
|||
https://developers.google.com/android/reference/com/google/android/gms/common/ConnectionResult#SERVICE_VERSION_UPDATE_REQUIRED
|
||||
|
||||
|
||||
### [Android] Duplicate Dex Files error (build time error)
|
||||
## [Android] Duplicate Dex Files error (build time error)
|
||||
|
||||
A common build time error when using libraries that require google play services is of the form:
|
||||
'Failed on android with com.android.dex.DexException: Multiple dex files... '
|
||||
|
|
|
|||
|
|
@ -10,45 +10,11 @@ Each platform uses a different setup method after creating the project.
|
|||
|
||||
## iOS
|
||||
|
||||
See the [ios setup guide](./installation.ios.md).
|
||||
For iOS, ensure you've followed the instructions provided by Firebase; adding your [GoogleService-Info.plist](https://github.com/invertase/react-native-firebase/blob/master/tests/ios/GoogleService-Info.plist)
|
||||
file to the project, and [configuring your AppDelegate](https://github.com/invertase/react-native-firebase/blob/master/tests/ios/ReactNativeFirebaseDemo/AppDelegate.m#L20).
|
||||
|
||||
## Android
|
||||
|
||||
See the [android setup guide](./installation.android.md).
|
||||
|
||||
## Usage
|
||||
|
||||
After creating a Firebase project and installing the library, we can use it in our project by importing the library in our JavaScript:
|
||||
|
||||
```javascript
|
||||
import RNFirebase from 'react-native-firebase'
|
||||
```
|
||||
|
||||
We need to tell the Firebase library we want to _configure_ the project. RNFirebase provides a way to configure both the native and the JavaScript side of the project at the same time with a single command:
|
||||
|
||||
```javascript
|
||||
const firebase = RNFirebase.initializeApp({
|
||||
// config options
|
||||
});
|
||||
```
|
||||
|
||||
### Configuration Options
|
||||
|
||||
| option | type | Default Value | Description |
|
||||
|----------------|----------|-------------------------|----------------------------------------|
|
||||
| debug | bool | false | When set to true, RNFirebase will log messages to the console and fire `debug` events we can listen to in `js` |
|
||||
| persistence | bool | false | When set to true, database persistence will be enabled. |
|
||||
|
||||
For instance:
|
||||
|
||||
```javascript
|
||||
import RNFirebase from 'react-native-firebase';
|
||||
|
||||
const configurationOptions = {
|
||||
debug: true
|
||||
};
|
||||
|
||||
const firebase = RNFirebase.initializeApp(configurationOptions);
|
||||
|
||||
export default firebase;
|
||||
```
|
||||
For Android, ensure you've followed the instructions provided by Firebase; adding your [google-services.json](https://github.com/invertase/react-native-firebase/blob/master/tests/android/app/google-services.json)
|
||||
file to the project, installing the [google-services](https://github.com/invertase/react-native-firebase/blob/master/tests/android/build.gradle#L9)
|
||||
plugin and applying **at the end** of your [`build.gradle`](https://github.com/invertase/react-native-firebase/blob/master/tests/android/app/build.gradle#L144).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>react-native-firebase - A react native firebase library supporting both android and ios native firebase SDK's</title>
|
||||
<meta name="description" content="A react native firebase library supporting both android and ios native firebase SDK's">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'react-native-firebase',
|
||||
repo: 'https://github.com/invertase/react-native-firebase',
|
||||
loadSidebar: true,
|
||||
search: 'auto',
|
||||
themeColor: '#f5820b',
|
||||
subMaxLevel: 2,
|
||||
maxLevel: 4,
|
||||
ga: 'UA-XXXXX-Y',
|
||||
plugins: [
|
||||
function (hook) {
|
||||
var footer = [
|
||||
'<hr/>',
|
||||
'<footer>',
|
||||
`<span>Caught a mistake or want to contribute to the documentation? <a href="https://github.com/invertase/react-native-firebase/tree/master/docs" target="_blank">Edit documentation on Github!</a>.</span>`,
|
||||
'</footer>'
|
||||
].join('');
|
||||
|
||||
hook.afterEach(function (html) {
|
||||
return html + footer
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
|
||||
<script src="//unpkg.com/prismjs/components/prism-javascript.min.js"></script>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Android Installation
|
||||
|
||||
### 1 - Setup google-services.json
|
||||
## 1) Setup google-services.json
|
||||
Download the `google-services.json` file provided by Firebase in the _Add Firebase to Android_ platform menu in your Firebase configuration console. This file should be downloaded to `YOUR_PROJECT/android/app/google-services.json`.
|
||||
|
||||
Next you'll have to add the google-services gradle plugin in order to parse it.
|
||||
|
|
@ -23,7 +23,7 @@ In your app build.gradle file, add the gradle plugin at the VERY BOTTOM of the f
|
|||
apply plugin: 'com.google.gms.google-services'
|
||||
```
|
||||
|
||||
### 2 - Link RNFirebase
|
||||
## 2) Link RNFirebase
|
||||
|
||||
To install `react-native-firebase` in your project, you'll need to import the package from `io.invertase.firebase` in your project's `android/app/src/main/java/com/[app name]/MainApplication.java` and list it as a package for ReactNative in the `getPackages()` function:
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ include ':react-native-firebase'
|
|||
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
|
||||
```
|
||||
|
||||
### 3 - Cloud Messaging (optional)
|
||||
## 3) Cloud Messaging (optional)
|
||||
|
||||
If you plan on using [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/), add the following to `android/app/src/main/AndroidManifest.xml`.
|
||||
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
## iOS Installation
|
||||
# iOS Installation
|
||||
|
||||
### 1 - Setup google-services.plist and dependencies
|
||||
## 1) Setup google-services.plist and dependencies
|
||||
Setup the `google-services.plist` file and Firebase ios frameworks first; check out the relevant Firebase docs [here](https://firebase.google.com/docs/ios/setup#frameworks).
|
||||
|
||||
#### 1.1 - Initialisation
|
||||
### 1.1) Initialisation
|
||||
Make sure you've added the following to the top of your `ios/[YOUR APP NAME]]/AppDelegate.m` file:
|
||||
|
||||
`#import <Firebase.h>`
|
||||
|
|
@ -12,10 +12,10 @@ and this to the `didFinishLaunchingWithOptions:(NSDictionary *)launchOptions` me
|
|||
|
||||
`[FIRApp configure];`
|
||||
|
||||
### 2 - Link RNFirebase
|
||||
## 2) Link RNFirebase
|
||||
There are multiple ways to install RNFirebase depending on how your project is currently setup:
|
||||
|
||||
#### 2.1 - Existing Cocoapods setup, including React Native as a pod
|
||||
### 2.1) Existing Cocoapods setup, including React Native as a pod
|
||||
Simply add the following to your `Podfile`:
|
||||
|
||||
```ruby
|
||||
|
|
@ -33,7 +33,7 @@ pod 'Firebase/Storage'
|
|||
pod 'RNFirebase', :path => '../node_modules/react-native-firebase'
|
||||
```
|
||||
|
||||
#### 2.2 - Via react-native-cli link
|
||||
### 2.2) Via react-native-cli link
|
||||
React native ships with a `link` command that can be used to link the projects together, which can help automate the process of linking our package environments.
|
||||
|
||||
```bash
|
||||
|
|
@ -46,12 +46,13 @@ Update the newly installed pods once the linking is done:
|
|||
cd ios && pod update --verbose
|
||||
```
|
||||
|
||||
##### cocoapods
|
||||
### cocoapods
|
||||
|
||||
We've automated the process of setting up with cocoapods. This will happen automatically upon linking the package with `react-native-cli`.
|
||||
|
||||
**Remember to use the `ios/[YOUR APP NAME].xcworkspace` instead of the `ios/[YOUR APP NAME].xcproj` file from now on**.
|
||||
> Remember to use the `ios/[YOUR APP NAME].xcworkspace` instead of the `ios/[YOUR APP NAME].xcproj` file from now on.
|
||||
|
||||
#### 2.3 - Manually
|
||||
### 2.3) Manually
|
||||
|
||||
If you prefer not to use `react-native link`, we can manually link the package together with the following steps, after `npm install`:
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Cloud Messaging
|
||||
|
||||
Firebase Cloud Messaging ([FCM](https://firebase.google.com/docs/cloud-messaging/)) allows you to send push messages at no
|
||||
Firebase Cloud Messaging ([FCM](https://firebase.google.com/docs/cloud-messaging/)) allows you to send push messages at no
|
||||
cost to both Android & iOS platforms. Assuming the installation instructions have been followed, FCM is ready to go.
|
||||
|
||||
As the Firebase Web SDK has limited messaging functionality, the following methods within `react-native-firebase` have been
|
||||
|
|
@ -26,7 +26,7 @@ firebase.messaging().unsubscribeFromTopic('foobar');
|
|||
|
||||
### getInitialNotification(): `Promise<Object>`
|
||||
|
||||
When the application has been opened from a notification `getInitialNotification` is called and the notification payload
|
||||
When the application has been opened from a notification `getInitialNotification` is called and the notification payload
|
||||
is returned. Use `onMessage` for notifications when the app is running.
|
||||
|
||||
```javascript
|
||||
|
|
@ -4,7 +4,7 @@ RNFirebase provides crash reporting for your app out of the box. Please note cra
|
|||
|
||||
## Manual Crash Reporting
|
||||
|
||||
If you want to manually report a crash, such as a pre-caught exception this is possible by using the `report` method.
|
||||
If you want to manually report a crash, such as a pre-caught exception this is possible by using the `report` method.
|
||||
|
||||
```javascript
|
||||
try {
|
||||
|
|
@ -3,8 +3,6 @@
|
|||
RNFirebase mimics the [Web Firebase SDK Storage](https://firebase.google.com/docs/storage/web/start), whilst
|
||||
providing some iOS and Android specific functionality.
|
||||
|
||||
All Storage operations are accessed via `storage()`.
|
||||
|
||||
## Uploading files
|
||||
|
||||
### Simple
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Transactions
|
||||
|
||||
Transactions are currently an experimental feature as they can not be integrated as easily as the other Firebase features. Please see the [Firebase documentation](https://firebase.google.com/docs/reference/js/firebase.database.Reference#transaction) for full implemtation details.
|
||||
> Transactions are currently an experimental feature as they can not be integrated as easily as the other Firebase features. Please see the [Firebase documentation](https://firebase.google.com/docs/reference/js/firebase.database.Reference#transaction) for full implemtation details.
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ ref.transaction((posts) => {
|
|||
} else {
|
||||
console.log('User posts incremented by 1');
|
||||
}
|
||||
|
||||
|
||||
console.log('User posts is now: ', snapshot.val());
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# Usage
|
||||
|
||||
After creating a Firebase project and installing the library, we can use it in our project by importing the library in our JavaScript:
|
||||
|
||||
```javascript
|
||||
import RNFirebase from 'react-native-firebase'
|
||||
```
|
||||
|
||||
We need to tell the Firebase library we want to _configure_ the project. RNFirebase provides a way to configure both the native and the JavaScript side of the project at the same time with a single command:
|
||||
|
||||
```javascript
|
||||
const firebase = RNFirebase.initializeApp({
|
||||
// config options
|
||||
});
|
||||
```
|
||||
|
||||
## Configuration Options
|
||||
|
||||
| option | type | Default Value | Description |
|
||||
|----------------|----------|-------------------------|----------------------------------------|
|
||||
| debug | bool | false | When set to true, RNFirebase will log messages to the console and fire `debug` events we can listen to in `js` |
|
||||
| persistence | bool | false | When set to true, database persistence will be enabled. |
|
||||
|
||||
For instance:
|
||||
|
||||
```javascript
|
||||
import RNFirebase from 'react-native-firebase';
|
||||
|
||||
const configurationOptions = {
|
||||
debug: true
|
||||
};
|
||||
|
||||
const firebase = RNFirebase.initializeApp(configurationOptions);
|
||||
|
||||
export default firebase;
|
||||
```
|
||||
Loading…
Reference in New Issue