{"id":2169,"date":"2022-09-21T16:49:17","date_gmt":"2022-09-21T09:49:17","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=2169"},"modified":"2023-01-04T11:59:15","modified_gmt":"2023-01-04T04:59:15","slug":"todosapp-sample-crud-react-native-expo-and-firebase","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/","title":{"rendered":"TodosApp: Sample CRUD React-Native Expo and Firebase"},"content":{"rendered":"\r\n\r\nAt my office a student intern arrived, and I was assigned to teach the student about mobile applications using React. In training due to lack of preparation, I had to look for sample code material using firebase, various codes found there were various shortcomings to demonstrate CRUD using firebase.\r\n\r\nI found a simple <strong>TodosApp<\/strong> application that uses the Expo framework and Firebase as a data store. But modified a little so that it can be directly used via Snack in the browser.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\r\n<ul class=\"blocks-gallery-grid\">\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"138\" height=\"300\" class=\"wp-image-2196\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent-138x300.jpg\" alt=\"tampilan utama todosapp\" data-id=\"2196\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent.jpg\" data-link=\"https:\/\/www.bagi2info.com\/todosapp-sample-crud-react-native-expo-and-firebase\/screenshot_20220921_120020_host-exp-exponent\/\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent-138x300.jpg 138w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent-473x1024.jpg 473w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent-768x1664.jpg 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent-709x1536.jpg 709w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent-945x2048.jpg 945w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120020_host.exp_.exponent.jpg 1080w\" sizes=\"auto, (max-width: 138px) 100vw, 138px\" \/><\/a><\/figure>\r\n<\/li>\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"138\" height=\"300\" class=\"wp-image-2197\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent-138x300.jpg\" alt=\"tampilan update todosapp\" data-id=\"2197\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent.jpg\" data-link=\"https:\/\/www.bagi2info.com\/todosapp-sample-crud-react-native-expo-and-firebase\/screenshot_20220921_120028_host-exp-exponent\/\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent-138x300.jpg 138w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent-473x1024.jpg 473w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent-768x1664.jpg 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent-709x1536.jpg 709w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent-945x2048.jpg 945w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/Screenshot_20220921_120028_host.exp_.exponent.jpg 1080w\" sizes=\"auto, (max-width: 138px) 100vw, 138px\" \/><\/a><\/figure>\r\n<\/li>\r\n<\/ul>\r\n<\/figure>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n\r\nLet&#8217;s just discuss the source code of the application:\r\n\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#Configjs\" >Config.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#Appjs\" >App.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#Homejs\" >Home.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#Detailjs\" >Detail.js<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Configjs\"><\/span>Config.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nCopy the firebase configuration to the config.js file and create a collection in the todos firestore, then you can run this TodosApp application in Snack Expo\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"config.js\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">\r\nimport firebase from 'firebase';\r\n\r\nconst firebaseConfig = {\r\n  apiKey: \"################\",\r\n  authDomain: \"###################\",\r\n  projectId: \"###############\",\r\n  storageBucket: \"#####################\",\r\n  messagingSenderId: \"################\",\r\n  appId: \"######################\",\r\n  measurementId: \"##############\"\r\n};\r\n\r\nif (!firebase.apps.length) {\r\n  firebase.initializeApp(firebaseConfig);\r\n}\r\n\r\nexport { firebase };\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Appjs\"><\/span>App.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nThe main app.js file where the navigation settings for apps use the Stack navigasi navigation type\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"App.js\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">\r\nimport { NavigationContainer } from '@react-navigation\/native';\r\nimport { createStackNavigator } from '@react-navigation\/stack';\r\n\r\nimport Home from '.\/Screens\/Home';\r\nimport Detail from '.\/Screens\/Detail';\r\n\r\nconst Stack = createStackNavigator()\r\n\r\nexport default function App() {\r\n  return (\r\n    &lt;NavigationContainer&gt;\r\n      &lt;Stack.Navigator screenOptions={{headerShown: false}}&gt;\r\n        &lt;Stack.Screen \r\n          name='Home' \r\n          component={Home} \r\n        \/&gt;\r\n        &lt;Stack.Screen \r\n          name='Detail'\r\n          component={Detail}\r\n        \/&gt;\r\n      &lt;\/Stack.Navigator&gt;\r\n    &lt;\/NavigationContainer&gt;\r\n  );\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Homejs\"><\/span>Home.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nOn the home screen, there is a query to retrieve data at the time of loading screen, namely in the <strong>useEffect<\/strong> function, then there is also a function to <strong>add<\/strong> and <strong>delete<\/strong> data, specifically for <strong>editing<\/strong> data, continue on the Details screen.\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"Home.js\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">\r\nimport React, { useState, useEffect } from 'react';\r\nimport {\r\n  View,\r\n  Text,\r\n  FlatList,\r\n  StyleSheet,\r\n  TextInput,\r\n  TouchableOpacity,\r\n  Keyboard,\r\n} from 'react-native';\r\nimport { firebase } from '..\/config';\r\nimport { FontAwesome } from '@expo\/vector-icons';\r\nimport { useNavigation } from '@react-navigation\/native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\n\r\nconst Home = () =&gt; {\r\n  const [todos, setTodos] = useState([]);\r\n  const todoRef = firebase.firestore().collection('todos');\r\n  const [addData, setAddData] = useState('');\r\n  const navigation = useNavigation();\r\n\r\n  \/\/ fetch or read the data from firestore\r\n  useEffect(() =&gt; {\r\n    todoRef.orderBy('createdAt', 'desc').onSnapshot((querySnapshot) =&gt; {\r\n      const todos = [];\r\n      querySnapshot.forEach((doc) =&gt; {\r\n        const { heading } = doc.data();\r\n        todos.push({\r\n          id: doc.id,\r\n          heading,\r\n        });\r\n      });\r\n      setTodos(todos);\r\n      \/\/console.log(users)\r\n    });\r\n  }, []);\r\n\r\n  \/\/ delete a todo from firestore db\r\n  const deleteTodo = (todos) =&gt; {\r\n    todoRef\r\n      .doc(todos.id)\r\n      .delete()\r\n      .then(() =&gt; {\r\n        \/\/ show a successful alert\r\n        alert('Deleted successfully');\r\n      })\r\n      .catch((error) =&gt; {\r\n        \/\/ show an error alert\r\n        alert(error);\r\n      });\r\n  };\r\n\r\n  \/\/ add a todo\r\n  const addTodo = () =&gt; {\r\n    \/\/ check if we have a todo.\r\n    if (addData &amp;&amp; addData.length &gt; 0) {\r\n      \/\/ get the timestamp\r\n      const timestamp = firebase.firestore.FieldValue.serverTimestamp();\r\n      const data = {\r\n        heading: addData,\r\n        createdAt: timestamp,\r\n      };\r\n      todoRef\r\n        .add(data)\r\n        .then(() =&gt; {\r\n          \/\/ release todo state\r\n          setAddData('');\r\n          \/\/ release keyboard\r\n          Keyboard.dismiss();\r\n        })\r\n        .catch((error) =&gt; {\r\n          \/\/ show an alert in case of error\r\n          alert(error);\r\n        });\r\n    }\r\n  };\r\n\r\n  return (\r\n    &lt;SafeAreaView style={{ flex: 1 }}&gt;\r\n      &lt;View style={styles.textHeadingContainer}&gt;\r\n        &lt;Text style={styles.textHeading}&gt;Todos App&lt;\/Text&gt;\r\n      &lt;\/View&gt;\r\n      &lt;View style={styles.formContainer}&gt;\r\n        &lt;TextInput\r\n          style={styles.input}\r\n          placeholder=\"Add new todo\"\r\n          placeholderTextColor=\"#aaaaaa\"\r\n          onChangeText={(heading) =&gt; setAddData(heading)}\r\n          value={addData}\r\n          underlineColorAndroid=\"transparent\"\r\n          autoCapitalize=\"none\"\r\n        \/&gt;\r\n        &lt;TouchableOpacity style={styles.button} onPress={addTodo}&gt;\r\n          &lt;Text style={styles.buttonText}&gt;Add&lt;\/Text&gt;\r\n        &lt;\/TouchableOpacity&gt;\r\n      &lt;\/View&gt;\r\n      &lt;FlatList\r\n        style={{}}\r\n        data={todos}\r\n        numColumns={1}\r\n        renderItem={({ item }) =&gt; (\r\n          &lt;View&gt;\r\n            &lt;TouchableOpacity\r\n              style={styles.container}\r\n              onPress={() =&gt; navigation.navigate('Detail', { item })}&gt;\r\n              \r\n              &lt;FontAwesome\r\n                name=\"trash-o\"\r\n                color=\"red\"\r\n                onPress={() =&gt; deleteTodo(item)}\r\n                style={styles.todoIcon}\r\n              \/&gt;\r\n              &lt;View style={styles.innerContainer}&gt;\r\n                &lt;Text style={styles.itemHeading}&gt;\r\n                  {item.heading}\r\n                &lt;\/Text&gt;\r\n              &lt;\/View&gt;\r\n            &lt;\/TouchableOpacity&gt;\r\n          &lt;\/View&gt;\r\n        )}\r\n      \/&gt;\r\n    &lt;\/SafeAreaView&gt;\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    backgroundColor: '#e5e5e5',\r\n    padding: 15,\r\n    borderRadius: 15,\r\n    margin: 5,\r\n    marginHorizontal: 10,\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  textHeadingContainer: {\r\n    paddingVertical: 20,\r\n    alignContent: 'center',\r\n    alignItems: 'center',\r\n  },\r\n  textHeading: {\r\n    fontWeight: 'bold',\r\n    fontSize: 24,\r\n  },\r\n  innerContainer: {\r\n    alignItems: 'center',\r\n    flexDirection: 'column',\r\n    marginLeft: 45,\r\n  },\r\n  itemHeading: {\r\n    fontWeight: 'bold',\r\n    fontSize: 18,\r\n    marginRight: 22,\r\n  },\r\n  formContainer: {\r\n    flexDirection: 'row',\r\n    height: 80,\r\n    marginLeft: 10,\r\n    marginRight: 10,\r\n    marginTop: 40,\r\n  },\r\n  input: {\r\n    height: 48,\r\n    borderRadius: 5,\r\n    overflow: 'hidden',\r\n    backgroundColor: 'white',\r\n    paddingLeft: 16,\r\n    flex: 1,\r\n    marginRight: 5,\r\n  },\r\n  button: {\r\n    height: 47,\r\n    borderRadius: 5,\r\n    backgroundColor: '#788eec',\r\n    width: 80,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  buttonText: {\r\n    color: 'white',\r\n    fontSize: 20,\r\n  },\r\n\r\n  todoIcon: {\r\n    marginTop: 5,\r\n    fontSize: 20,\r\n    marginLeft: 14,\r\n  },\r\n});\r\n\r\nexport default Home;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Detailjs\"><\/span>Detail.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n\r\nScreen Details takes data from the <strong>Home<\/strong> parameter submission (route.params.item), which is then displayed in the input field, lastly the user can edit and save after changes occur.\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\" title=\"Detail.js\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">\r\nimport React, { useState } from 'react';\r\nimport {\r\n  View,\r\n  TextInput,\r\n  StyleSheet,\r\n  Text,\r\n  TouchableOpacity,\r\n} from 'react-native';\r\nimport { firebase } from '..\/config';\r\nimport { useNavigation } from '@react-navigation\/native';\r\n\r\nconst Detail = ({ route }) =&gt; {\r\n  const todoRef = firebase.firestore().collection('todos');\r\n  const [textHeading, onChangeHeadingText] = useState(\r\n    route.params.item.heading\r\n  );\r\n  const navigation = useNavigation();\r\n\r\n  const updateTodo = () =&gt; {\r\n    if (textHeading &amp;&amp; textHeading.length &gt; 0) {\r\n      todoRef\r\n        .doc(route.params.item.id)\r\n        .update({\r\n          heading: textHeading,\r\n        })\r\n        .then(() =&gt; {\r\n          navigation.navigate('Home');\r\n        })\r\n        .catch((error) =&gt; {\r\n          alert(error.message);\r\n        });\r\n    }\r\n  };\r\n\r\n  return (\r\n    &lt;View style={styles.container}&gt;\r\n      &lt;TextInput\r\n        style={styles.textfield}\r\n        onChangeText={onChangeHeadingText}\r\n        value={textHeading}\r\n        placeholder=\"Update Todo\"\r\n      \/&gt;\r\n      &lt;TouchableOpacity\r\n        style={styles.buttonUpdate}\r\n        onPress={() =&gt; {\r\n          updateTodo();\r\n        }}&gt;\r\n        &lt;Text&gt;UPDATE&lt;\/Text&gt;\r\n      &lt;\/TouchableOpacity&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n};\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    marginTop: 80,\r\n    marginLeft: 15,\r\n    marginRight: 15,\r\n  },\r\n  textfield: {\r\n    marginBottom: 10,\r\n    padding: 10,\r\n    fontSize: 15,\r\n    color: '#000000',\r\n    backgroundColor: '#e0e0e0',\r\n    borderRadius: 5,\r\n  },\r\n  buttonUpdate: {\r\n    marginTop: 25,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    paddingVertical: 12,\r\n    paddingHorizontal: 32,\r\n    borderRadius: 4,\r\n    elevation: 10,\r\n    backgroundColor: '#0de065',\r\n  },\r\n});\r\n\r\nexport default Detail;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nGithub:\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/github.com\/rudiahmad\/crud-react-native-expo-and-firebase-todosapp\">https:\/\/github.com\/rudiahmad\/crud-react-native-expo-and-firebase-todosapp<\/a>\r\n\r\n\r\n\r\n\r\n\r\nChanges from source code:\r\n\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n \t<li>Change database version from 9 to 8<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n \t<li>Changed the coding so that it can run directly from <a href=\"https:\/\/snack.expo.dev\/\" target=\"_blank\" rel=\"noopener\">Expo Snack<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nExpo Snack\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/crud-react-native-expo-and-firebase-todosapp\" target=\"_blank\" rel=\"noopener\">https:\/\/snack.expo.dev\/@rudiahmad\/crud-react-native-expo-and-firebase-todosapp<\/a>\r\n\r\n\r\n\r\n\r\n\r\nSource code :\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/github.com\/imrohit007\/CRUD-React-Native-Expo-And-Firebase\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/imrohit007\/CRUD-React-Native-Expo-And-Firebase<\/a>\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>At my office a student intern arrived, and I was assigned to teach the student about mobile applications using React. In training due to lack of preparation, I had to look for sample code&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,2,173],"tags":[150],"class_list":["post-2169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-komputer","category-react-native","tag-react-native"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"TodosApp : Sample CRUD React-Native Expo and Firebase\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"webmaster\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"TodosApp: Sample CRUD React-Native Expo and Firebase\" \/>\n\t\t<meta property=\"og:description\" content=\"TodosApp : Sample CRUD React-Native Expo and Firebase\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2022-09-21T09:49:17+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-01-04T04:59:15+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"TodosApp: Sample CRUD React-Native Expo and Firebase\" \/>\n\t\t<meta name=\"twitter:description\" content=\"TodosApp : Sample CRUD React-Native Expo and Firebase\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&amp;ssl=1\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#blogposting\",\"name\":\"TodosApp: Sample CRUD React-Native Expo and Firebase\",\"headline\":\"TodosApp: Sample CRUD React-Native Expo and Firebase\",\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/reactfirebase.png\",\"width\":800,\"height\":426,\"caption\":\"react + firebase\"},\"datePublished\":\"2022-09-21T16:49:17+07:00\",\"dateModified\":\"2023-01-04T11:59:15+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#webpage\"},\"articleSection\":\"Featured, Komputer, React Native, react native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"position\":2,\"name\":\"Komputer\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#listItem\",\"name\":\"TodosApp: Sample CRUD React-Native Expo and Firebase\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#listItem\",\"position\":3,\"name\":\"TodosApp: Sample CRUD React-Native Expo and Firebase\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#webpage\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/\",\"name\":\"TodosApp: Sample CRUD React-Native Expo and Firebase\",\"description\":\"TodosApp : Sample CRUD React-Native Expo and Firebase\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/reactfirebase.png\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#mainImage\",\"width\":800,\"height\":426,\"caption\":\"react + firebase\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/todosapp-sample-crud-react-native-expo-and-firebase\\\/#mainImage\"},\"datePublished\":\"2022-09-21T16:49:17+07:00\",\"dateModified\":\"2023-01-04T11:59:15+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"name\":\"Bagi2info.com\",\"description\":\"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"TodosApp: Sample CRUD React-Native Expo and Firebase","description":"TodosApp : Sample CRUD React-Native Expo and Firebase","canonical_url":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#blogposting","name":"TodosApp: Sample CRUD React-Native Expo and Firebase","headline":"TodosApp: Sample CRUD React-Native Expo and Firebase","author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/reactfirebase.png","width":800,"height":426,"caption":"react + firebase"},"datePublished":"2022-09-21T16:49:17+07:00","dateModified":"2023-01-04T11:59:15+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#webpage"},"isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#webpage"},"articleSection":"Featured, Komputer, React Native, react native"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/www.bagi2info.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","position":2,"name":"Komputer","item":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#listItem","name":"TodosApp: Sample CRUD React-Native Expo and Firebase"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#listItem","position":3,"name":"TodosApp: Sample CRUD React-Native Expo and Firebase","previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}}]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/#person","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author","url":"https:\/\/www.bagi2info.com\/en\/author\/admin\/","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"WebPage","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#webpage","url":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/","name":"TodosApp: Sample CRUD React-Native Expo and Firebase","description":"TodosApp : Sample CRUD React-Native Expo and Firebase","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#breadcrumblist"},"author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/09\/reactfirebase.png","@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#mainImage","width":800,"height":426,"caption":"react + firebase"},"primaryImageOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/#mainImage"},"datePublished":"2022-09-21T16:49:17+07:00","dateModified":"2023-01-04T11:59:15+07:00"},{"@type":"WebSite","@id":"https:\/\/www.bagi2info.com\/en\/#website","url":"https:\/\/www.bagi2info.com\/en\/","name":"Bagi2info.com","description":"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","og:type":"article","og:title":"TodosApp: Sample CRUD React-Native Expo and Firebase","og:description":"TodosApp : Sample CRUD React-Native Expo and Firebase","og:url":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/","og:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","og:image:secure_url":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","article:published_time":"2022-09-21T09:49:17+00:00","article:modified_time":"2023-01-04T04:59:15+00:00","twitter:card":"summary","twitter:site":"@bagi2infocom","twitter:title":"TodosApp: Sample CRUD React-Native Expo and Firebase","twitter:description":"TodosApp : Sample CRUD React-Native Expo and Firebase","twitter:creator":"@bagi2infocom","twitter:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&ssl=1"},"aioseo_meta_data":{"post_id":"2169","title":null,"description":"TodosApp : Sample CRUD React-Native Expo and Firebase","keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-09-21 09:01:20","updated":"2025-06-04 07:25:44","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/category\/komputer\/\" title=\"Komputer\">Komputer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tTodosApp: Sample CRUD React-Native Expo and Firebase\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.bagi2info.com\/en\/"},{"label":"Komputer","link":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/"},{"label":"TodosApp: Sample CRUD React-Native Expo and Firebase","link":"https:\/\/www.bagi2info.com\/en\/todosapp-sample-crud-react-native-expo-and-firebase\/"}],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=2169"}],"version-history":[{"count":3,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2169\/revisions"}],"predecessor-version":[{"id":3632,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/2169\/revisions\/3632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/2173"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=2169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=2169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=2169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}