From 9a2ca4bebdaab6d98547f5a5461ac9845e44b349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Acu=C3=B1a?=
<4982414+rgommezz@users.noreply.github.com>
Date: Sun, 3 Feb 2019 03:23:39 +0000
Subject: [PATCH] feat: Example application in Expo
Fixes #21
---
README.md | 3 +
example/.gitignore | 7 +
example/.watchmanconfig | 1 +
example/App.js | 69 +
example/DummyNetworkContext.js | 4 +
example/README.md | 19 +
example/__tests__/App-test.js | 22 +
example/app.json | 29 +
example/assets/fonts/SpaceMono-Regular.ttf | Bin 0 -> 93252 bytes
example/assets/images/icon.png | Bin 0 -> 2976 bytes
example/assets/images/redux-saga.png | Bin 0 -> 56625 bytes
example/assets/images/redux.png | Bin 0 -> 18030 bytes
example/assets/images/robot-dev.png | Bin 0 -> 12912 bytes
example/assets/images/robot-prod.png | Bin 0 -> 12124 bytes
example/assets/images/splash.png | Bin 0 -> 7178 bytes
example/babel.config.js | 6 +
example/components/ActionButtons.js | 136 +
example/components/ConnectionToggler.js | 21 +
example/components/Counter.js | 43 +
example/components/OfflineQueue.js | 50 +
example/components/ReduxNetworkReader.js | 50 +
example/components/StyledText.js | 13 +
example/components/TabBarIcon.js | 19 +
.../components/__tests__/StyledText-test.js | 10 +
example/constants/Colors.js | 14 +
example/constants/Layout.js | 12 +
example/navigation/AppNavigator.js | 9 +
example/navigation/MainTabNavigator.js | 63 +
example/package.json | 28 +
example/redux/actions.js | 29 +
example/redux/createStore.js | 35 +
example/redux/reducer.js | 13 +
example/redux/sagas.js | 18 +
example/screens/ComponentsScreen.js | 164 +
example/screens/ReduxScreen.js | 98 +
example/screens/SagasScreen.js | 95 +
example/yarn.lock | 7192 +++++++++++++++++
37 files changed, 8272 insertions(+)
create mode 100644 example/.gitignore
create mode 100644 example/.watchmanconfig
create mode 100644 example/App.js
create mode 100644 example/DummyNetworkContext.js
create mode 100644 example/README.md
create mode 100644 example/__tests__/App-test.js
create mode 100644 example/app.json
create mode 100755 example/assets/fonts/SpaceMono-Regular.ttf
create mode 100644 example/assets/images/icon.png
create mode 100644 example/assets/images/redux-saga.png
create mode 100644 example/assets/images/redux.png
create mode 100644 example/assets/images/robot-dev.png
create mode 100644 example/assets/images/robot-prod.png
create mode 100644 example/assets/images/splash.png
create mode 100644 example/babel.config.js
create mode 100644 example/components/ActionButtons.js
create mode 100644 example/components/ConnectionToggler.js
create mode 100644 example/components/Counter.js
create mode 100644 example/components/OfflineQueue.js
create mode 100644 example/components/ReduxNetworkReader.js
create mode 100644 example/components/StyledText.js
create mode 100644 example/components/TabBarIcon.js
create mode 100644 example/components/__tests__/StyledText-test.js
create mode 100644 example/constants/Colors.js
create mode 100644 example/constants/Layout.js
create mode 100644 example/navigation/AppNavigator.js
create mode 100644 example/navigation/MainTabNavigator.js
create mode 100644 example/package.json
create mode 100644 example/redux/actions.js
create mode 100644 example/redux/createStore.js
create mode 100644 example/redux/reducer.js
create mode 100644 example/redux/sagas.js
create mode 100644 example/screens/ComponentsScreen.js
create mode 100644 example/screens/ReduxScreen.js
create mode 100644 example/screens/SagasScreen.js
create mode 100644 example/yarn.lock
diff --git a/README.md b/README.md
index 39364c40..a98cd403 100644
--- a/README.md
+++ b/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)
diff --git a/example/.gitignore b/example/.gitignore
new file mode 100644
index 00000000..a62752dc
--- /dev/null
+++ b/example/.gitignore
@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
diff --git a/example/.watchmanconfig b/example/.watchmanconfig
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/example/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/example/App.js b/example/App.js
new file mode 100644
index 00000000..8927098d
--- /dev/null
+++ b/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 (
+
+ );
+ }
+ return (
+
+
+ {Platform.OS === 'ios' && }
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ },
+});
diff --git a/example/DummyNetworkContext.js b/example/DummyNetworkContext.js
new file mode 100644
index 00000000..07987f46
--- /dev/null
+++ b/example/DummyNetworkContext.js
@@ -0,0 +1,4 @@
+import React from 'react';
+
+const DummyNetworkContext = React.createContext();
+export default DummyNetworkContext;
diff --git a/example/README.md b/example/README.md
new file mode 100644
index 00000000..85471255
--- /dev/null
+++ b/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
+
+
+
+
+