react-native-firebaseui

Requirements

We assume you already have firebase sdk installed and configured.
We're using this great library:
react-native-firebase

Getting started

$ npm install react-native-firebaseui --save

$3

$ react-native link react-native-firebaseui

For iOS add the following pod to your podfile:

``pod
pod 'SDWebImage', '~> 4.0'
`

and run pod install.

Android Additional step for PhotoView Library

Add this in your root build.gradle file (usually under android/build.gradle):

`gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
`

$3

#### iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-firebase-ui and add RNFirebaseUi.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNFirebaseUi.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

#### Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

- Add import io.rumors.reactnativefirebaseui.RNFirebaseUiPackage; to the imports at the top of the file
- Add new RNFirebaseUiPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

`gradle
include ':react-native-firebase-ui'
project(':react-native-firebase-ui').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase-ui/android')
`

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

`gradle
compile project(':react-native-firebase-ui')
`

Usage

`javascript
import { ImageView, PhotoView } from 'react-native-firebaseui';

//no zoom support
export class MyFirebaseImageView extends Component {
constructor(props) {
super(props);
}

render() {
let imageProps = this.props;

return (
{...imageProps}
path="firebase/storage/path"
defaultSource={require('./placeholder.png')} // optional, show placeholder until image is loaded
timestamp={0} //optional, can be used to specify last modified time for same storage path
resizeMode="cover" //'cover', 'contain', 'stretch', 'center'
/>
);
}
}

//zoom support (android only). On iOS just wrap the ImageView with a scroll view
export class MyFirebasePhotoView extends Component {
constructor(props) {
super(props);
}

render() {
let imageProps = this.props;

return (
{...imageProps}
path="firebase/storage/path"
defaultSource={require('./placeholder.png')} // optional, show placeholder until image is loaded
timestamp={0} //optional, can be used to specify last modified time for same storage path
resizeMode="cover" //'cover', 'contain', 'stretch', 'center'
/>
);
}
}
`

> Note: On Android, the defaultSource` prop is ignored on debug builds.