├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── favicon.png
    ├── fonts
    │   ├── Roboto-Bold.ttf
    │   └── Roboto-Regular.ttf
    ├── icon.png
    └── splash.png
├── babel.config.js
├── package.json
├── src
    ├── components
    │   ├── AppHeaderIcon.js
    │   ├── PhotoPicker.js
    │   ├── Post.js
    │   └── PostList.js
    ├── db.js
    ├── fonts.js
    ├── navigations
    │   └── AppNavigation.js
    ├── screens
    │   ├── AboutScreen.js
    │   ├── BookmarkedScreen.js
    │   ├── CreateScreen.js
    │   ├── MainScreen.js
    │   └── PostScreen.js
    ├── store
    │   ├── actions
    │   │   └── postAction.js
    │   ├── index.js
    │   ├── reducers
    │   │   └── postReducer.js
    │   └── types.js
    └── theme.js
└── yarn.lock


/.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 { useState } from 'react'
 2 | import AppLoading from 'expo-app-loading'
 3 | import { AppNavigation } from './src/navigations/AppNavigation'
 4 | import { Provider } from 'react-redux'
 5 | import { fonts } from './src/fonts'
 6 | import store from './src/store'
 7 | 
 8 | export default function App() {
 9 |   const [isReady, setIsReady] = useState(false)
10 | 
11 |   if (!isReady) {
12 |     return (
13 |       <AppLoading
14 |         startAsync={fonts}
15 |         onFinish={() => setIsReady(true)}
16 |         onError={error => console.log(error)}
17 |       />
18 |     )
19 |   }
20 | 
21 |   return <Provider store={store}><AppNavigation /></Provider>
22 | }
23 | 


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


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrey-kudinov/react-native-blog/1fec089179f9aee86bc25aef1ea7f493e8b6307b/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrey-kudinov/react-native-blog/1fec089179f9aee86bc25aef1ea7f493e8b6307b/assets/favicon.png


--------------------------------------------------------------------------------
/assets/fonts/Roboto-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrey-kudinov/react-native-blog/1fec089179f9aee86bc25aef1ea7f493e8b6307b/assets/fonts/Roboto-Bold.ttf


--------------------------------------------------------------------------------
/assets/fonts/Roboto-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrey-kudinov/react-native-blog/1fec089179f9aee86bc25aef1ea7f493e8b6307b/assets/fonts/Roboto-Regular.ttf


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrey-kudinov/react-native-blog/1fec089179f9aee86bc25aef1ea7f493e8b6307b/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrey-kudinov/react-native-blog/1fec089179f9aee86bc25aef1ea7f493e8b6307b/assets/splash.png


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-blog",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "eject": "expo eject"
11 |   },
12 |   "dependencies": {
13 |     "@expo/vector-icons": "^12.0.5",
14 |     "@react-native-community/masked-view": "^0.1.11",
15 |     "expo": "~44.0.0",
16 |     "expo-app-loading": "^1.3.0",
17 |     "expo-file-system": "~13.1.0",
18 |     "expo-font": "^10.0.4",
19 |     "expo-image-picker": "~12.0.1",
20 |     "expo-sqlite": "~10.1.0",
21 |     "expo-status-bar": "~1.2.0",
22 |     "react": "17.0.1",
23 |     "react-dom": "17.0.1",
24 |     "react-native": "0.64.3",
25 |     "react-native-gesture-handler": "~2.1.0",
26 |     "react-native-paper": "^4.11.1",
27 |     "react-native-reanimated": "2.1.0",
28 |     "react-native-safe-area-context": "3.3.2",
29 |     "react-native-screens": "~3.10.1",
30 |     "react-native-web": "0.17.1",
31 |     "react-navigation": "^4.4.4",
32 |     "react-navigation-drawer": "^2.7.1",
33 |     "react-navigation-header-buttons": "4.0.3",
34 |     "react-navigation-material-bottom-tabs": "^2.3.4",
35 |     "react-navigation-stack": "^2.10.4",
36 |     "react-navigation-tabs": "^2.11.1",
37 |     "react-redux": "^7.2.6",
38 |     "redux": "^4.1.2",
39 |     "redux-thunk": "^2.4.1"
40 |   },
41 |   "devDependencies": {
42 |     "@babel/core": "^7.12.9"
43 |   },
44 |   "private": true
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/AppHeaderIcon.js:
--------------------------------------------------------------------------------
 1 | import { Platform } from 'react-native'
 2 | import { HeaderButton } from 'react-navigation-header-buttons'
 3 | import { Ionicons } from '@expo/vector-icons'
 4 | import { THEME } from '../theme'
 5 | 
 6 | export const AppHeaderIcon = props => (
 7 |   <HeaderButton
 8 |     {...props}
 9 |     iconSize={24}
10 |     IconComponent={Ionicons}
11 |     color={Platform.OS === 'android' ? 'white' : THEME.MAIN_COLOR}
12 |   />
13 | )
14 | 


