diff --git a/.gitignore b/.gitignore index 3d2bb510..cd2facc7 100644 --- a/.gitignore +++ b/.gitignore @@ -86,4 +86,6 @@ local.properties **/ios/ReactNativeFirebaseDemo.xcworkspace/ dist version.js -.nyc_output \ No newline at end of file +.nyc_output +ios.coverage.json +tests/ios/Fabric.framework/Fabric diff --git a/.npmignore b/.npmignore index 48b7b5e0..0890a2e7 100644 --- a/.npmignore +++ b/.npmignore @@ -80,3 +80,4 @@ buddybuild_postclone.sh bin/test.js .github example +codorials diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 946e8ee4..14ebfa4d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,8 +6,8 @@ First, thank you for considering contributing to react-native-firebase! It's peo We welcome any type of contribution, not only code. You can help with -* **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open) -* **Docs**: improve reference coverage, add more examples, fix any typos or anything else you can spot. At the top of every page on our docs site you can click the `Edit` pencil to go to that pages markdown file, or view the [Docs Repo](https://github.com/invertase/react-native-firebase-docs) directly +* **QA**: file bug reports, the more details you can give the better (e.g. platform versions, screenshots sdk versions & logs) +* **Docs**: improve reference coverage, add more examples, fix typos or anything else you can spot. At the top of every page on our docs site you can click the `Edit` pencil to go to that pages markdown file, or view the [Docs Repo](https://github.com/invertase/react-native-firebase-docs) directly * **Marketing**: writing blog posts, howto's, printing stickers, ... * **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ... * **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. @@ -20,12 +20,12 @@ Working on your first Pull Request? You can learn how from this _free_ series, [ ## Submitting code -Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests. +Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests where possible. ## Code review process The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge. -It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? +It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? Tag in any linked issues. ## Financial contributions diff --git a/android/src/main/java/io/invertase/firebase/notifications/RNFirebaseNotificationManager.java b/android/src/main/java/io/invertase/firebase/notifications/RNFirebaseNotificationManager.java index 25eadab3..46417c96 100644 --- a/android/src/main/java/io/invertase/firebase/notifications/RNFirebaseNotificationManager.java +++ b/android/src/main/java/io/invertase/firebase/notifications/RNFirebaseNotificationManager.java @@ -560,7 +560,9 @@ public class RNFirebaseNotificationManager { } private Uri getSound(String sound) { - if (sound.equalsIgnoreCase("default")) { + if (sound.contains("://")) { + return Uri.parse(sound); + } else if (sound.equalsIgnoreCase("default")) { return RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION); } else { int soundResourceId = getResourceId("raw", sound); diff --git a/bridge/package.json b/bridge/package.json index cad6460d..8eeb3226 100755 --- a/bridge/package.json +++ b/bridge/package.json @@ -20,7 +20,7 @@ "ios:pod:install": "cd ios && rm -rf ReactNativeFirebaseDemo.xcworkspace && pod install && cd .." }, "dependencies": { - "bridge": "^0.2.4", + "bridge": "^0.2.5", "detox": "^7.2.0", "escape-string-regexp": "^1.0.5", "fbjs": "^0.8.16", diff --git a/codorials/authentication-with-firebase/app-navigation.md b/codorials/authentication-with-firebase/app-navigation.md new file mode 100644 index 00000000..52c43c9b --- /dev/null +++ b/codorials/authentication-with-firebase/app-navigation.md @@ -0,0 +1,188 @@ +# App Navigation + +React Navigation has gone through many cycles of navigation implementations and has been a pain point for developers for a good while. +A current "go to" navigation library is called [react-navigation](https://reactnavigation.org/). It's pure JavaScript implementation +which performs well and provides a solid foundation for navigation on both Android and iOS. + +In this step we'll be focusing on adding a Login & Register screen to our app. + +## Installation + +Simply install the dependency via NPM, no native installation is needed: + +```bash +npm install --save react-navigation +``` + +## Navigation Stacks + +Navigation on an app typically works in stacks, where a user can navigate to a new screen (pushing a new screen onto the stack), or backwards (popping +a screen off the stack). + +What's great about this concept is that we can create multiple instances of a stack, for example a stack for unauthenticated users and another for +authenticated ones. + +To create a new stack, we import the `StackNavigator` from `react-navigation`. In it's basic form, the first item of the `StackNavigator` object +acts as our initial screen on the stack. Lets create a new directory and component for our unauthenticated state: + +```js +// src/screens/unauthenticated/index.js + +import { StackNavigator } from 'react-navigation'; + +import Login from './Login'; +import Register from './Register'; + +export default StackNavigator({ + Login: { + screen: Login, + }, + Register: { + screen: Register, + }, +}); +``` + +In both the `Login` & `Register` files, create a basic React component (change Login to Register where appropriate): + +```jsx +// src/screens/unauthenticated/Login.js +// src/screens/unauthenticated/Register.js + +import React, { Component } from 'react'; +import { View, Text } from 'react-native'; + +class Login extends Component { + render() { + return ( + + Login + + ); + } +} +``` + +## Using the stack + +StackNavigator returns a React component which can be rendered in our app. If we go back to our `src/App.js` component, we can now return +the stack: + +```jsx +// src/App.js + +import React, { Component } from 'react'; + +import UnauthenticatedStack from './screens/unauthenticated'; + +class App extends Component { + render() { + return ; + } +} + +export default App; +``` + +Our `UnauthenticatedStack` component will now show the `Login` component as it's the first item in the `StackNavigator`. Reload your app and you +should have your `Login` component rendering! + +![Basic Navigation](assets/1-unauthenticated-nav.jpg =300x\*) + +## Styling the navigator + +As you can see, `react-navigation` provides basic styling to mimic the feel of Android's [Material Design](https://material.io). The +library provides a simple, React like API to style and control your app. + +> If you're using iOS, the functionality will remain the same however the basic styling will represent that of the iOS interface instead! + +For this example we're going to add a title to our screen and liven up the colors - there's loads more you can do with `react-navigation` though, +just check out their in-depth [documentation](https://reactnavigation.org/docs/getting-started.html). + +Lets go ahead and style the screen, using a class static `navigationOptions` object which lets `react-navigation` access our screen component styling: + +```jsx +// src/screens/unauthenticated/Login.js + +import React, { Component } from 'react'; +import { View, Text } from 'react-native'; + +class Login extends Component { + // Add our react-navigation static method: + static navigationOptions = { + title: 'Login', + headerStyle: { + backgroundColor: '#E6853E', + }, + headerTintColor: '#fff', + }; + + render() { + return ( + + Login + + ); + } +} + +export default Login; +``` + +With this basic config you'll end up with an Android looking app with minimal configuration. Whats better is that `react-navigation` will also +take care of any back buttons and screen animations when navigating through the stack, pretty nifty. + +![Styled Navigation](assets/2-unauthenticated-nav.jpg =300x\*) + +## Pushing to a new stack + +Pushing a new screen onto the stack is a common practice on mobile apps, however requires a slightly different mindset if you're from a web development +background. The basics of a stack allow you to `push` and `pop` where screens effectively overlay each other. The user cannot change stack item +unless you give them the ability to (compared to a website where the user could manually enter a different URL). This allows for greater +control over what a user is able to push/pop to. + +Each component we assign to our `StackNavigator` gets cloned by `react-navigation` with a prop called `navigation` which gives us full control over +all of the navigation functionality we'll need. + +* To "push" to a new screen we call the `navigate` method with the screen name we defined as the object key within `StackNavigator`. +* To "pop", or go back to the previous screen on the stack we call the `goBack` method. + +Lets add a simple button to push to the `Register` screen we defined: + +```jsx +// src/screens/unauthenticated/Login.js +import React, { Component } from 'react'; +import { View, Button } from 'react-native'; + +class Login extends Component { + static navigationOptions = { + title: 'Login', + headerStyle: { + backgroundColor: '#E6853E', + }, + headerTintColor: '#fff', + }; + + // Call this method on the button press + _register = () => { + this.props.navigation.navigate('Register'); + }; + + render() { + return ( + +