{"id":3977,"date":"2023-11-04T23:13:58","date_gmt":"2023-11-04T23:13:58","guid":{"rendered":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/"},"modified":"2023-11-05T05:48:25","modified_gmt":"2023-11-05T05:48:25","slug":"how-to-build-a-social-media-app-with-react-native-and-firebase","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/","title":{"rendered":"How to Build a Social Media App with React Native and Firebase"},"content":{"rendered":"<p>In this tutorial, we will learn how to build a social media app using React Native and Firebase. We will be using Firebase for authentication, database, and storage functionality. React Native will allow us to develop our app for both iOS and Android platforms using a single codebase.<\/p>\n<h2>Prerequisites<\/h2>\n<p>In order to follow along with this tutorial, you will need the following:<\/p>\n<ul>\n<li>Node.js installed on your machine<\/li>\n<li>React Native CLI installed globally<\/li>\n<li>Xcode and\/or Android Studio installed for iOS and\/or Android development respectively<\/li>\n<li>A basic understanding of React and JavaScript<\/li>\n<\/ul>\n<h2>Setting up the Project<\/h2>\n<p>Let&#8217;s start by setting up a new React Native project. Open your terminal and run the following commands:<\/p>\n<pre><code class=\"language-shell\">npx react-native init SocialMediaApp\ncd SocialMediaApp\n<\/code><\/pre>\n<p>This will create a new React Native project called &#8220;SocialMediaApp&#8221; and navigate you into the project directory.<\/p>\n<h2>Installing Firebase Dependencies<\/h2>\n<p>Next, we need to install the necessary Firebase dependencies for our project. Run the following command in your terminal:<\/p>\n<pre><code class=\"language-shell\">npm install @react-native-firebase\/app @react-native-firebase\/auth @react-native-firebase\/database @react-native-firebase\/storage\n<\/code><\/pre>\n<h2>Initializing Firebase<\/h2>\n<p>To use Firebase in our app, we need to initialize it. Create a new file called <code>firebase.js<\/code> in the project&#8217;s root directory and add the following code:<\/p>\n<pre><code class=\"language-javascript\">import * as firebase from 'firebase';\nimport '@firebase\/auth';\nimport '@firebase\/database';\nimport '@firebase\/storage';\n\nconst firebaseConfig = {\n  \/\/ YOUR FIREBASE CONFIG HERE\n};\n\nif (!firebase.apps.length) {\n  firebase.initializeApp(firebaseConfig);\n}\n\nexport { firebase };\n<\/code><\/pre>\n<p>Replace <code>YOUR FIREBASE CONFIG HERE<\/code> with your Firebase project&#8217;s configuration. You can find this configuration in the Firebase console of your project.<\/p>\n<h2>Setting up Navigation<\/h2>\n<p>For our app&#8217;s navigation, we will be using React Navigation. Run the following command in your terminal to install the necessary dependencies:<\/p>\n<pre><code class=\"language-shell\">npm install @react-navigation\/native @react-navigation\/stack\n<\/code><\/pre>\n<p>Next, create a new file called <code>AppNavigator.js<\/code> in the project&#8217;s root directory and add the following code:<\/p>\n<pre><code class=\"language-javascript\">import * as React from 'react';\nimport { NavigationContainer } from '@react-navigation\/native';\nimport { createStackNavigator } from '@react-navigation\/stack';\n\nimport HomeScreen from '.\/screens\/HomeScreen';\nimport LoginScreen from '.\/screens\/LoginScreen';\nimport SignupScreen from '.\/screens\/SignupScreen';\n\nconst Stack = createStackNavigator();\n\nfunction AppNavigator() {\n  return (\n    &lt;NavigationContainer&gt;\n      &lt;Stack.Navigator&gt;\n        &lt;Stack.Screen\n          name=\"Home\"\n          component={HomeScreen}\n          options={{ title: 'Home' }}\n        \/&gt;\n        &lt;Stack.Screen\n          name=\"Login\"\n          component={LoginScreen}\n          options={{ title: 'Login' }}\n        \/&gt;\n        &lt;Stack.Screen\n          name=\"Signup\"\n          component={SignupScreen}\n          options={{ title: 'Signup' }}\n        \/&gt;\n      &lt;\/Stack.Navigator&gt;\n    &lt;\/NavigationContainer&gt;\n  );\n}\n\nexport default AppNavigator;\n<\/code><\/pre>\n<h2>Creating Screens<\/h2>\n<p>Let&#8217;s create the screens for our app. Create a new directory called <code>screens<\/code> in the project&#8217;s root directory and navigate into it.<\/p>\n<p>Inside the <code>screens<\/code> directory, create the following files and add the respective code:<\/p>\n<ul>\n<li><code>HomeScreen.js<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport { View, Text } from 'react-native';\n\nfunction HomeScreen() {\n  return (\n    &lt;View&gt;\n      &lt;Text&gt;Home Screen&lt;\/Text&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default HomeScreen;\n<\/code><\/pre>\n<ul>\n<li><code>LoginScreen.js<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport { View, Text } from 'react-native';\n\nfunction LoginScreen() {\n  return (\n    &lt;View&gt;\n      &lt;Text&gt;Login Screen&lt;\/Text&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default LoginScreen;\n<\/code><\/pre>\n<ul>\n<li><code>SignupScreen.js<\/code><\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport { View, Text } from 'react-native';\n\nfunction SignupScreen() {\n  return (\n    &lt;View&gt;\n      &lt;Text&gt;Signup Screen&lt;\/Text&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default SignupScreen;\n<\/code><\/pre>\n<h2>Importing Screens<\/h2>\n<p>Let&#8217;s import the screens in <code>AppNavigator.js<\/code> to make them functional. Update the import statements at the top of the file as follows:<\/p>\n<pre><code class=\"language-javascript\">import HomeScreen from '.\/screens\/HomeScreen';\nimport LoginScreen from '.\/screens\/LoginScreen';\nimport SignupScreen from '.\/screens\/SignupScreen';\n<\/code><\/pre>\n<h2>Adding Firebase Authentication<\/h2>\n<p>To enable authentication in our app, we will use the Firebase Auth module. Open <code>SignupScreen.js<\/code> and update the code as follows:<\/p>\n<pre><code class=\"language-javascript\">import React, { useState } from 'react';\nimport { View, TextInput, Button } from 'react-native';\n\nimport { firebase } from '..\/firebase\/firebase';\n\nfunction SignupScreen({ navigation }) {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  const handleSignUp = () =&gt; {\n    firebase\n      .auth()\n      .createUserWithEmailAndPassword(email, password)\n      .then(() =&gt; {\n        console.log('User successfully registered!');\n        navigation.navigate('Home');\n      })\n      .catch((error) =&gt; {\n        console.error(error);\n      });\n  };\n\n  return (\n    &lt;View&gt;\n      &lt;TextInput\n        placeholder=\"Email\"\n        value={email}\n        onChangeText={(text) =&gt; setEmail(text)}\n      \/&gt;\n      &lt;TextInput\n        placeholder=\"Password\"\n        secureTextEntry\n        value={password}\n        onChangeText={(text) =&gt; setPassword(text)}\n      \/&gt;\n      &lt;Button title=\"Sign Up\" onPress={handleSignUp} \/&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default SignupScreen;\n<\/code><\/pre>\n<p>Similarly, update the code in <code>LoginScreen.js<\/code> as follows:<\/p>\n<pre><code class=\"language-javascript\">import React, { useState } from 'react';\nimport { View, TextInput, Button } from 'react-native';\n\nimport { firebase } from '..\/firebase\/firebase';\n\nfunction LoginScreen({ navigation }) {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  const handleLogin = () =&gt; {\n    firebase\n      .auth()\n      .signInWithEmailAndPassword(email, password)\n      .then(() =&gt; {\n        console.log('User successfully logged in!');\n        navigation.navigate('Home');\n      })\n      .catch((error) =&gt; {\n        console.error(error);\n      });\n  };\n\n  return (\n    &lt;View&gt;\n      &lt;TextInput\n        placeholder=\"Email\"\n        value={email}\n        onChangeText={(text) =&gt; setEmail(text)}\n      \/&gt;\n      &lt;TextInput\n        placeholder=\"Password\"\n        secureTextEntry\n        value={password}\n        onChangeText={(text) =&gt; setPassword(text)}\n      \/&gt;\n      &lt;Button title=\"Login\" onPress={handleLogin} \/&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default LoginScreen;\n<\/code><\/pre>\n<h2>Adding Firebase Database<\/h2>\n<p>To store and retrieve data, we will use the Firebase Database module. Update the code in <code>HomeScreen.js<\/code> to add data to the database:<\/p>\n<pre><code class=\"language-javascript\">import React, { useState } from 'react';\nimport { View, TextInput, Button } from 'react-native';\n\nimport { firebase } from '..\/firebase\/firebase';\n\nfunction HomeScreen() {\n  const [text, setText] = useState('');\n\n  const handleAddData = () =&gt; {\n    const dbRef = firebase.database().ref();\n    const data = {\n      textValue: text,\n    };\n    dbRef.push(data).then(() =&gt; {\n      console.log('Data added successfully!');\n    });\n  };\n\n  return (\n    &lt;View&gt;\n      &lt;TextInput\n        placeholder=\"Enter some text\"\n        value={text}\n        onChangeText={(text) =&gt; setText(text)}\n      \/&gt;\n      &lt;Button title=\"Add Data\" onPress={handleAddData} \/&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default HomeScreen;\n<\/code><\/pre>\n<p>To retrieve data from the database, update the code in <code>HomeScreen.js<\/code> as follows:<\/p>\n<pre><code class=\"language-javascript\">import React, { useState, useEffect } from 'react';\nimport { View, TextInput, Button, FlatList, Text } from 'react-native';\n\nimport { firebase } from '..\/firebase\/firebase';\n\nfunction HomeScreen() {\n  const [text, setText] = useState('');\n  const [data, setData] = useState([]);\n\n  useEffect(() =&gt; {\n    const dbRef = firebase.database().ref();\n    dbRef.on('value', (snapshot) =&gt; {\n      const firebaseData = snapshot.val();\n      const dataArray = [];\n      for (let id in firebaseData) {\n        dataArray.push({ id, ...firebaseData[id] });\n      }\n      setData(dataArray);\n    });\n  }, []);\n\n  const handleAddData = () =&gt; {\n    const dbRef = firebase.database().ref();\n    const newData = {\n      textValue: text,\n    };\n    dbRef.push(newData).then(() =&gt; {\n      setText('');\n    });\n  };\n\n  return (\n    &lt;View&gt;\n      &lt;TextInput\n        placeholder=\"Enter some text\"\n        value={text}\n        onChangeText={(text) =&gt; setText(text)}\n      \/&gt;\n      &lt;Button title=\"Add Data\" onPress={handleAddData} \/&gt;\n      &lt;FlatList\n        data={data}\n        renderItem={({ item }) =&gt; &lt;Text&gt;{item.textValue}&lt;\/Text&gt;}\n        keyExtractor={(item) =&gt; item.id}\n      \/&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default HomeScreen;\n<\/code><\/pre>\n<h2>Adding Firebase Storage<\/h2>\n<p>To upload and retrieve images, we will use the Firebase Storage module. Update the code in <code>HomeScreen.js<\/code> to add image upload functionality:<\/p>\n<pre><code class=\"language-javascript\">import React, { useState } from 'react';\nimport { View, TextInput, Button, Image } from 'react-native';\n\nimport { firebase } from '..\/firebase\/firebase';\n\nfunction HomeScreen() {\n  const [image, setImage] = useState(null);\n\n  const handleChooseImage = () =&gt; {\n    \/\/ Image picker code here\n  };\n\n  const handleUploadImage = () =&gt; {\n    const storageRef = firebase.storage().ref();\n    const imageRef = storageRef.child(image.fileName);\n    imageRef.putFile(image.uri).then(() =&gt; {\n      console.log('Image uploaded successfully!');\n    });\n  };\n\n  return (\n    &lt;View&gt;\n      &lt;Button title=\"Choose Image\" onPress={handleChooseImage} \/&gt;\n      {image &amp;&amp; &lt;Image source={{ uri: image.uri }} \/&gt;}\n      &lt;Button title=\"Upload Image\" onPress={handleUploadImage} \/&gt;\n    &lt;\/View&gt;\n  );\n}\n\nexport default HomeScreen;\n<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, we learned how to build a social media app using React Native and Firebase. We integrated Firebase for authentication, database, and storage functions. By following this tutorial, you now have the knowledge to create your own social media app with React Native and Firebase. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will learn how to build a social media app using React Native and Firebase. We will be using Firebase for authentication, database, and storage functionality. React Native will allow us to develop our app for both iOS and Android platforms using a single codebase. Prerequisites In <a href=\"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[10,663,34,9,605,217],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build a Social Media App with React Native and Firebase - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Social Media App with React Native and Firebase\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn how to build a social media app using React Native and Firebase. We will be using Firebase for authentication, database, and storage functionality. React Native will allow us to develop our app for both iOS and Android platforms using a single codebase. Prerequisites In Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:25+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Build a Social Media App with React Native and Firebase\",\n\t            \"datePublished\": \"2023-11-04T23:13:58+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:25+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\"\n\t            },\n\t            \"wordCount\": 460,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"app development\\\"\",\n\t                \"\\\"build app\\\"\",\n\t                \"\\\"Firebase\\\"\",\n\t                \"\\\"mobile app development\\\"\",\n\t                \"\\\"React Native\\\"\",\n\t                \"[\\\"social media app\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\",\n\t            \"name\": \"How to Build a Social Media App with React Native and Firebase - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:58+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:25+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Build a Social Media App with React Native and Firebase\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build a Social Media App with React Native and Firebase - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Social Media App with React Native and Firebase","og_description":"In this tutorial, we will learn how to build a social media app using React Native and Firebase. We will be using Firebase for authentication, database, and storage functionality. React Native will allow us to develop our app for both iOS and Android platforms using a single codebase. Prerequisites In Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:58+00:00","article_modified_time":"2023-11-05T05:48:25+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Build a Social Media App with React Native and Firebase","datePublished":"2023-11-04T23:13:58+00:00","dateModified":"2023-11-05T05:48:25+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/"},"wordCount":460,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"app development\"","\"build app\"","\"Firebase\"","\"mobile app development\"","\"React Native\"","[\"social media app\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/","url":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/","name":"How to Build a Social Media App with React Native and Firebase - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:58+00:00","dateModified":"2023-11-05T05:48:25+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-build-a-social-media-app-with-react-native-and-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Build a Social Media App with React Native and Firebase"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3977"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3977"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3977\/revisions"}],"predecessor-version":[{"id":4553,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3977\/revisions\/4553"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3977"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}