--------------------------------------------------------------------------------
/src/components/PhotoPicker.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { StyleSheet, Button, Image, View, Alert } from 'react-native'
 3 | import * as ImagePicker from 'expo-image-picker'
 4 | 
 5 | export const PhotoPicker = ({ onPick }) => {
 6 |   const [image, setImage] = useState(null)
 7 | 
 8 |   const handlePickImage = async () => {
 9 |     let result = await ImagePicker.launchImageLibraryAsync({
10 |       mediaTypes: ImagePicker.MediaTypeOptions.All,
11 |       allowsEditing: false,
12 |       aspect: [16, 9],
13 |       quality: 1
14 |     })
15 | 
16 |     if (!result.cancelled) {
17 |       setImage(result.uri)
18 |       onPick(result.uri)
19 |     }
20 |   }
21 | 
22 |   return (
23 |     <View style={styles.wrapper}>
24 |       <Button title='Take a photo' onPress={handlePickImage} />
25 |       {image && <Image style={styles.image} source={{ uri: image }} />}
26 |     </View>
27 |   )
28 | }
29 | 
30 | const styles = StyleSheet.create({
31 |   wrapper: {
32 |     marginBottom: 30
33 |   },
34 |   image: {
35 |     width: '100%',
36 |     height: 200,
37 |     marginTop: 10
38 |   }
39 | })
40 | 


--------------------------------------------------------------------------------
/src/components/Post.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   View,
 3 |   StyleSheet,
 4 |   ImageBackground,
 5 |   Text,
 6 |   TouchableOpacity
 7 | } from 'react-native'
 8 | 
 9 | export const Post = ({ post, onOpen }) => {
10 |   return (
11 |     <TouchableOpacity activeOpacity={0.7} onPress={() => onOpen(post)}>
12 |       <View style={styles.post}>
13 |         <ImageBackground style={styles.image} source={{ uri: post.img }}>
14 |           <View style={styles.titleWrap}>
15 |             <Text style={styles.title}>
16 |               {new Date(post.date).toLocaleDateString()}
17 |             </Text>
18 |           </View>
19 |         </ImageBackground>
20 |       </View>
21 |     </TouchableOpacity>
22 |   )
23 | }
24 | 
25 | const styles = StyleSheet.create({
26 |   post: {
27 |     marginBottom: 15,
28 |     overflow: 'hidden'
29 |   },
30 |   image: {
31 |     width: '100%',
32 |     height: 200
33 |   },
34 |   titleWrap: {
35 |     paddingVertical: 5,
36 |     alignItems: 'center',
37 |     width: '100%',
38 |     backgroundColor: 'rgba(0, 0, 0, 0.5)'
39 |   },
40 |   title: {
41 |     color: 'white',
42 |     fontFamily: 'roboto'
43 |   }
44 | })
45 | 


