{"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_82_2 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":[],"_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}]}}