mirror of
https://github.com/zhigang1992/react-native-firebase.git
synced 2026-04-23 12:06:47 +08:00
[docs] prettier
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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_
|
||||
|
||||
@@ -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>} />;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user