SHARE
TWEET

Untitled

a guest May 23rd, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {useState, useEffect} from 'react';
  2. import {StyleSheet, Text, View, Image} from 'react-native';
  3.  
  4. import { API, graphqlOperation } from 'aws-amplify'
  5.  
  6. const query = `
  7.   query listCharacters {
  8.     listCharacters {
  9.       items {
  10.         id name description avatar
  11.       }
  12.     }
  13.   }
  14. `
  15.  
  16. function App() {
  17.   const [characters, setCharacters] = useState([])
  18.  
  19.   async function fetchCharacters() {
  20.     try {
  21.       const gotData = await API.graphql(graphqlOperation(query))
  22.       setCharacters(gotData.data.listCharacters.items)
  23.     } catch (err) {
  24.       console.log({ err })
  25.     }
  26.   }
  27.  
  28.   useEffect(() => {
  29.     fetchCharacters()
  30.   }, [])
  31.  
  32.   return (
  33.     <View style={styles.container}>
  34.       <Text style={styles.welcome}>Welcome to React Native!</Text>
  35.       <Text style={styles.instructions}>To get started, edit App.js</Text>
  36.       {
  37.         characters.map((c, i) => (
  38.           <View>
  39.             <Image source={{uri: c.avatar}} />
  40.             <Text>{c.name}</Text>
  41.             <Text>{c.description}</Text>
  42.           </View>
  43.         ))
  44.       }
  45.     </View>
  46.   );
  47. }
  48.  
  49. export default App
  50.  
  51. const styles = StyleSheet.create({
  52.   container: {
  53.     flex: 1,
  54.     justifyContent: 'center',
  55.     alignItems: 'center',
  56.     backgroundColor: '#F5FCFF',
  57.   },
  58.   welcome: {
  59.     fontSize: 20,
  60.     textAlign: 'center',
  61.     margin: 10,
  62.   },
  63.   instructions: {
  64.     textAlign: 'center',
  65.     color: '#333333',
  66.     marginBottom: 5,
  67.   },
  68. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top