rickMortyGraphQL/App.js at master · muryj/rickMortyGraphQL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { ApolloClient, ApolloProvider } from '@apollo/client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import Heroes from './src/screens/Heroes';
import HeroDetails from './src/screens/HeroDetails';
import Episodes from './src/screens/Episodes';
import EpisodeDetails from './src/screens/EpisodeDetails';
import TabBarIcon from './src/components/TabBarIcon';

const HeroesStack = createStackNavigator({
  Heroes: {
    screen: Heroes,
    navigationOptions: () => ({
      title: 'Heroes',
      headerStyle: {
        backgroundColor: 'rgba(68, 108, 179, 1)',
      },
      headerTintColor: 'yellow'
    }),
  },
  HeroDetails: {
    screen: HeroDetails,
    navigationOptions: () => ({
      title: 'Hero Details',
      headerStyle: {
        backgroundColor: 'rgba(68, 108, 179, 1)',
      },
      headerTintColor: 'yellow'
    }),
  },
});

const EpisodesStack = createStackNavigator({
  Episodes: {
    screen: Episodes,
    navigationOptions: () => ({
      title: 'Episodes',
      headerStyle: {
        backgroundColor: 'rgba(68, 108, 179, 1)',
      },
      headerTintColor: 'yellow'
    }),
  },
  EpisodeDetails: {
    screen: EpisodeDetails,
    navigationOptions: () => ({
      title: 'Episode Details',
      headerStyle: {
        backgroundColor: 'rgba(68, 108, 179, 1)',
      },
      headerTintColor: 'yellow'
    }),
  },
  HeroDetails: {
    screen: HeroDetails,
    navigationOptions: () => ({
      title: 'Hero Details',
      headerStyle: {
        backgroundColor: 'rgba(68, 108, 179, 1)',
      },
      headerTintColor: 'yellow'
    }),
  },
});
const TabNavigator = createBottomTabNavigator({
  Episodes: {
    screen: EpisodesStack,
    navigationOptions: () => ({
      title: 'Episodes',
      tabBarIcon: ({ tintColor }) => <TabBarIcon name="episodes" color={tintColor} />
    }),
  },
  Heroes: {
    screen: HeroesStack,
    navigationOptions: () => ({
      title: 'Heroes',
      tabBarIcon: ({ tintColor }) => <TabBarIcon name="heroes" color={tintColor} />,
    }),
  }
}, {
  tabBarOptions: {
    style: {
      backgroundColor: 'rgba(245, 230, 83, 1)',
    }
  }
});

const Root = createAppContainer(TabNavigator);

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://rickandmortyapi.com/graphql/',
  }),
  cache: new InMemoryCache()
});

const App = () => (
  <ApolloProvider client={client}>
    <Root />
  </ApolloProvider>
);

export default App;