├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── app.json
├── assets
    ├── icon.png
    └── splash.png
├── babel.config.js
├── package-lock.json
├── package.json
└── src
    ├── context
        └── BlogContext.js
    ├── reducer
        └── reducer.js
    └── screens
        ├── CreateScreen.js
        ├── Showscreen.js
        └── indexScreen.js


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
3 |   "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
4 | }


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


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, Text, View} from 'react-native';
 3 | import {NavigationContainer,useNavigation} from '@react-navigation/native'
 4 | import {createStackNavigator} from '@react-navigation/stack'
 5 | import IndexScreen from './src/screens/indexScreen'
 6 | import {BlogProvider} from './src/context/BlogContext'
 7 | import ShowScreen from './src/screens/Showscreen'
 8 | import CreateScreen from './src/screens/CreateScreen'
 9 | import {Feather} from '@expo/vector-icons'
10 | const Stack = createStackNavigator()
11 | function App() {
12 |   return (
13 |       <NavigationContainer>
14 |         <Stack.Navigator>
15 |           <Stack.Screen 
16 |           name="index"
17 |           component={IndexScreen} 
18 |           options={{
19 |             title:"blogs",
20 |             headerTitleAlign:"center",
21 |             headerRight:()=>{
22 |                return <Feather 
23 |                name="plus" 
24 |                size={30} 
25 |                style={{marginRight:5}}
26 |                />
27 |             }
28 |             }} />
29 |           <Stack.Screen name="show" component={ShowScreen} options={{title:"show blog",headerTitleAlign:"center"}} />
30 |           <Stack.Screen name="create" component={CreateScreen} options={{title:"create",headerTitleAlign:"center"}} />
31 |         </Stack.Navigator>
32 |       </NavigationContainer>
33 | 
34 |   );
35 | }
36 | 
37 | export default ()=>{
38 |  return <BlogProvider>
39 |      <App />
40 |   </BlogProvider>
41 | }


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Blank Template",
 4 |     "slug": "animation",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "36.0.0",
 7 |     "platforms": [
 8 |       "ios",
 9 |       "android",
10 |       "web"
11 |     ],
12 |     "version": "1.0.0",
13 |     "orientation": "portrait",
14 |     "icon": "./assets/icon.png",
15 |     "splash": {
16 |       "image": "./assets/splash.png",
17 |       "resizeMode": "contain",
18 |       "backgroundColor": "#ffffff"
19 |     },
20 |     "updates": {
21 |       "fallbackToCacheTimeout": 0
22 |     },
23 |     "assetBundlePatterns": [
24 |       "**/*"
25 |     ],
26 |     "ios": {
27 |       "supportsTablet": true
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mukeshphulwani66/Notes-App-React-Native/cf5a3229ef734ec72e3714417487d012aba4c446/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mukeshphulwani66/Notes-App-React-Native/cf5a3229ef734ec72e3714417487d012aba4c446/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@react-native-community/masked-view": "0.1.5",
12 |     "@react-navigation/native": "^5.1.1",
13 |     "@react-navigation/stack": "^5.2.3",
14 |     "expo": "~36.0.0",
15 |     "react": "~16.9.0",
16 |     "react-dom": "~16.9.0",
17 |     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
18 |     "react-native-gesture-handler": "~1.5.0",
19 |     "react-native-reanimated": "~1.4.0",
20 |     "react-native-safe-area-context": "0.6.0",
21 |     "react-native-screens": "2.0.0-alpha.12",
22 |     "react-native-web": "~0.11.7"
23 |   },
24 |   "devDependencies": {
25 |     "babel-preset-expo": "~8.0.0",
26 |     "@babel/core": "^7.0.0"
27 |   },
28 |   "private": true
29 | }
30 | 


--------------------------------------------------------------------------------
/src/context/BlogContext.js:
--------------------------------------------------------------------------------
 1 | import React,{useReducer} from 'react'
 2 | import {reducer,initalState} from '../reducer/reducer'
 3 | 
 4 | export const BlogContext = React.createContext()
 5 | 
 6 | export const BlogProvider = ({children})=>{
 7 |     const [state,dispatch] = useReducer(reducer,initalState)
 8 |     return(
 9 |        <BlogContext.Provider value={{state,dispatch}}>
10 |         {children}
11 |     </BlogContext.Provider> 
12 |     ) 
13 | }


