├── .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 |
14 |
15 | {
22 | return
27 | }
28 | }} />
29 |
30 |
31 |
32 |
33 |
34 | );
35 | }
36 |
37 | export default ()=>{
38 | return
39 |
40 |
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 |
10 | {children}
11 |
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 |
13 | Enter Title
14 | setTitle(text)}/>
15 | Enter Context
16 | setContent(text)}/>
17 |
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 |
16 | {BlogPost.title}
17 |
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 |
11 |
43 | )
44 | }
45 |
46 | export default IndexScreen
--------------------------------------------------------------------------------