react-native-firebaseui

Requirements

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

Getting started

$ npm install react-native-firebaseui --save

Mostly automatic installation

$ react-native link react-native-firebaseui

For iOS add the following pod to your podfile:

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):

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

Manual installation

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:

   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:

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

Usage

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

//no zoom support
export class MyFirebaseImageView extends Component<void, void, void> {
  constructor(props){
    super(props)
  }

  render() {
    let imageProps = this.props

    return (
      <ImageView
        {...imageProps}
        path='firebase/storage/path'
        timestamp={0} //optional, can be used to specify last modified time for same storage path
        resizeMode='cover' //'cover', 'contain', 'stretch'
      />
    )
  }
}

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

  render() {
    let imageProps = this.props

    return (
      <PhotoView
        {...imageProps}
        path='firebase/storage/path'
        timestamp={0} //optional, can be used to specify last modified time for same storage path
        resizeMode='cover' //'cover', 'contain', 'stretch'
      />
    )
  }
}