--------------------------------------------------------------------------------
/src/reducer/reducer.js:
--------------------------------------------------------------------------------
 1 | export const initalState = [
 2 | ]
 3 | 
 4 | export const reducer = (state,action)=>{
 5 |    switch(action.type){
 6 |           case "ADD":
 7 |               return [...state,{id:Math.random(),title:`blog title${state.length+1}`,content:"test"}]
 8 |           case "ADD_POST":
 9 |               return [...state,{id:Math.random(),title:action.payload.title,content:action.payload.content}]
10 |           case "REMOVE":
11 |               return state.filter((post)=> action.payload !== post.id)
12 |          default:
13 |             return state
14 |    }
15 | 
16 | }


--------------------------------------------------------------------------------
/src/screens/CreateScreen.js:
--------------------------------------------------------------------------------
 1 | import React,{useContext,useState} from 'react'
 2 | import {View,Text,StyleSheet,FlatList,Button,TextInput} from 'react-native'
 3 | import {BlogContext}  from '../context/BlogContext'
 4 | 
 5 | 
 6 | 
 7 | const CreateScreen = ({route,navigation})=>{
 8 |     const[title,setTitle] = useState("")
 9 |     const[content,setContent] = useState("")
10 |     const {state,dispatch} = useContext(BlogContext)
11 |     return(
12 |         <View style={{margin:3}}>
13 |             <Text style={{fontSize:22}}>Enter Title</Text>
14 |             <TextInput style={styles.input} value={title} onChangeText={(text)=>setTitle(text)}/>
15 |             <Text style={{fontSize:22}}>Enter Context</Text>
16 |             <TextInput style={styles.input} value={content} onChangeText={(text)=>setContent(text)}/>
17 |             <Button
18 |              title="Add blog post"
19 |              onPress={()=>{
20 |                  dispatch({type:"ADD_POST",payload:{title,content}})
21 |                  navigation.goBack()
22 |                 }}
23 |              />
24 |         </View>
25 |     )
26 | }
27 | 
28 | const styles= StyleSheet.create({
29 |     input:{
30 |         fontSize:20,
31 |         borderWidth:1,
32 |         borderColor:"black",
33 |         marginVertical:8
34 |     }
35 | })
36 | 
37 | export default CreateScreen


--------------------------------------------------------------------------------
/src/screens/Showscreen.js:
--------------------------------------------------------------------------------
 1 | import React,{useContext} from 'react'
 2 | import {View,Text,StyleSheet,FlatList,Button} from 'react-native'
 3 | import {Feather} from '@expo/vector-icons'
 4 | import {BlogContext}  from '../context/BlogContext'
 5 | 
 6 | 
 7 | 
 8 | const ShowScreen = ({route})=>{
 9 |     const {id}  =  route.params;
10 |     const{state,dispatch} = useContext(BlogContext)
11 |     const BlogPost  = state.find((post)=>{
12 |         return post.id === id
13 |     })
14 |     return(
15 |         <View>
16 |             <Text>{BlogPost.title}</Text>
17 |         </View>
18 |     )
19 | }
20 | 
21 | 
22 | export default ShowScreen


--------------------------------------------------------------------------------
/src/screens/indexScreen.js:
--------------------------------------------------------------------------------
 1 | import React,{useContext} from 'react'
 2 | import {View,Text,StyleSheet,FlatList,Button,TouchableOpacity} from 'react-native'
 3 | import {Feather} from '@expo/vector-icons'
 4 | import {BlogContext}  from '../context/BlogContext'
 5 | 
 6 | const IndexScreen = ({navigation})=>{
 7 |     const {state,dispatch} = useContext(BlogContext)
 8 |     
 9 | return (
10 |     <View style={{flex:1}}>
11 |         <Button title="add" onPress={()=>dispatch({type:"ADD"})} />
12 |         <Button title="create" onPress={()=>navigation.navigate("create")} />
13 |         <Button title="ww" style={{textTransform:"lowercase",fontSize:22}} />
14 |         <FlatList 
15 |          data={state}
16 |          keyExtractor={post=>post.title}
17 |          renderItem={({item})=>{
18 |                return (
19 |                    <TouchableOpacity
20 |                    onPress={()=>navigation.navigate("show",{id:item.id})}
21 |                    >
22 |                         <View style={{
23 |                         flexDirection:"row",
24 |                         justifyContent:"space-between",
25 |                         marginHorizontal:10,
26 |                         marginBottom:5,
27 |                         backgroundColor:"white",
28 |                         padding:10,
29 |                         elevation:4
30 |                         }}>
31 |                         <Text style={{fontSize:22}}>{item.title}</Text>   
32 |                         <Feather name="trash" size={24} 
33 |                         onPress={()=>dispatch({type:"REMOVE",payload:item.id})}
34 |                         />
35 |                         </View>    
36 |                    </TouchableOpacity>
37 |                 
38 |                
39 |                )
40 |          }}
41 |         />
42 |     </View>
43 | )
44 | }
45 | 
46 | export default IndexScreen


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