Project2/App.js at master · HarvardX-React-Native/Project2 · 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
import 'react-native-gesture-handler';
import React from 'react';
import {
  StatusBar,
  StyleSheet,
  View,
  SafeAreaView,
  FlatList,
  Image,
  Text,
  TouchableHighlight,
} from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MovieList from './components/movieList';
import Movie from './components/movie';
import { searchMovies, getMovie } from './scripts/movieData';
import Icon from 'react-native-vector-icons/FontAwesome';

// Colour Theme
// #575b72
// white
// 827397
// d8b9c3

const tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <tab.Navigator
        initialRouteName={'View'}
        tabBarOptions={{
          style: { backgroundColor: '#353B43', borderTopColor: 'transparent' },
        }}>
        <tab.Screen
          name="Search"
          component={MovieList}
          initialParams={{
            movieData: searchMovies('Spider-Man'),
            searchFunction: searchMovies,
          }}
          options={{
            tabBarIcon: (c) => <Icon name="search" size={30} color="#fff" />,
          }}
        />

        <tab.Screen
          name="View"
          component={Movie}
          initialParams={{
            movie: 'Spider-Man',
            getFunction: getMovie,
          }}
          options={{
            tabBarIcon: (c) => (
              <Icon name="video-camera" size={30} color="#fff" />
            ),
          }}
        />

        <tab.Screen
          name="Settings"
          options={{
            tabBarIcon: (c) => <Icon name="sliders" size={30} color="#fff" />,
          }}
        />
      </tab.Navigator>
    </NavigationContainer>
  );
}