feat: Example application in Expo

Fixes #21

Author: rgommezz

README.md

@@ -8,6 +8,9 @@ Handful of utilities you should keep in your toolbelt to handle offline/online c
 ## Important (Please read)
 **This is the documentation for version 4.x.x. If you are migrating from v3 to v4, check the [release notes](https://github.com/rgommezz/react-native-offline/releases/tag/v4.0.0).**
 
+## Example app
+A comprehensive [example app](/example) is available within Expo to play with the library and better understand its different modules. [Go and check it out!](https://expo.io/@rgommezz/example)
+
 ## Contents
 
 * [Motivation](#motivation)

example/.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

example/.watchmanconfig

@@ -0,0 +1 @@
+{}

example/App.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Platform, StatusBar, StyleSheet, View } from 'react-native';
+import { AppLoading, Font, Icon } from 'expo';
+import AppNavigator from './navigation/AppNavigator';
+import DummyNetworkContext from './DummyNetworkContext';
+
+const onlineUrl = 'https://www.google.com/';
+const offlineUrl = 'https://www.weifhweopfhwioehfiwoephfpweoifhewifhpewoif.com';
+
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoadingComplete: false,
+      network: {
+        pingUrl: onlineUrl,
+        toggleConnection: this.toggleConnection,
+      },
+    };
+  }
+
+  toggleConnection = () => {
+    this.setState(prevState => ({
+      network: {
+        ...prevState.network,
+        pingUrl:
+          prevState.network.pingUrl === onlineUrl ? offlineUrl : onlineUrl,
+      },
+    }));
+  };
+
+  loadResourcesAsync = async () =>
+    Font.loadAsync({
+      ...Icon.Ionicons.font,
+      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
+    });
+
+  handleFinishLoading = () => {
+    this.setState({ isLoadingComplete: true });
+  };
+
+  render() {
+    const { isLoadingComplete, network } = this.state;
+    const { skipLoadingScreen } = this.props;
+    if (!isLoadingComplete && !skipLoadingScreen) {
+      return (
+        <AppLoading
+          startAsync={this.loadResourcesAsync}
+          onFinish={this.handleFinishLoading}
+        />
+      );
+    }
+    return (
+      <DummyNetworkContext.Provider value={network}>
+        <View style={styles.container}>
+          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
+          <AppNavigator />
+        </View>
+      </DummyNetworkContext.Provider>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+});

example/DummyNetworkContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const DummyNetworkContext = React.createContext();
+export default DummyNetworkContext;

example/README.md

@@ -0,0 +1,19 @@
+## Example app
+
+This application showcases component utilities, redux, sagas integration and the offline queue with different configurations. You can try it out in Expo by using [this link](https://expo.io/@rgommezz/example).
+
+### Runing it locally
+You need to have `expo-cli` installed.
+
+```bash
+cd example
+yarn install
+expo start
+```
+
+### Snapshots
+<div>
+   <img align="left" src="https://user-images.githubusercontent.com/4982414/52172165-f3605b00-2761-11e9-87f3-bca71b0d3918.png" width="400">
+
+  <img align="right" src="https://user-images.githubusercontent.com/4982414/52172166-f52a1e80-2761-11e9-8d9b-aa5a7caa24e2.png" width="400"> 
+</div>

example/__tests__/App-test.js

@@ -0,0 +1,22 @@
+import 'react-native';
+import React from 'react';
+import App from '../App';
+import renderer from 'react-test-renderer';
+import NavigationTestUtils from 'react-navigation/NavigationTestUtils';
+
+describe('App snapshot', () => {
+  jest.useFakeTimers();
+  beforeEach(() => {
+    NavigationTestUtils.resetInternalState();
+  });
+
+  it('renders the loading screen', async () => {
+    const tree = renderer.create(<App />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the root without loading screen', async () => {
+    const tree = renderer.create(<App skipLoadingScreen />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

example/app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}