rmrs/react-native-firebaseui

Firebase UI bindings for react native

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.rmrs:react-native-firebaseui:'
	}

	dependencies {
		implementation("com.github.rmrs:react-native-firebaseui:")
	}

	<dependency>
	    <groupId>com.github.rmrs</groupId>
	    <artifactId>react-native-firebaseui</artifactId>
	    <version></version>
	</dependency>


                            
    libraryDependencies += "com.github.rmrs" % "react-native-firebaseui" % ""


                            
    :dependencies [[com.github.rmrs/react-native-firebaseui ""]]

Readme

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

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

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

Android

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

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"
        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<void, void, void> {
  constructor(props) {
    super(props);
  }

  render() {
    let imageProps = this.props;

    return (
      <PhotoView
        {...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.