Add with-react-native example (#1607)

* Add with-react-native example

.gitignore

···
 tmp/
 dist/
 examples/*/public
-examples/*/yarn.lock
+examples/*/yarn.lock
+examples/*/ios/
+examples/*/android/
+examples/*/.watchmanconfig
+examples/*/metro.config.js
+examples/*/babel.config.js

examples/with-react-native/App.js

···
+import React from 'react';
+import { createClient, Provider } from 'urql';
+
+import PokemonList from './src/screens/PokemonList';
+
+const client = createClient({
+  url: 'https://trygql.dev/graphql/basic-pokedex',
+});
+
+const App = () => {
+  return (
+    <Provider value={client}>
+      <PokemonList />
+    </Provider>
+  );
+};
+
+export default App;

examples/with-react-native/README.md

···
+# Integrating with React Native
+
+Integrating urql is as simple as:
+
+1. Install packages [getting started](https://formidable.com/open-source/urql/docs/basics/react-preact/)
+
+```sh
+yarn add urql graphql
+# or
+npm install --save urql graphql
+```
+
+2. Setting up the Client [here](App.js)
+
+3. Execute the Query [here](src/screens/PokemonList.js)

examples/with-react-native/app.json

···
+{
+  "name": "withReactNative",
+  "displayName": "withReactNative"
+}

examples/with-react-native/index.js

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

examples/with-react-native/package.json

···
+{
+  "name": "withreactnative",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "graphql": "^15.5.0",
+    "react": "17.0.1",
+    "react-native": "0.64.0",
+    "urql": "^2.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/runtime": "^7.12.5",
+    "babel-jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.64.0"
+  }
+}

examples/with-react-native/src/screens/PokemonList.js

···
+import React from 'react';
+import { SafeAreaView, StyleSheet, Text, FlatList, View } from 'react-native';
+import { gql, useQuery } from 'urql';
+
+const POKEMONS_QUERY = gql`
+  query Pokemons {
+    pokemons(limit: 10) {
+      id
+      name
+    }
+  }
+`;
+
+const Item = ({ name }) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{name}</Text>
+  </View>
+);
+
+const PokemonList = () => {
+  const [result] = useQuery({ query: POKEMONS_QUERY });
+
+  const { data, fetching, error } = result;
+
+  const renderItem = ({ item }) => <Item name={item.name} />;
+
+  return (
+    <SafeAreaView style={styles.container}>
+      {fetching && <Text>Loading...</Text>}
+
+      {error && <Text>Oh no... {error.message}</Text>}
+
+      <FlatList
+        data={data?.pokemons}
+        renderItem={renderItem}
+        keyExtractor={item => item.id}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  item: {
+    backgroundColor: '#dadada',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 20,
+  },
+});
+
+export default PokemonList;