--------------------------------------------------------------------------------
/src/components/PostList.js:
--------------------------------------------------------------------------------
 1 | import { View, StyleSheet, FlatList, Text } from 'react-native'
 2 | import { Post } from './Post'
 3 | 
 4 | export const PostList = ({ data = [], onOpen }) => {
 5 |   if (!data.length) {
 6 |     return (
 7 |       <View style={styles.wrapper}>
 8 |         <Text style={styles.text}>No items</Text>
 9 |       </View>
10 |     )
11 |   }
12 | 
13 |   return (
14 |     <View style={styles.wrapper}>
15 |       <FlatList
16 |         data={data}
17 |         keyExtractor={post => post.id}
18 |         renderItem={({ item }) => <Post post={item} onOpen={onOpen} />}
19 |       />
20 |     </View>
21 |   )
22 | }
23 | 
24 | const styles = StyleSheet.create({
25 |   wrapper: {
26 |     padding: 10,
27 |     flex: 1
28 |   },
29 |   text: {
30 |     fontFamily: 'roboto',
31 |     textAlign: 'center',
32 |     marginVertical: 10,
33 |     fontSize: 18,
34 |   }
35 | })
36 | 


--------------------------------------------------------------------------------
/src/db.js:
--------------------------------------------------------------------------------
 1 | import * as SQLite from 'expo-sqlite'
 2 | 
 3 | const db = SQLite.openDatabase('post.db')
 4 | 
 5 | export class DB {
 6 |   static init() {
 7 |     return new Promise((resolve, reject) => {
 8 |       db.transaction(tx => {
 9 |         tx.executeSql(
10 |           'CREATE TABLE IF NOT EXISTS posts (id INTEGER PRIMARY KEY NOT NULL, text TEXT NOT NULL, img TEXT, date TEXT, bookmarked INT)',
11 |           [],
12 |           resolve,
13 |           (_, error) => reject(error)
14 |         )
15 |       })
16 |     })
17 |   }
18 | 
19 |   static getPosts() {
20 |     return new Promise((resolve, reject) => {
21 |       db.transaction(tx => {
22 |         tx.executeSql(
23 |           'SELECT * FROM posts',
24 |           [],
25 |           (_, result) => resolve(result.rows._array),
26 |           (_, error) => reject(error)
27 |         )
28 |       })
29 |     })
30 |   }
31 | 
32 |   static createPost({text, date, bookmarked, img}) {
33 |     return new Promise((resolve, reject) => {
34 |       db.transaction(tx => {
35 |         tx.executeSql(
36 |           'INSERT INTO posts (text, date, bookmarked, img) VALUES (?, ?, ?, ?)',
37 |           [text, date, 0, img],
38 |           (_, result) => resolve(result.insertId),
39 |           (_, error) => reject(error)
40 |         )
41 |       })
42 |     })
43 |   }
44 | 
45 |   static updatePost(post) {
46 |     return new Promise((resolve, reject) => {
47 |       db.transaction(tx => {
48 |         tx.executeSql(
49 |           `UPDATE posts SET bookmarked = ? WHERE id = ?`,
50 |           [post.bookmarked ? 0 : 1, post.id],
51 |           resolve,
52 |           (_, error) => reject(error)
53 |         )
54 |       })
55 |     })
56 |   }
57 | 
58 |   static removePost(id) {
59 |     return new Promise((resolve, reject) => {
60 |       db.transaction(tx => {
61 |         tx.executeSql(
62 |           `DELETE FROM posts WHERE id = ?`,
63 |           [id],
64 |           resolve,
65 |           (_, error) => reject(error)
66 |         )
67 |       })
68 |     })
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/fonts.js:
--------------------------------------------------------------------------------
 1 | import * as Font from 'expo-font'
 2 | import { DB } from './db'
 3 | 
 4 | export const fonts = async () => {
 5 |   try {
 6 |     await Font.loadAsync({
 7 |       roboto: require('../assets/fonts/Roboto-Regular.ttf'),
 8 |       'roboto-bold': require('../assets/fonts/Roboto-Bold.ttf')
 9 |     })
10 | 
11 |     await DB.init()
12 |     console.log('Database starting...')
13 |   } catch (error) {
14 |     console.log('Error -', error)
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/navigations/AppNavigation.js:
--------------------------------------------------------------------------------
  1 | import { Platform } from 'react-native'
  2 | import { createAppContainer } from 'react-navigation'
  3 | import { createStackNavigator } from 'react-navigation-stack'
  4 | import { createBottomTabNavigator } from 'react-navigation-tabs'
  5 | import { Ionicons } from '@expo/vector-icons'
  6 | import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'
  7 | import { createDrawerNavigator } from 'react-navigation-drawer'
  8 | import { MainScreen } from '../screens/MainScreen'
  9 | import { PostScreen } from '../screens/PostScreen'
 10 | import { AboutScreen } from '../screens/AboutScreen'
 11 | import { CreateScreen } from '../screens/CreateScreen'
 12 | import { BookmarkedScreen } from '../screens/BookmarkedScreen'
 13 | import { THEME } from '../theme'
 14 | 
 15 | const navigatorOptions = {
 16 |   headerStyle: {
 17 |     backgroundColor: Platform === 'android' ? THEME.MAIN_COLOR : 'white'
 18 |   },
 19 |   headerTintColor: Platform === 'android' ? 'white' : THEME.MAIN_COLOR,
 20 |   headerTitleStyle: {
 21 |     fontFamily: 'roboto-bold'
 22 |   }
 23 | }
 24 | 
 25 | const PostNavigator = createStackNavigator(
 26 |   {
 27 |     Blog: MainScreen,
 28 |     Post: {
 29 |       screen: PostScreen
 30 |     }
 31 |   },
 32 |   {
 33 |     initialRouteName: 'Blog',
 34 |     defaultNavigationOptions: navigatorOptions
 35 |   }
 36 | )
 37 | 
 38 | const BookmarkedNavigator = createStackNavigator(
 39 |   {
 40 |     BookmarkedScreen: BookmarkedScreen,
 41 |     'Post 2': PostScreen
 42 |   },
 43 |   {
 44 |     defaultNavigationOptions: navigatorOptions
 45 |   }
 46 | )
 47 | 
 48 | const bottomTabsConfig = {
 49 |   Posts: {
 50 |     screen: PostNavigator,
 51 |     navigationOptions: {
 52 |       tabBarLabel: 'Main',
 53 |       tabBarIcon: info => (
 54 |         <Ionicons name='ios-albums' size={25} color={info.tintColor} />
 55 |       )
 56 |     }
 57 |   },
 58 |   Bookmarked: {
 59 |     screen: BookmarkedNavigator,
 60 |     navigationOptions: {
 61 |       tabBarLabel: 'Bookmarks',
 62 |       tabBarIcon: info => (
 63 |         <Ionicons name='ios-star' size={25} color={info.tintColor} />
 64 |       )
 65 |     }
 66 |   }
 67 | }
 68 | 
 69 | const BottomNavigator =
 70 |   Platform.OS === 'android'
 71 |     ? createMaterialBottomTabNavigator(bottomTabsConfig, {
 72 |         activeColor: 'white',
 73 |         barStyle: {
 74 |           backgroundColor: THEME.MAIN_COLOR
 75 |         },
 76 |         shifting: true
 77 |       })
 78 |     : createBottomTabNavigator(bottomTabsConfig, {
 79 |         tabBarOptions: {
 80 |           activeTintColor: THEME.MAIN_COLOR
 81 |         }
 82 |       })
 83 | 
 84 | const CreateNavigator = createStackNavigator(
 85 |   {
 86 |     'Create Post': CreateScreen
 87 |   },
 88 |   {
 89 |     defaultNavigationOptions: navigatorOptions
 90 |   }
 91 | )
 92 | 
 93 | const AboutNavigator = createStackNavigator(
 94 |   {
 95 |     About: AboutScreen
 96 |   },
 97 |   {
 98 |     defaultNavigationOptions: navigatorOptions
 99 |   }
100 | )
101 | 
102 | const MainNavigator = createDrawerNavigator(
103 |   {
104 |     Blog: {
105 |       screen: BottomNavigator,
106 |       navigationOptions: {
107 |         drawerLabel: 'Posts',
108 |         drawerIcon: <Ionicons name='home' size={20} color={THEME.MAIN_COLOR} />
109 |       }
110 |     },
111 |     About: {
112 |       screen: AboutNavigator
113 |     },
114 |     'Create Post': CreateNavigator
115 |   },
116 |   {
117 |     contentOptions: {
118 |       activeTintColor: THEME.MAIN_COLOR,
119 |       labelStyle: {
120 |         fontFamily: 'roboto-bold'
121 |       }
122 |     }
123 |   }
124 | )
125 | 
126 | export const AppNavigation = createAppContainer(MainNavigator)
127 | 


--------------------------------------------------------------------------------
/src/screens/AboutScreen.js:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, Text, View } from 'react-native'
 2 | import { HeaderButtons, Item } from 'react-navigation-header-buttons'
 3 | import { AppHeaderIcon } from '../components/AppHeaderIcon'
 4 | 
 5 | export const AboutScreen = () => {
 6 |   return (
 7 |     <View style={styles.wrapper}>
 8 |       <Text>AboutScreen</Text>
 9 |     </View>
10 |   )
11 | }
12 | 
13 | AboutScreen.navigationOptions = ({ navigation }) => ({
14 |   headerLeft: () => (
15 |     <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
16 |       <Item
17 |         title='Menu'
18 |         iconName='ios-menu'
19 |         onPress={() => navigation.toggleDrawer()}
20 |       />
21 |     </HeaderButtons>
22 |   )
23 | })
24 | 
25 | const styles = StyleSheet.create({
26 |   wrapper: {
27 |     flex: 1,
28 |     alignItems: 'center',
29 |     justifyContent: 'center'
30 |   }
31 | })
32 | 


--------------------------------------------------------------------------------
/src/screens/BookmarkedScreen.js:
--------------------------------------------------------------------------------
 1 | import { HeaderButtons, Item } from 'react-navigation-header-buttons'
 2 | import { useSelector } from 'react-redux'
 3 | import { AppHeaderIcon } from '../components/AppHeaderIcon'
 4 | import { PostList } from '../components/PostList'
 5 | 
 6 | export const BookmarkedScreen = ({ navigation }) => {
 7 |   const bookmarkedPosts = useSelector(state => state.blog.bookmarkedPosts)
 8 | 
 9 |   const handleOpenPost = post => {
10 |     navigation.navigate('Post', {
11 |       postId: post.id,
12 |       date: post.date,
13 |       bookmarked: post.bookmarked
14 |     })
15 |   }
16 | 
17 |   return <PostList data={bookmarkedPosts} onOpen={handleOpenPost} />
18 | }
19 | 
20 | BookmarkedScreen.navigationOptions = ({navigation}) => ({
21 |   title: 'Bookmarked',
22 |   headerLeft: () => (
23 |     <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
24 |       <Item
25 |         title='Menu'
26 |         iconName='ios-menu'
27 |         onPress={() => navigation.toggleDrawer()}
28 |       />
29 |     </HeaderButtons>
30 |   )
31 | })
32 | 


--------------------------------------------------------------------------------
/src/screens/CreateScreen.js:
--------------------------------------------------------------------------------
 1 | import { useState, useRef } from 'react'
 2 | import {
 3 |   StyleSheet,
 4 |   Text,
 5 |   View,
 6 |   TextInput,
 7 |   Image,
 8 |   Button,
 9 |   ScrollView,
10 |   // TouchableWithoutFeedback,
11 |   // Keyboard
12 | } from 'react-native'
13 | import { HeaderButtons, Item } from 'react-navigation-header-buttons'
14 | import { useDispatch } from 'react-redux'
15 | import { AppHeaderIcon } from '../components/AppHeaderIcon'
16 | import { PhotoPicker } from '../components/PhotoPicker'
17 | import { addPost } from '../store/actions/postAction'
18 | import { THEME } from '../theme'
19 | 
20 | export const CreateScreen = ({navigation}) => {
21 |   const [text, setText] = useState('')
22 |   const [img, setImg] = useState('')
23 |   const dispatch = useDispatch()
24 |   const imgRef = useRef()
25 | 
26 |   const handleCreate = () => {
27 |     const post = {
28 |       date: new Date().toJSON(),
29 |       text,
30 |       img,
31 |       bookmarked: false
32 |     }
33 |     dispatch(addPost(post))
34 |     navigation.navigate('Blog')
35 |   }
36 | 
37 |   const photoPickHandler = uri => {
38 |     setImg(uri)
39 |   }
40 | 
41 |   return (
42 |     <ScrollView>
43 |       {/* <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}> */}
44 |         <View style={styles.wrapper}>
45 |           <Text style={styles.title}>CreateScreen</Text>
46 |           <TextInput
47 |             style={styles.textarea}
48 |             placeholder='Type here...'
49 |             value={text}
50 |             onChangeText={setText}
51 |             multiline
52 |             numberOfLines={4}
53 |           />
54 | 
55 |           <PhotoPicker onPick={photoPickHandler}/>
56 | 
57 |           <Button
58 |             title='Create Post'
59 |             color={THEME.MAIN_COLOR}
60 |             onPress={handleCreate}
61 |             disabled={!text}
62 |           />
63 |         </View>
64 |       {/* </TouchableWithoutFeedback> */}
65 |     </ScrollView>
66 |   )
67 | }
68 | 
69 | CreateScreen.navigationOptions = ({ navigation }) => ({
70 |   headerLeft: () => (
71 |     <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
72 |       <Item
73 |         title='Menu'
74 |         iconName='ios-menu'
75 |         onPress={() => navigation.toggleDrawer()}
76 |       />
77 |     </HeaderButtons>
78 |   )
79 | })
80 | 
81 | const styles = StyleSheet.create({
82 |   wrapper: {
83 |     padding: 10
84 |   },
85 |   title: {
86 |     paddingVertical: 10,
87 |     fontSize: 20,
88 |     textAlign: 'center',
89 |     fontFamily: 'roboto'
90 |   },
91 |   textarea: {
92 |     padding: 10,
93 |     marginBottom: 10
94 |   }
95 | })
96 | 


--------------------------------------------------------------------------------
/src/screens/MainScreen.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { View, StyleSheet, ActivityIndicator } from 'react-native'
 3 | import { useDispatch, useSelector } from 'react-redux'
 4 | import { HeaderButtons, Item } from 'react-navigation-header-buttons'
 5 | import { AppHeaderIcon } from '../components/AppHeaderIcon'
 6 | import { PostList } from '../components/PostList'
 7 | import { loadPosts } from '../store/actions/postAction'
 8 | import { THEME } from '../theme'
 9 | 
10 | export const MainScreen = ({ navigation }) => {
11 |   const dispatch = useDispatch()
12 | 
13 |   useEffect(() => {
14 |     dispatch(loadPosts())
15 |   }, [dispatch])
16 | 
17 |   const posts = useSelector(state => state.blog.posts)
18 |   const loading = useSelector(state => state.blog.loading)
19 | 
20 |   const handleOpenPost = post => {
21 |     navigation.navigate('Post', {
22 |       postId: post.id,
23 |       date: post.date,
24 |       bookmarked: post.bookmarked
25 |     })
26 |   }
27 | 
28 |   if (loading) {
29 |     return (
30 |       <View style={styles.wrapper}>
31 |         <ActivityIndicator color={THEME.MAIN_COLOR}/>
32 |       </View>
33 |     )
34 |   }
35 | 
36 |   return <PostList data={posts} onOpen={handleOpenPost} />
37 | }
38 | 
39 | MainScreen.navigationOptions = ({ navigation }) => ({
40 |   headerRight: () => (
41 |     <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
42 |       <Item
43 |         title='Take photo'
44 |         iconName='ios-camera'
45 |         onPress={() => navigation.push('Create Post')}
46 |       />
47 |     </HeaderButtons>
48 |   ),
49 |   headerLeft: () => (
50 |     <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
51 |       <Item
52 |         title='Menu'
53 |         iconName='ios-menu'
54 |         onPress={() => navigation.toggleDrawer()}
55 |       />
56 |     </HeaderButtons>
57 |   )
58 | })
59 | 
60 | const styles = StyleSheet.create({
61 |   wrapper: {
62 |     flex: 1,
63 |     justifyContent: 'center',
64 |     alignItems: 'center'
65 |   }
66 | })
67 | 


--------------------------------------------------------------------------------
/src/screens/PostScreen.js:
--------------------------------------------------------------------------------
  1 | import { useEffect, useCallback } from 'react'
  2 | import { StyleSheet, Text, View, Image, Button, Alert } from 'react-native'
  3 | import { useDispatch, useSelector } from 'react-redux'
  4 | import { HeaderButtons, Item } from 'react-navigation-header-buttons'
  5 | import { THEME } from '../theme'
  6 | import { AppHeaderIcon } from '../components/AppHeaderIcon'
  7 | import { removePost, toggleBookmarked } from '../store/actions/postAction'
  8 | 
  9 | export const PostScreen = ({ navigation }) => {
 10 |   const dispatch = useDispatch()
 11 |   const postId = navigation.getParam('postId')
 12 |   const post = useSelector(state =>
 13 |     state.blog.posts.find(post => post.id === postId)
 14 |   )
 15 | 
 16 |   const isBookmarked = useSelector(state =>
 17 |     state.blog.bookmarkedPosts.some(post => post.id === postId)
 18 |   )
 19 | 
 20 |   useEffect(() => {
 21 |     console.log('isBookmarked -', isBookmarked)
 22 |     navigation.setParams({ isBookmarked })
 23 |   }, [isBookmarked])
 24 | 
 25 |   const handleToggleBookmarked = useCallback(() => {
 26 |     dispatch(toggleBookmarked(post))
 27 |   }, [dispatch, post])
 28 | 
 29 |   useEffect(() => {
 30 |     navigation.setParams({ handleToggleBookmarked })
 31 |   }, [handleToggleBookmarked])
 32 | 
 33 |   const handleRemove = () => {
 34 |     Alert.alert(
 35 |       'Remove',
 36 |       'Remove post',
 37 |       [
 38 |         {
 39 |           text: 'Cancel',
 40 |           style: 'cancel'
 41 |         },
 42 |         {
 43 |           text: 'OK',
 44 |           style: 'destructive',
 45 |           onPress: () => {
 46 |             console.log(2)
 47 |           }
 48 |         }
 49 |       ],
 50 |       { cancelable: false }
 51 |     )
 52 |   }
 53 | 
 54 |   const handleRemoveImmediately = () => {
 55 |     navigation.navigate('Blog')
 56 |     dispatch(removePost(postId))
 57 |   }
 58 | 
 59 |   if (!post) {
 60 |     return null
 61 |   }
 62 | 
 63 |   return (
 64 |     <View>
 65 |       <Image style={styles.image} source={{ uri: post.img }} />
 66 |       <View style={styles.textWrapper}>
 67 |         <Text style={styles.title}>{post.text}</Text>
 68 |       </View>
 69 |       <Button
 70 |         title={'Remove'}
 71 |         color={THEME.DANGER_COLOR}
 72 |         onPress={handleRemoveImmediately}
 73 |       />
 74 |     </View>
 75 |   )
 76 | }
 77 | 
 78 | PostScreen.navigationOptions = ({ navigation }) => {
 79 |   const date = navigation.getParam('date'),
 80 |     isBookmarked = navigation.getParam('isBookmarked'),
 81 |     iconName = isBookmarked ? 'ios-star' : 'ios-star-outline',
 82 |     handleToggleBookmarked = navigation.getParam('handleToggleBookmarked')
 83 | 
 84 |   return {
 85 |     title: `Post ${new Date(date).toLocaleDateString()}`,
 86 |     headerRight: () => (
 87 |       <HeaderButtons HeaderButtonComponent={AppHeaderIcon}>
 88 |         <Item
 89 |           title='Take photo'
 90 |           iconName={iconName}
 91 |           onPress={handleToggleBookmarked}
 92 |         />
 93 |       </HeaderButtons>
 94 |     )
 95 |   }
 96 | }
 97 | 
 98 | const styles = StyleSheet.create({
 99 |   image: {
100 |     width: '100%',
101 |     height: 200
102 |   },
103 |   textWrapper: {
104 |     padding: 10
105 |   },
106 |   title: {
107 |     fontFamily: 'roboto'
108 |   }
109 | })
110 | 


--------------------------------------------------------------------------------
/src/store/actions/postAction.js:
--------------------------------------------------------------------------------
 1 | import * as FileSystem from 'expo-file-system'
 2 | import { LOAD_POSTS, REMOVE_POST, TOGGLE_BOOKMARKED, ADD_POST } from '../types'
 3 | import { DB } from '../../db'
 4 | 
 5 | export const loadPosts = () => {
 6 |   return async dispatch => {
 7 |     const posts = await DB.getPosts()
 8 | 
 9 |     dispatch({ type: LOAD_POSTS, payload: [] })
10 |   }
11 | }
12 | 
13 | export const toggleBookmarked = post => async dispatch => {
14 |   await DB.updatePost(post)
15 |   dispatch({
16 |     type: TOGGLE_BOOKMARKED,
17 |     payload: post.id
18 |   })
19 | }
20 | 
21 | export const removePost = id => async dispatch => {
22 |   await DB.removePost(id)
23 |   dispatch({
24 |     type: REMOVE_POST,
25 |     payload: id
26 |   })
27 | }
28 | 
29 | export const addPost = post => async dispatch => {
30 |   const fileName = post.img.split('/').pop()
31 |   const newPath = FileSystem.documentDirectory + fileName
32 | 
33 |   try {
34 |     FileSystem.moveAsync({
35 |       to: newPath,
36 |       from: post.img
37 |     })
38 |   } catch (error) {
39 |     console.log('Error -', error)
40 |   }
41 | 
42 |   const payload = { ...post, img: newPath },
43 |     id = await DB.createPost(payload)
44 | 
45 |   payload.id = id
46 | 
47 |   dispatch({
48 |     type: ADD_POST,
49 |     payload
50 |   })
51 | }
52 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware, combineReducers, createStore } from 'redux'
2 | import thunk from 'redux-thunk'
3 | import { postReducer } from './reducers/postReducer'
4 | 
5 | const rootReducer = combineReducers({ blog: postReducer })
6 | 
7 | export default createStore(rootReducer, applyMiddleware(thunk))
8 | 


--------------------------------------------------------------------------------
/src/store/reducers/postReducer.js:
--------------------------------------------------------------------------------
 1 | import { LOAD_POSTS, TOGGLE_BOOKMARKED, REMOVE_POST, ADD_POST } from '../types'
 2 | 
 3 | const initialState = {
 4 |   posts: [],
 5 |   bookmarkedPosts: [],
 6 |   loading: true
 7 | }
 8 | 
 9 | export const postReducer = (state = initialState, action) => {
10 |   switch (action.type) {
11 |     case LOAD_POSTS:
12 |       return {
13 |         ...state,
14 |         posts: action.payload,
15 |         bookmarkedPosts: action.payload.filter(post => post.bookmarked),
16 |         loading: false
17 |       }
18 | 
19 |     case TOGGLE_BOOKMARKED:
20 |       const posts = state.posts.map(post => {
21 |         if (post.id === action.payload) {
22 |           post.bookmarked = !post.bookmarked
23 |         }
24 |         return post
25 |       })
26 | 
27 |       return {
28 |         ...state,
29 |         posts,
30 |         bookmarkedPosts: posts.filter(post => post.bookmarked)
31 |       }
32 | 
33 |     case REMOVE_POST:
34 |       return {
35 |         ...state,
36 |         posts: state.posts.filter(post => post.id !== action.payload),
37 |         bookmarkedPosts: state.bookmarkedPosts.filter(
38 |           post => post.id !== action.payload
39 |         )
40 |       }
41 | 
42 |     case ADD_POST:
43 |       return {
44 |         ...state,
45 |         posts: [{ ...action.payload }, ...state.posts]
46 |       }
47 | 
48 |     default:
49 |       return state
50 |   }
51 |   return state
52 | }
53 | 


--------------------------------------------------------------------------------
/src/store/types.js:
--------------------------------------------------------------------------------
1 | export const LOAD_POSTS = 'LOAD_POSTS'
2 | export const TOGGLE_BOOKMARKED = 'TOGGLE_BOOKMARKED'
3 | export const REMOVE_POST = 'REMOVE_POST'
4 | export const ADD_POST = 'ADD_POST'
5 | 


--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | export const THEME = {
2 |   MAIN_COLOR: '#303f9f',
3 |   DANGER_COLOR: '#d81b60'
4 | }


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