[docs] prettier

This commit is contained in:
Salakar
2019-07-12 15:20:14 +01:00
parent 7e7bcfc51e
commit 50ad72f6aa
79 changed files with 502 additions and 495 deletions

View File

@@ -1,16 +1,17 @@
---
title: Android Setup
description: Manually integrate Realtime Database into your Android application.
description: Manually integrate Realtime Database into your Android application.
---
# Android Manual Linking
> The following steps are only required if your environment does not have access to React Native
auto-linking.
> auto-linking.
#### Add Realtime Database to Gradle Settings
**`android/settings.gradle`**:
```groovy
include ':@react-native-firebase_database'
project(':@react-native-firebase_database').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/database/android')
@@ -19,6 +20,7 @@ project(':@react-native-firebase_database').projectDir = new File(rootProject.pr
#### Add Realtime Database to App Gradle Dependencies
**`android/app/build.gradle`**:
```groovy{4}
// ..
dependencies {
@@ -29,7 +31,8 @@ dependencies {
#### Add Realtime Database to Main Android Application:
**`android/app/src/main/java/**/MainApplication.java`**:
**`android/app/src/main/java/**/MainApplication.java`\*\*:
```java{2,8}
// ..
import io.invertase.firebase.database.ReactNativeFirebaseDatabasePackage;

View File

@@ -1,13 +1,13 @@
---
title: Realtime Database
description: Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
description: Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
---
# Realtime Database
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to
every connected client. React Native Firebase provides native integration with the Android & iOS Firebase SDKs, supporting
both realtime data sync and offline capabilities.
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to
every connected client. React Native Firebase provides native integration with the Android & iOS Firebase SDKs, supporting
both realtime data sync and offline capabilities.
<Youtube id="U5aeM5dvUpA" />
@@ -35,7 +35,7 @@ both realtime data sync and offline capabilities.
## Learn more
Our documentation is a great place to start, however if you're looking for more help or want to help others,
Our documentation is a great place to start, however if you're looking for more help or want to help others,
check out the resources below:
- [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native-firebase-database)

View File

@@ -1,6 +1,6 @@
---
title: iOS Setup
description: Manually integrate Realtime Database into your iOS application.
description: Manually integrate Realtime Database into your iOS application.
---
# iOS Manual Linking
@@ -8,11 +8,12 @@ description: Manually integrate Realtime Database into your iOS application.
## Manual iOS Integration via CocoaPods
> The following steps are only required if your environment does not have access to React Native
auto-linking.
> auto-linking.
#### Add Realtime Database Pod
**`ios/Podfile`**:
```ruby{4}
// ..
target 'app' do
@@ -23,5 +24,4 @@ end
## Manual iOS Integration via Frameworks
*TODO*
_TODO_

View File

@@ -41,16 +41,16 @@ import database from '@react-native-firebase/database';
async function onSignIn() {
// Get the users ID
const uid = auth().currentUser.uid;
// Create a reference
const ref = database().ref(`/users/${uid}`);
// Fetch the data snapshot
const snapshot = await ref.once('value');
console.log('User data: ', snapshot.val());
}
```
```
To write data to the database, the created `Reference` exposes the `set` method which overwrites the data at the given
data reference:
@@ -62,17 +62,17 @@ import database from '@react-native-firebase/database';
async function onCreateAccount() {
// Get the users ID
const uid = auth().currentUser.uid;
// Create a reference
const ref = database().ref(`/users/${uid}`);
await ref.set({
uid,
name: 'Joe Bloggs',
role: 'admin',
});
}
```
```
### Realtime Data Sync
@@ -88,40 +88,40 @@ import database from '@react-native-firebase/database';
function Role({ uid }) {
const [initilizing, setInitilizing] = useState(true);
const [role, setRole] = useState(null);
// Subscriber handler
function onRoleChange(snapshot) {
// Set the role from the snapshot
setRole(snapshot.val());
// Connection established
if (initilizing) setInitilizing(false);
}
useEffect(() => {
// Create reference
const ref = database().ref(`/users/${uid}/role`);
// Subscribe to value changes
ref(`/users/${uid}/role`).on('value', onRoleChange);
// Unsubscribe from changes on unmount
return () => ref.off('value', onRoleChange);
}, [uid]);
// Wait for first connection
if (initilizing) return null;
return <Text>{role}</Text>;
}
```
### FlatList and lists of data
In applications it is common to list repeating data rather than a single value, for example listing a scrollable view of
In applications it is common to list repeating data rather than a single value, for example listing a scrollable view of
games which the user can select and navigate to. If a snapshot value is an array, the snapshot provides `forEach` method
to ensure the data can be displayed in-order as it appears on the database, as the standard `val` method does not
guarantee order.
to ensure the data can be displayed in-order as it appears on the database, as the standard `val` method does not
guarantee order.
Combining the result with a React Native [`FlatList`](https://facebook.github.io/react-native/docs/flatlist) makes creating
a performant, scrollable list simple:
@@ -138,15 +138,15 @@ function Games() {
// Handle snapshot response
function onSnapshot(snapshot) {
const list = [];
// Create our own array of games in order
snapshot.forEach((game) => {
snapshot.forEach(game => {
list.push({
key: game.id, // Add custom key for FlatList usage
...game,
});
});
setGames(list);
setLoading(false);
}
@@ -156,17 +156,12 @@ function Games() {
const ref = database().ref(`/games`);
ref.once('value', onSnapshot);
}, [uid]);
if (loading) {
return <Text>Loading games...</Text>;
}
return (
<FlatList
data={games}
renderItem={({item}) => <Text>{item.name}</Text>}
/>
);
return <FlatList data={games} renderItem={({ item }) => <Text>{item.name}</Text>} />;
}
```