feature: add fetch with abort controller

Author: robertoachar

.flowconfig

@@ -0,0 +1,4 @@
+{
+ "arrowParens": "always",
+ "singleQuote": true
+}

.prettierrc

@@ -1,49 +1,77 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-
-const instructions = Platform.select({
- ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
- android:
- 'Double tap R on your keyboard to reload,\n' +
- 'Shake or press menu button for dev menu',
-});
+import React, { Component } from 'react';
+import { Button, StyleSheet, Text, ScrollView } from 'react-native';
+import 'abortcontroller-polyfill';
+
+export default class App extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ status: null,
+ data: null,
+ error: null
+ };
+
+ this.handleFetch = this.handleFetch.bind(this);
+ this.handleAbort = this.handleAbort.bind(this);
+ }
+
+ handleFetch() {
+ if (!AbortController) {
+ return this.setState({ status: 'Not implemented' });
+ }
+
+ this.controller = new window.AbortController();
+ this.signal = this.controller.signal;
+
+ this.setState({ status: 'loading...' });
+
+ fetch('https://swapi.co/api/people/1', { signal: this.signal })
+ .then((response) => response.json())
+ .then((data) => this.setState({ status: 'loaded', error: null, data }))
+ .catch((error) => this.setState({ error: error.name }));
+ }
+
+ handleAbort() {
+ this.controller.abort();
+ this.setState({ status: 'aborted' });
+ }
 
-type Props = {};
-export default class App extends Component<Props> {
  render() {
+ const { data, status, error } = this.state;
+
  return (
- <View style={styles.container}>
- <Text style={styles.welcome}>Welcome to React Native!</Text>
- <Text style={styles.instructions}>To get started, edit App.js</Text>
- <Text style={styles.instructions}>{instructions}</Text>
- </View>
+ <ScrollView style={styles.container}>
+ <Text style={styles.welcome}>
+ React Native + fetch + Abort Controller
+ </Text>
+
+ <Button title="Fetch data" onPress={this.handleFetch} />
+ <Button title="Abort" onPress={this.handleAbort} />
+ <Text style={styles.instructions}>{`Status: ${status}`}</Text>
+ <Text style={styles.instructions}>{`Error: ${error}`}</Text>
+ <Text style={styles.instructions}>Data</Text>
+ <Text style={styles.instructions}>{JSON.stringify(data, null, 2)}</Text>
+ </ScrollView>
  );
  }
 }
 
 const styles = StyleSheet.create({
  container: {
  flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF',
+ // justifyContent: 'center',
+ // alignItems: 'center',
+ backgroundColor: '#F5FCFF'
  },
  welcome: {
  fontSize: 20,
  textAlign: 'center',
- margin: 10,
+ margin: 10
  },
  instructions: {
  textAlign: 'center',
  color: '#333333',
- marginBottom: 5,
- },
+ marginBottom: 5
+ }
 });

App.js

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Roberto Achar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

LICENSE

@@ -0,0 +1,37 @@
+# react-native-fetch-abort-controller
+
+[![License][license-badge]][license-url]
+
+> React Native + fetch + Abort Controller
+
+# Development
+
+- Clone the repo
+
+```bash
+$ git clone https://github.com/robertoachar/react-native-fetch-abort-controller.git
+```
+
+- Install dependencies
+
+```bash
+$ npm install
+```
+
+- Run scripts
+
+| Action | Usage |
+| ---------------| ----------------- |
+| Run on Android | `npm run android` |
+| Run on iOS | `npm run ios` |
+
+# Author
+
+[Roberto Achar](https://twitter.com/robertoachar)
+
+# License
+
+[MIT](https://github.com/robertoachar/react-native-fetch-abort-controller/blob/master/LICENSE)
+
+[license-badge]: https://img.shields.io/github/license/robertoachar/react-native-fetch-abort-controller.svg
+[license-url]: https://opensource.org/licenses/MIT

README.md

@@ -1,9 +1,5 @@
-/**
- * @format
- */
-
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
+import { AppRegistry } from "react-native";
+import App from "./App";
+import { name as appName } from "./app.json";
 
 AppRegistry.registerComponent(appName, () => App);

index.js

@@ -1,17 +1,10 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
 module.exports = {
  transformer: {
  getTransformOptions: async () => ({
  transform: {
  experimentalImportSupport: false,
- inlineRequires: false,
- },
- }),
- },
+ inlineRequires: false
+ }
+ })
+ }
 };