├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── app.json
├── apps
    ├── reviews-app
    │   ├── ReviewsApp.js
    │   ├── pages
    │   │   ├── Home.js
    │   │   └── ReviewDetails.js
    │   └── styles
    │   │   └── globalStyles.js
    └── todos-app
    │   ├── TodosApp.js
    │   ├── components
    │       ├── AddTask.js
    │       ├── Header.js
    │       └── List.js
    │   └── pages
    │       └── Todos.js
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── fonts
    │   ├── Beatrice.ttf
    │   ├── Beatrice_Bold.ttf
    │   └── Beatrice_Bold_Italic.ttf
    ├── icon.png
    └── splash.png
├── babel.config.js
└── package-lock.json


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | import { useFonts } from "expo-font"
 4 | import TodosApp from "./apps/todos-app/TodosApp"
 5 | import ReviewsApp from "./apps/reviews-app/ReviewsApp"
 6 | 
 7 | const App = () => {
 8 | 	const [fontsLoaded] = useFonts({
 9 | 		Beatrice: require("./assets/fonts/Beatrice.ttf"),
10 | 		"Beatrice Bold": require("./assets/fonts/Beatrice_Bold.ttf"),
11 | 		"Beatrice Bold Italic": require("./assets/fonts/Beatrice_Bold_Italic.ttf"),
12 | 	})
13 | 
14 | 	if (!fontsLoaded) return null
15 | 
16 | 	// return <TodosApp />
17 | 	return <ReviewsApp />
18 | }
19 | 
20 | export default App
21 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "rev-mobile-app",
 4 |     "slug": "rev-mobile-app",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "userInterfaceStyle": "light",
 9 |     "splash": {
10 |       "image": "./assets/splash.png",
11 |       "resizeMode": "contain",
12 |       "backgroundColor": "#ffffff"
13 |     },
14 |     "updates": {
15 |       "fallbackToCacheTimeout": 0
16 |     },
17 |     "assetBundlePatterns": [
18 |       "**/*"
19 |     ],
20 |     "ios": {
21 |       "supportsTablet": true
22 |     },
23 |     "android": {
24 |       "adaptiveIcon": {
25 |         "foregroundImage": "./assets/adaptive-icon.png",
26 |         "backgroundColor": "#FFFFFF"
27 |       }
28 |     },
29 |     "web": {
30 |       "favicon": "./assets/favicon.png"
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/apps/reviews-app/ReviewsApp.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { NavigationContainer } from "@react-navigation/native"
 3 | import { createNativeStackNavigator } from "@react-navigation/native-stack"
 4 | import Home from "./pages/Home"
 5 | import ReviewDetails from "./pages/ReviewDetails"
 6 | import { ContainerView, TitleText } from "./styles/globalStyles"
 7 | 
 8 | const Stack = createNativeStackNavigator()
 9 | 
10 | const options = {
11 | 	headerStyle: {
12 | 		backgroundColor: "#592be3",
13 | 		height: 1000,
14 | 	},
15 | 	headerTintColor: "#fff",
16 | 	headerTitleStyle: {
17 | 		fontWeight: "bold",
18 | 	},
19 | }
20 | 
21 | const HeaderTile = (props) => {
22 | 	return (
23 | 		<TitleText>
24 | 			{props.route ? props.route.params.title : props.children}
25 | 		</TitleText>
26 | 	)
27 | }
28 | 
29 | const ReviewsApp = () => {
30 | 	return (
31 | 		<NavigationContainer>
32 | 			<Stack.Navigator screenOptions={{ ...options }}>
33 | 				<Stack.Screen
34 | 					name="Home"
35 | 					component={Home}
36 | 					options={{
37 | 						headerTitle: (props) => <HeaderTile {...props} />,
38 | 					}}
39 | 				/>
40 | 				<Stack.Screen
41 | 					name="Review Details"
42 | 					component={ReviewDetails}
43 | 					options={({ route }) => ({
44 | 						headerTitle: (props) => <HeaderTile route={route} {...props} />,
45 | 					})}
46 | 				/>
47 | 			</Stack.Navigator>
48 | 		</NavigationContainer>
49 | 	)
50 | }
51 | 
52 | export default ReviewsApp
53 | 


--------------------------------------------------------------------------------
/apps/reviews-app/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react"
 2 | import { Button, FlatList, TouchableOpacity } from "react-native"
 3 | import { ContainerView, TitleText, BodyText } from "../styles/globalStyles"
 4 | 
 5 | const Home = ({ navigation }) => {
 6 | 	const [reviews, setReviews] = useState([
 7 | 		{ title: "Sniper Revolution", rating: 3, body: "Lorem ipsum", key: "1" },
 8 | 		{ title: "Game of Thrones", rating: 5, body: "Lorem ipsum", key: "2" },
 9 | 		{ title: "Last Kingdom", rating: 4, body: "Lorem ipsum", key: "3" },
10 | 	])
11 | 
12 | 	return (
13 | 		<ContainerView>
14 | 			<FlatList
15 | 				data={reviews}
16 | 				renderItem={({ item }) => (
17 | 					<TouchableOpacity
18 | 						onPress={() => navigation.navigate("Review Details", item)}
19 | 					>
20 | 						<BodyText> {item.title} </BodyText>
21 | 					</TouchableOpacity>
22 | 				)}
23 | 			/>
24 | 		</ContainerView>
25 | 	)
26 | }
27 | 
28 | export default Home
29 | 


--------------------------------------------------------------------------------
/apps/reviews-app/pages/ReviewDetails.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { ContainerView, TitleText, BodyText } from "../styles/globalStyles"
 3 | 
 4 | const ReviewDetails = ({ route }) => {
 5 | 	const { title, body } = route.params
 6 | 
 7 | 	return (
 8 | 		<ContainerView>
 9 | 			<BodyText> {body}</BodyText>
10 | 		</ContainerView>
11 | 	)
12 | }
13 | 
14 | export default ReviewDetails
15 | 


--------------------------------------------------------------------------------
/apps/reviews-app/styles/globalStyles.js:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components/native"
 2 | import { View, Text } from "react-native"
 3 | 
 4 | export const TitleText = styled(Text)`
 5 | 	font-family: "Beatrice Bold";
 6 | 	font-size: 18px;
 7 | 	color: #fff;
 8 | `
 9 | 
10 | export const BodyText = styled(Text)`
11 | 	font-family: "Beatrice";
12 | `
13 | 
14 | export const ContainerView = styled(View)`
15 | 	flex: 1;
16 | 	padding: 24px;
17 | `
18 | 


--------------------------------------------------------------------------------
/apps/todos-app/TodosApp.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import {
 3 | 	StyleSheet,
 4 | 	View,
 5 | 	TouchableWithoutFeedback,
 6 | 	Keyboard,
 7 | } from "react-native"
 8 | import Todos from "./pages/Todos"
 9 | 
10 | const TodosApp = () => {
11 | 	return (
12 | 		<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
13 | 			<View style={styles.container}>
14 | 				<Todos />
15 | 			</View>
16 | 		</TouchableWithoutFeedback>
17 | 	)
18 | }
19 | 
20 | const styles = StyleSheet.create({
21 | 	container: {
22 | 		flex: 1,
23 | 		backgroundColor: "#fff",
24 | 		alignItems: "center",
25 | 		// justifyContent: "center",
26 | 	},
27 | })
28 | 
29 | export default TodosApp
30 | 


--------------------------------------------------------------------------------
/apps/todos-app/components/AddTask.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react"
 2 | import styled from "styled-components/native"
 3 | 
 4 | import { View, TextInput, Button } from "react-native"
 5 | 
 6 | const Container = styled(View)`
 7 | 	display: flex;
 8 | 	margin: 10px 0px 30px;
 9 | `
10 | 
11 | const Input = styled(TextInput)`
12 | 	border: 1px solid #592be3;
13 | 	border-radius: 8px;
14 | 	height: 48px;
15 | 	padding: 10px;
16 | 	margin: 10px 0px;
17 | `
18 | 
19 | const AddButton = styled(Button)`
20 | 	padding: 16px;
21 | 	height: 48px;
22 | `
23 | 
24 | const AddTask = ({ value, onChangeText, onPress }) => {
25 | 	return (
26 | 		<Container>
27 | 			<Input
28 | 				placeholder="Enter new task"
29 | 				value={value}
30 | 				onChangeText={onChangeText}
31 | 			/>
32 | 			<AddButton title="Add task" onPress={() => onPress(value)} />
33 | 		</Container>
34 | 	)
35 | }
36 | 
37 | export default AddTask
38 | 


--------------------------------------------------------------------------------
/apps/todos-app/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import styled from "styled-components/native"
 3 | import { Text, View, SafeAreaView } from "react-native"
 4 | 
 5 | const Container = styled(View)`
 6 | 	width: 100%;
 7 | 	padding-top: 30px;
 8 | 	padding-bottom: 20px;
 9 | 	background-color: #592be3;
10 | `
11 | 
12 | const HeaderText = styled(Text)`
13 | 	font-weight: 700;
14 | 	font-size: 20px;
15 | 	text-align: center;
16 | 	color: #fff;
17 | `
18 | 
19 | const Header = () => {
20 | 	return (
21 | 		<Container>
22 | 			<SafeAreaView>
23 | 				<HeaderText> React Native App </HeaderText>
24 | 			</SafeAreaView>
25 | 		</Container>
26 | 	)
27 | }
28 | 
29 | export default Header
30 | 


--------------------------------------------------------------------------------
/apps/todos-app/components/List.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import styled from "styled-components/native"
 3 | import { View, FlatList, Text, TouchableOpacity } from "react-native"
 4 | import { MaterialIcons } from "@expo/vector-icons"
 5 | 
 6 | const ListContainer = styled(View)`
 7 | 	display: flex;
 8 | 	flex-direction: row;
 9 | 	align-items: center;
10 | 	padding: 16px;
11 | 	background-color: #ebebed;
12 | 	margin: 5px 0px;
13 | 	border-radius: 8px;
14 | 	overflow: hidden;
15 | `
16 | 
17 | const ListItem = styled(Text)`
18 | 	margin-left: 12px;
19 | `
20 | 
21 | const Container = styled(View)`
22 | 	flex: 1;
23 | `
24 | 
25 | const Item = ({ item, onPress }) => {
26 | 	return (
27 | 		<TouchableOpacity onPress={() => onPress(item)}>
28 | 			<ListContainer>
29 | 				<MaterialIcons
30 | 					name="radio-button-unchecked"
31 | 					size={18}
32 | 					color="#592be3"
33 | 				/>
34 | 				<ListItem>{item.text}</ListItem>
35 | 			</ListContainer>
36 | 		</TouchableOpacity>
37 | 	)
38 | }
39 | 
40 | const List = ({ list, onPress }) => {
41 | 	return (
42 | 		<Container>
43 | 			<FlatList
44 | 				data={list}
45 | 				renderItem={({ item }) => <Item item={item} onPress={onPress} />}
46 | 			/>
47 | 		</Container>
48 | 	)
49 | }
50 | 
51 | export default List
52 | 


--------------------------------------------------------------------------------
/apps/todos-app/pages/Todos.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react"
 2 | import styled from "styled-components/native"
 3 | import { View, Alert } from "react-native"
 4 | 
 5 | import Header from "../components/Header"
 6 | import List from "../components/List"
 7 | import AddTask from "../components/AddTask"
 8 | 
 9 | const Container = styled(View)`
10 | 	flex: 1;
11 | 	width: 100%;
12 | `
13 | 
14 | const Body = styled(View)`
15 | 	flex: 1;
16 | 	padding: 10px 16px;
17 | `
18 | 
19 | const Todos = () => {
20 | 	const [newTask, setNewTask] = useState("")
21 | 	const [todos, setTodos] = useState([
22 | 		{ text: "Buy Coffee", id: 1 },
23 | 		{ text: "Finish GraphQL course", id: 2 },
24 | 		{ text: "Visit grandparents", id: 3 },
25 | 		{ text: "Create landing page", id: 4 },
26 | 		{ text: "Watch football match", id: 5 },
27 | 	])
28 | 
29 | 	const handleChangeText = (value) => {
30 | 		setNewTask(value)
31 | 	}
32 | 
33 | 	const handleRemoveTask = (item) => {
34 | 		setTodos((prevTodos) =>
35 | 			prevTodos.filter((todo) => todo.id != item.id && todo.text != item.text)
36 | 		)
37 | 	}
38 | 
39 | 	const handleAddTask = (value) => {
40 | 		if (value.length > 3) {
41 | 			setTodos((prevTodos) => {
42 | 				const id = Math.random()
43 | 				return [{ text: value, id }, ...prevTodos]
44 | 			})
45 | 			setNewTask("")
46 | 		} else {
47 | 			Alert.alert(
48 | 				"NOT LONG ENOUGH",
49 | 				"You need to enter more than 3 characters to create task",
50 | 				[{ text: "Close" }]
51 | 			)
52 | 		}
53 | 	}
54 | 
55 | 	return (
56 | 		<Container>
57 | 			<Header />
58 | 			<Body>
59 | 				<AddTask
60 | 					value={newTask}
61 | 					onChangeText={handleChangeText}
62 | 					onPress={handleAddTask}
63 | 				/>
64 | 				<List list={todos} onPress={handleRemoveTask} />
65 | 			</Body>
66 | 		</Container>
67 | 	)
68 | }
69 | 
70 | export default Todos
71 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/favicon.png


--------------------------------------------------------------------------------
/assets/fonts/Beatrice.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/fonts/Beatrice.ttf


--------------------------------------------------------------------------------
/assets/fonts/Beatrice_Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/fonts/Beatrice_Bold.ttf


--------------------------------------------------------------------------------
/assets/fonts/Beatrice_Bold_Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/fonts/Beatrice_Bold_Italic.ttf


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cooperevans-dev/rev-mobile-app/038b4d23fab615074b0fd3b03ab910bea15418c9/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------