Guest User

Untitled

a guest
May 23rd, 2019
62
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