title
React Native Tutorial for Beginners - Getting Started

description
React Native is a great library that allows you to build native mobile apps. Time to get started! Join the full React Native course: https://acad.link/react-native Exclusive discount also available for our React course: https://acad.link/reactjs Join our Academind Community on Discord for free: https://discord.gg/gxvEWGU Check out all our other courses: https://academind.com/learn/our-courses ---------- Which Styles can you use: https://github.com/vhpoet/react-native-styling-cheat-sheet Don't miss the official docs: https://facebook.github.io/react-native/ create-react-native-app docs: https://github.com/react-community/create-react-native-app How to run React Native on a device/ simulator: https://facebook.github.io/react-native/docs/running-on-device.html react-native-maps repo: https://github.com/react-community/react-native-maps Getting a blank map screen with React Native Maps? Check this thread: https://github.com/react-community/react-native-maps/issues/118 How to debug React Native Apps: https://facebook.github.io/react-native/docs/debugging.html Source Code: https://github.com/academind/react-native-by-example ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'React Native Tutorial for Beginners - Getting Started', 'heatmap': [{'end': 405.209, 'start': 312.487, 'weight': 1}, {'end': 496.199, 'start': 430.686, 'weight': 0.805}, {'end': 805.752, 'start': 775.053, 'weight': 0.838}, {'end': 1035.702, 'start': 999.749, 'weight': 0.718}], 'summary': 'This react native tutorial covers the fundamentals, project setup, android and ios development, user location component, integrating react native maps, managing location data with firebase, and handling fetch requests, providing detailed steps and demonstrations throughout the chapters.', 'chapters': [{'end': 710.62, 'segs': [{'end': 49.355, 'src': 'embed', 'start': 25.446, 'weight': 0, 'content': [{'end': 34.489, 'text': "React Native, in case you weren't aware, is a library that builds up upon React and JavaScript and allows you to build native mobile apps.", 'start': 25.446, 'duration': 9.043}, {'end': 42.792, 'text': 'so apps for iOS and Android that use React and JavaScript for you during the build process, during development,', 'start': 34.489, 'duration': 8.303}, {'end': 49.355, 'text': 'but then are real native apps that you distribute over the app stores that run natively on these devices.', 'start': 42.792, 'duration': 6.563}], 'summary': 'React native is a library for building ios and android apps using react and javascript.', 'duration': 23.909, 'max_score': 25.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c25446.jpg'}, {'end': 223.078, 'src': 'embed', 'start': 195.561, 'weight': 1, 'content': [{'end': 203.667, 'text': 'is that you got all the web stack technologies at your disposal and you build your native app just as you build a web app For React Native.', 'start': 195.561, 'duration': 8.106}, {'end': 204.208, 'text': "it's different.", 'start': 203.667, 'duration': 0.541}, {'end': 211.151, 'text': 'There we have a real native app because all the UI is going to get compiled to native code.', 'start': 204.608, 'duration': 6.543}, {'end': 212.532, 'text': "That's really important.", 'start': 211.492, 'duration': 1.04}, {'end': 215.094, 'text': "We're going to get a native app out of that.", 'start': 212.872, 'duration': 2.222}, {'end': 223.078, 'text': 'The JavaScript part is going to stay JavaScript, but all of the UI elements, the buttons and so on will be the native equivalents,', 'start': 215.514, 'duration': 7.564}], 'summary': 'React native allows building native apps with web stack technologies while ui elements are compiled to native code.', 'duration': 27.517, 'max_score': 195.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c195561.jpg'}, {'end': 405.209, 'src': 'heatmap', 'start': 312.487, 'weight': 1, 'content': [{'end': 316.049, 'text': 'And now this will install this package globally on your machine.', 'start': 312.487, 'duration': 3.562}, {'end': 322.293, 'text': 'Once this is done, you can create a new project by running create React Native App as a command.', 'start': 317.089, 'duration': 5.204}, {'end': 328.158, 'text': "So here I navigated into the folder where I want to create my project and then I'll name it shareplaces.", 'start': 322.574, 'duration': 5.584}, {'end': 333.871, 'text': 'You can choose any name you want.', 'start': 332.711, 'duration': 1.16}, {'end': 337.732, 'text': 'This will create a new folder and install all the required dependencies.', 'start': 334.511, 'duration': 3.221}, {'end': 342.213, 'text': "Here you can see it's using Yarn, an alternative to NPM, which I got installed.", 'start': 338.292, 'duration': 3.921}, {'end': 346.094, 'text': "Check it out if you're facing any issues with NPM and that setup process.", 'start': 342.553, 'duration': 3.541}, {'end': 351.255, 'text': "Also make sure to not use NPM version 5, at least at the point I'm recording this.", 'start': 346.614, 'duration': 4.641}, {'end': 352.295, 'text': "It's buggy.", 'start': 351.495, 'duration': 0.8}, {'end': 353.916, 'text': 'Use version 4 instead.', 'start': 352.736, 'duration': 1.18}, {'end': 359.358, 'text': 'and once all of that is finished, we actually can start our app already.', 'start': 354.776, 'duration': 4.582}, {'end': 364.519, 'text': 'we can navigate into the newly traded folder and run npm start now.', 'start': 359.358, 'duration': 5.161}, {'end': 368.381, 'text': 'this will build the project and spin up a development server.', 'start': 364.519, 'duration': 3.862}, {'end': 369.341, 'text': "so that's pretty cool.", 'start': 368.381, 'duration': 0.96}, {'end': 377.624, 'text': 'you still get these web development like features where your native app will actually connect to that development server to get live updates and so on,', 'start': 369.341, 'duration': 8.283}, {'end': 380.604, 'text': 'and now you can do something cool.', 'start': 378.704, 'duration': 1.9}, {'end': 388.986, 'text': 'you can visit the app store on your real smartphone, the real device you own and search for an app named expo.', 'start': 380.604, 'duration': 8.382}, {'end': 396.468, 'text': 'expo client is the exact name, and if you got it, you can open it and scan that qr code you should see here,', 'start': 388.986, 'duration': 7.482}, {'end': 405.209, 'text': "and this will connect your development server and launch your app on your real device, though and that's important only in a wrapper.", 'start': 396.468, 'duration': 8.741}], 'summary': 'Installing react native app globally, creating project, using yarn, avoiding npm version 5, starting app with npm start, and launching on real device with expo client.', 'duration': 92.722, 'max_score': 312.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c312487.jpg'}, {'end': 342.213, 'src': 'embed', 'start': 317.089, 'weight': 2, 'content': [{'end': 322.293, 'text': 'Once this is done, you can create a new project by running create React Native App as a command.', 'start': 317.089, 'duration': 5.204}, {'end': 328.158, 'text': "So here I navigated into the folder where I want to create my project and then I'll name it shareplaces.", 'start': 322.574, 'duration': 5.584}, {'end': 333.871, 'text': 'You can choose any name you want.', 'start': 332.711, 'duration': 1.16}, {'end': 337.732, 'text': 'This will create a new folder and install all the required dependencies.', 'start': 334.511, 'duration': 3.221}, {'end': 342.213, 'text': "Here you can see it's using Yarn, an alternative to NPM, which I got installed.", 'start': 338.292, 'duration': 3.921}], 'summary': 'Creating a new react native project named shareplaces installs dependencies using yarn.', 'duration': 25.124, 'max_score': 317.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c317089.jpg'}, {'end': 405.209, 'src': 'embed', 'start': 368.381, 'weight': 4, 'content': [{'end': 369.341, 'text': "so that's pretty cool.", 'start': 368.381, 'duration': 0.96}, {'end': 377.624, 'text': 'you still get these web development like features where your native app will actually connect to that development server to get live updates and so on,', 'start': 369.341, 'duration': 8.283}, {'end': 380.604, 'text': 'and now you can do something cool.', 'start': 378.704, 'duration': 1.9}, {'end': 388.986, 'text': 'you can visit the app store on your real smartphone, the real device you own and search for an app named expo.', 'start': 380.604, 'duration': 8.382}, {'end': 396.468, 'text': 'expo client is the exact name, and if you got it, you can open it and scan that qr code you should see here,', 'start': 388.986, 'duration': 7.482}, {'end': 405.209, 'text': "and this will connect your development server and launch your app on your real device, though and that's important only in a wrapper.", 'start': 396.468, 'duration': 8.741}], 'summary': 'Expo allows real-time updates for native apps with live server connection and deployment through expo client on real devices.', 'duration': 36.828, 'max_score': 368.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c368381.jpg'}, {'end': 458.667, 'src': 'embed', 'start': 430.686, 'weight': 3, 'content': [{'end': 435.129, 'text': 'So, therefore, I will quit this process and run npm, run eject,', 'start': 430.686, 'duration': 4.443}, {'end': 442.255, 'text': 'which is a command that gets out of that wrapped world here and gives us access to the full workflow,', 'start': 435.129, 'duration': 7.126}, {'end': 446.678, 'text': 'to the real native app and to the full capabilities of React Native, so to say.', 'start': 442.255, 'duration': 4.423}, {'end': 453.804, 'text': 'Though I will say this export approach is great and you can build apps with that too, but I like the raw, the original approach.', 'start': 447.079, 'duration': 6.725}, {'end': 455.905, 'text': "So I'll run npm run eject.", 'start': 454.464, 'duration': 1.441}, {'end': 458.667, 'text': "I'll choose a React Native project which I want to create.", 'start': 456.446, 'duration': 2.221}], 'summary': 'The speaker prefers running npm eject to access the full workflow and capabilities of react native, despite acknowledging the benefits of the export approach.', 'duration': 27.981, 'max_score': 430.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c430686.jpg'}, {'end': 496.199, 'src': 'heatmap', 'start': 430.686, 'weight': 0.805, 'content': [{'end': 435.129, 'text': 'So, therefore, I will quit this process and run npm, run eject,', 'start': 430.686, 'duration': 4.443}, {'end': 442.255, 'text': 'which is a command that gets out of that wrapped world here and gives us access to the full workflow,', 'start': 435.129, 'duration': 7.126}, {'end': 446.678, 'text': 'to the real native app and to the full capabilities of React Native, so to say.', 'start': 442.255, 'duration': 4.423}, {'end': 453.804, 'text': 'Though I will say this export approach is great and you can build apps with that too, but I like the raw, the original approach.', 'start': 447.079, 'duration': 6.725}, {'end': 455.905, 'text': "So I'll run npm run eject.", 'start': 454.464, 'duration': 1.441}, {'end': 458.667, 'text': "I'll choose a React Native project which I want to create.", 'start': 456.446, 'duration': 2.221}, {'end': 463.391, 'text': 'Give it a name as it should appear on the user device screens.', 'start': 459.928, 'duration': 3.463}, {'end': 465.112, 'text': 'Share places maybe.', 'start': 463.811, 'duration': 1.301}, {'end': 473.238, 'text': 'And then Android and Xcode Studio project name, because you can open that project in Android Studio and Xcode,', 'start': 465.132, 'duration': 8.106}, {'end': 475.34, 'text': 'which are the IDEs for developing native apps.', 'start': 473.238, 'duration': 2.102}, {'end': 483.787, 'text': 'and you will need to do this, especially for xcode, if you add certain libraries that hook into real native device features.', 'start': 475.9, 'duration': 7.887}, {'end': 486.77, 'text': 'now, with that we got this running.', 'start': 483.787, 'duration': 2.983}, {'end': 496.199, 'text': 'by the way, if you ever, during npm start, encounter an error, there should be all the two commands you can copy in to fix that error immediately.', 'start': 486.77, 'duration': 9.429}], 'summary': 'Switched to the raw, original approach to react native by running npm run eject for accessing full capabilities and native app development, including handling errors during npm start.', 'duration': 65.513, 'max_score': 430.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c430686.jpg'}, {'end': 625.558, 'src': 'embed', 'start': 596.318, 'weight': 5, 'content': [{'end': 598.401, 'text': "it doesn't work with the normal css.", 'start': 596.318, 'duration': 2.083}, {'end': 602.024, 'text': "it doesn't even work with the same javascript support as in the browser.", 'start': 598.401, 'duration': 3.623}, {'end': 606.967, 'text': "All of that is given to you by React Native and CSS isn't given to you at all.", 'start': 602.885, 'duration': 4.082}, {'end': 615.632, 'text': 'So, instead of the normal DOM elements like a div, a span, h1 and so on, you use a couple of components provided by React Native,', 'start': 607.628, 'duration': 8.004}, {'end': 622.516, 'text': 'which we therefore import from the React Native package, like the view which, essentially, is your div replacement,', 'start': 615.632, 'duration': 6.884}, {'end': 625.558, 'text': 'and the text which would be your paragraph or span replacement.', 'start': 622.516, 'duration': 3.042}], 'summary': 'React native provides components like view and text as replacements for normal dom elements.', 'duration': 29.24, 'max_score': 596.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c596318.jpg'}], 'start': 2.808, 'title': 'React native fundamentals and project setup', 'summary': "Covers react native basics, including its features, usage, and differences from web-based apps, emphasizing its 'learn once write everywhere' theme. it also demonstrates the installation process using create react native app and explains setting up a react native project with expo, highlighting the use of react native components instead of traditional html elements.", 'chapters': [{'end': 368.381, 'start': 2.808, 'title': 'React native basics & getting started', 'summary': "Covers the basics of react native, explaining its features, usage, and differences from web-based apps, emphasizing its 'learn once write everywhere' theme. it also demonstrates the installation process using create react native app and provides tips for a smooth setup.", 'duration': 365.573, 'highlights': ['Basics of React Native React Native is a library that enables building native mobile apps for iOS and Android using React and JavaScript, providing real native apps distributed over app stores, and tailored for specific platforms without requiring Java or Swift code.', 'Differences from Web-Based Apps React Native apps are not web pages or web apps hosted in a web view, and unlike Cordova apps, they compile UI elements to native code, ensuring better performance and leveraging web stack technologies while providing a real native app experience.', 'Installation Process with Create React Native App The installation process involves using the Create React Native App tool, equivalent to Create React App for React projects, to create a new project and install required dependencies, with additional tips for using Yarn and avoiding NPM version 5 issues.']}, {'end': 710.62, 'start': 368.381, 'title': 'Setting up react native project', 'summary': 'Explains how to set up a react native project, highlighting the process of using expo to connect to a development server, the limitations of using a wrapper app, and the use of react native components instead of traditional html elements.', 'duration': 342.239, 'highlights': ['Expo client allows connecting to development server and launching the app on a real device without installation, but has limitations with native features The Expo client enables connecting to the development server and launching the app on a real device without installing it, but it has limitations with using native features like maps.', "Running 'npm run eject' provides access to the full workflow and capabilities of React Native, enabling the use of real native app features Running 'npm run eject' provides access to the full workflow and capabilities of React Native, enabling the use of real native app features and functionalities.", "React Native uses components like 'view' and 'text' as replacements for traditional HTML elements, and requires using a style sheet object to define styles, emulating CSS but with limitations React Native uses components like 'view' and 'text' as replacements for traditional HTML elements, and requires using a style sheet object to define styles, emulating CSS but with limitations in supporting all CSS features."]}], 'duration': 707.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2808.jpg', 'highlights': ['React Native enables building native mobile apps for iOS and Android using React and JavaScript, providing real native apps distributed over app stores.', 'React Native apps compile UI elements to native code, ensuring better performance and leveraging web stack technologies while providing a real native app experience.', 'The installation process involves using the Create React Native App tool to create a new project and install required dependencies, with additional tips for using Yarn and avoiding NPM version 5 issues.', "Running 'npm run eject' provides access to the full workflow and capabilities of React Native, enabling the use of real native app features and functionalities.", 'Expo client enables connecting to the development server and launching the app on a real device without installing it, but has limitations with using native features like maps.', "React Native uses components like 'view' and 'text' as replacements for traditional HTML elements, and requires using a style sheet object to define styles, emulating CSS but with limitations in supporting all CSS features."]}, {'end': 1315.607, 'segs': [{'end': 765.829, 'src': 'embed', 'start': 731.557, 'weight': 1, 'content': [{'end': 733.378, 'text': "that's not permitted by apple.", 'start': 731.557, 'duration': 1.821}, {'end': 738.462, 'text': "basically, you need xcode to build an ios app and xcode doesn't run on windows.", 'start': 733.378, 'duration': 5.084}, {'end': 743.107, 'text': 'other combinations like android for windows and so on are possible.', 'start': 739.523, 'duration': 3.584}, {'end': 748.552, 'text': 'so you will find installation instructions there, like for how to install android on windows.', 'start': 743.107, 'duration': 5.445}, {'end': 751.095, 'text': 'make sure to follow through all these steps here at the bottom.', 'start': 748.552, 'duration': 2.543}, {'end': 752.456, 'text': 'install android studio.', 'start': 751.095, 'duration': 1.361}, {'end': 757.081, 'text': 'install the sdk maybe not the latest version, but the one before that.', 'start': 752.456, 'duration': 4.625}, {'end': 758.903, 'text': "the latest version often isn't supported.", 'start': 757.081, 'duration': 1.822}, {'end': 765.829, 'text': 'install the android device manager, the build support library and so on.', 'start': 759.683, 'duration': 6.146}], 'summary': 'Xcode needed for ios app, not on windows. android on windows possible, follow installation instructions.', 'duration': 34.272, 'max_score': 731.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c731557.jpg'}, {'end': 837.568, 'src': 'heatmap', 'start': 775.053, 'weight': 0, 'content': [{'end': 781.796, 'text': 'open android studio and create a new virtual device there you can also find instructions on how to do that here.', 'start': 775.053, 'duration': 6.743}, {'end': 783.437, 'text': 'preparing a virtual device.', 'start': 781.796, 'duration': 1.641}, {'end': 788.579, 'text': 'here you find screenshots and so on, and in the end you just launch it by clicking the play button.', 'start': 783.437, 'duration': 5.142}, {'end': 797.003, 'text': "once all of that is done, you can go into your project, open the terminal that's the normal terminal just integrated into my ide and run npm,", 'start': 788.579, 'duration': 8.424}, {'end': 799.564, 'text': 'run android and the same, of course, for ios.', 'start': 797.003, 'duration': 2.561}, {'end': 800.685, 'text': 'once you set everything up there.', 'start': 799.564, 'duration': 1.121}, {'end': 805.752, 'text': 'This will open this terminal window where a process starts.', 'start': 801.525, 'duration': 4.227}, {'end': 807.315, 'text': "That's your development server.", 'start': 805.993, 'duration': 1.322}, {'end': 808.397, 'text': "Don't quit this.", 'start': 807.515, 'duration': 0.882}, {'end': 813.105, 'text': "It's important to get live updates and for your app to continue running in development mode.", 'start': 808.697, 'duration': 4.408}, {'end': 817.163, 'text': 'This run Android process here will build your project now.', 'start': 814.502, 'duration': 2.661}, {'end': 819.623, 'text': 'Thereafter, it will fill the finish and not keep running.', 'start': 817.463, 'duration': 2.16}, {'end': 822.064, 'text': 'So the development server is the only thing that keeps running.', 'start': 819.803, 'duration': 2.261}, {'end': 829.266, 'text': 'And this will now build the project and bundle it and ship it to the simulator and then also start it there.', 'start': 822.864, 'duration': 6.402}, {'end': 833.787, 'text': 'So once this is done, the app should start up on that simulator, which I started.', 'start': 829.826, 'duration': 3.961}, {'end': 835.747, 'text': 'Here it is coming.', 'start': 834.367, 'duration': 1.38}, {'end': 837.568, 'text': 'Needs to connect to the server.', 'start': 836.307, 'duration': 1.261}], 'summary': 'Using android studio, create a virtual device, run npm and launch the app for testing and development.', 'duration': 40.565, 'max_score': 775.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c775053.jpg'}, {'end': 911.377, 'src': 'embed', 'start': 884.064, 'weight': 3, 'content': [{'end': 890.266, 'text': 'We want to get the user location and also then share it with other users, display it on a map and so on.', 'start': 884.064, 'duration': 6.202}, {'end': 894.627, 'text': 'Now to achieve that, we need to have a button.', 'start': 890.886, 'duration': 3.741}, {'end': 897.508, 'text': 'and i will create my own component for this.', 'start': 895.407, 'duration': 2.101}, {'end': 900.25, 'text': "so i'll create a new folder which i name components.", 'start': 897.508, 'duration': 2.742}, {'end': 911.377, 'text': 'you could also place this in a subfolder which you name source if you want, and in that folder i will add my fetch location component.', 'start': 900.25, 'duration': 11.127}], 'summary': 'Developing a custom component to fetch and share user location for mapping.', 'duration': 27.313, 'max_score': 884.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c884064.jpg'}, {'end': 1035.702, 'src': 'heatmap', 'start': 999.749, 'weight': 0.718, 'content': [{'end': 1004.995, 'text': 'So I need to set a prop on the component when I use it and then hook it up to a method there.', 'start': 999.749, 'duration': 5.246}, {'end': 1008.099, 'text': "So let's use fetch location in app.js.", 'start': 1005.556, 'duration': 2.543}, {'end': 1014.446, 'text': "There I will import fetch location with a capital F as it's the convention for custom components.", 'start': 1008.679, 'duration': 5.767}, {'end': 1021.492, 'text': 'from dot slash components, fetch location and then instead my text here.', 'start': 1015.367, 'duration': 6.125}, {'end': 1031.239, 'text': "instead of that i'll import, i'll add fetch location and now, important, we need to set it on get location prop, on that, so on.", 'start': 1021.492, 'duration': 9.747}, {'end': 1035.702, 'text': 'get location prop should now refer to a method that then gets executed.', 'start': 1031.239, 'duration': 4.463}], 'summary': "Set 'fetch location' component prop to 'get location prop' method.", 'duration': 35.953, 'max_score': 999.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c999749.jpg'}, {'end': 1112.045, 'src': 'embed', 'start': 1090.55, 'weight': 6, 'content': [{'end': 1099.056, 'text': 'I position it next to my simulator and there you can open the developer tools and now you will see the console log from your device here,', 'start': 1090.55, 'duration': 8.506}, {'end': 1100.697, 'text': 'which of course is cool for debugging.', 'start': 1099.056, 'duration': 1.641}, {'end': 1106.841, 'text': "There's, of course, more you can do with debugging, and you'll find more information on that, as well as on React Native in general,", 'start': 1101.258, 'duration': 5.583}, {'end': 1109.263, 'text': "in my Udemy course, to which you'll find a link in the video description.", 'start': 1106.841, 'duration': 2.422}, {'end': 1112.045, 'text': "But for now, let's keep it as it is here.", 'start': 1110.144, 'duration': 1.901}], 'summary': 'Learn debugging in udemy react native course.', 'duration': 21.495, 'max_score': 1090.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1090550.jpg'}, {'end': 1181.621, 'src': 'embed', 'start': 1156.841, 'weight': 4, 'content': [{'end': 1163.284, 'text': 'here you can find that information and here you will find that there is a navigator geolocation object you can access.', 'start': 1156.841, 'duration': 6.443}, {'end': 1166.446, 'text': "it's the same object you can use in the browser to get the user location.", 'start': 1163.284, 'duration': 3.162}, {'end': 1172.496, 'text': 'So here we can use navigator geolocation and then call get current position.', 'start': 1167.273, 'duration': 5.223}, {'end': 1175.257, 'text': 'This method expects two arguments.', 'start': 1173.496, 'duration': 1.761}, {'end': 1177.759, 'text': 'The first one is a callback function.', 'start': 1175.738, 'duration': 2.021}, {'end': 1181.621, 'text': "Here I'll use an arrow function where I get the user position.", 'start': 1178.239, 'duration': 3.382}], 'summary': 'Using navigator geolocation object to access user position.', 'duration': 24.78, 'max_score': 1156.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1156841.jpg'}, {'end': 1230.57, 'src': 'embed', 'start': 1205.924, 'weight': 5, 'content': [{'end': 1213.066, 'text': "and if we don't even tell our app that we will eventually need this permission, it will just crash.", 'start': 1205.924, 'duration': 7.142}, {'end': 1220.706, 'text': 'so what you can and should do is access the documentation on Navigator Geolocation here in the React Native docs.', 'start': 1213.066, 'duration': 7.64}, {'end': 1228.989, 'text': 'And there you see how to set up the permissions on iOS, where you will basically need to edit the info plist file, and on Android,', 'start': 1221.406, 'duration': 7.583}, {'end': 1230.57, 'text': 'where you need to copy that entry.', 'start': 1228.989, 'duration': 1.581}], 'summary': 'Access documentation on navigator geolocation for setting up permissions on ios and android to prevent app crashes.', 'duration': 24.646, 'max_score': 1205.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1205924.jpg'}], 'start': 711.5, 'title': 'Android and ios development and user location component', 'summary': "Provides detailed instructions on setting up android and ios development environments, including installing android studio, setting environment variables, and running the development server to build and launch the app on simulators. additionally, it demonstrates building a custom component 'fetch location' to obtain and display user location in a react native app, utilizing the navigator geolocation object and handling permissions to prevent app crashes, and debugging through remote javascript console.", 'chapters': [{'end': 883.904, 'start': 711.5, 'title': 'Setting up android and ios development', 'summary': 'Provides detailed instructions on setting up android and ios development environments, including installing android studio, setting environment variables, and running the development server to build and launch the app on simulators.', 'duration': 172.404, 'highlights': ['Instructions for setting up Android and iOS development environments, including installing Android Studio, setting environment variables, and running the development server. detailed instructions, installing Android Studio, setting environment variables, running the development server', "Noting the inability to build for iOS on Windows due to Apple's restrictions, and the requirement of Xcode which does not run on Windows. inability to build for iOS on Windows, requirement of Xcode for building iOS apps", 'Process of running the development server to build the project, bundle it, and ship it to the simulator, as well as starting the app on the simulator. running the development server, building and shipping the project to the simulator, starting the app on the simulator']}, {'end': 1315.607, 'start': 884.064, 'title': 'Building user location component', 'summary': "Demonstrates building a custom component 'fetch location' to obtain and display user location in a react native app, utilizing the navigator geolocation object and handling permissions to prevent app crashes, and debugging through remote javascript console.", 'duration': 431.543, 'highlights': ["Building custom 'Fetch Location' component Demonstrating the creation of a custom 'Fetch Location' component to handle user location, allowing users to build their own components in React Native apps.", "Utilizing navigator geolocation object to obtain user position Using the navigator geolocation object in React Native to access and obtain the user's position, demonstrated through the 'get current position' method.", 'Handling permissions to prevent app crashes Emphasizing the importance of handling permissions to access user location, preventing app crashes by setting up permissions on iOS and Android, and updating the Android manifest file.', 'Debugging through remote JavaScript console Illustrating the use of remote debugging through the JavaScript console for React Native apps, enabling developers to debug JavaScript remotely and view console logs from the device for effective debugging.']}], 'duration': 604.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c711500.jpg', 'highlights': ['Detailed instructions for setting up Android and iOS development environments, including installing Android Studio, setting environment variables, and running the development server.', "Noting the inability to build for iOS on Windows due to Apple's restrictions, and the requirement of Xcode which does not run on Windows.", 'Process of running the development server to build the project, bundle it, and ship it to the simulator, as well as starting the app on the simulator.', "Building custom 'Fetch Location' component to handle user location in React Native apps.", 'Utilizing navigator geolocation object to obtain user position in React Native.', 'Emphasizing the importance of handling permissions to access user location, preventing app crashes by setting up permissions on iOS and Android, and updating the Android manifest file.', 'Illustrating the use of remote debugging through the JavaScript console for React Native apps, enabling developers to debug JavaScript remotely and view console logs from the device for effective debugging.']}, {'end': 1788.718, 'segs': [{'end': 1453.55, 'src': 'embed', 'start': 1362.843, 'weight': 0, 'content': [{'end': 1371.148, 'text': 'which wraps the Google Maps and Apple Maps SDKs and gives you components you can use in your React Native app.', 'start': 1362.843, 'duration': 8.305}, {'end': 1376.432, 'text': 'And these components really will hook into the native code and give you access to the native code features,', 'start': 1371.429, 'duration': 5.003}, {'end': 1379.073, 'text': 'though for you with a nice JavaScript interface.', 'start': 1376.432, 'duration': 2.641}, {'end': 1383.298, 'text': 'You should visit the installation instructions the first time you are here.', 'start': 1380.114, 'duration': 3.184}, {'end': 1388.945, 'text': 'And there you see that first of all, we install it like any other JavaScript library with npm install.', 'start': 1383.919, 'duration': 5.026}, {'end': 1389.926, 'text': "So let's do that.", 'start': 1389.325, 'duration': 0.601}, {'end': 1393.711, 'text': "Let's run this command in our terminal in our project.", 'start': 1390.086, 'duration': 3.625}, {'end': 1398.216, 'text': 'And this will download React Native Maps and add it to the node modules folder.', 'start': 1394.171, 'duration': 4.045}, {'end': 1402.579, 'text': 'Now, once this completes, we can also have a look at the next steps.', 'start': 1399.077, 'duration': 3.502}, {'end': 1411.866, 'text': 'Because since this library will actually hook into native device features using the native maps SDKs, we need to link it to our apps.', 'start': 1403.14, 'duration': 8.726}, {'end': 1416.088, 'text': 'You can do that automatically with this command, though for this to work,', 'start': 1412.506, 'duration': 3.582}, {'end': 1422.953, 'text': 'you first of all need to run npm install-g react-native to have this tool available globally on your machine.', 'start': 1416.088, 'duration': 6.865}, {'end': 1425.969, 'text': 'But I will show you the manual linking way.', 'start': 1423.928, 'duration': 2.041}, {'end': 1428.529, 'text': 'Here are the explanations for iOS.', 'start': 1426.609, 'duration': 1.92}, {'end': 1430.89, 'text': 'I recommend the last way, option three.', 'start': 1429.069, 'duration': 1.821}, {'end': 1435.031, 'text': 'And the steps here should be really clear on how to do this in Xcode.', 'start': 1431.89, 'duration': 3.141}, {'end': 1437.892, 'text': 'For Android, we follow these steps.', 'start': 1435.811, 'duration': 2.081}, {'end': 1446.414, 'text': 'And there, first of all, we take that code here and compile our project, our React Native Maps project.', 'start': 1438.412, 'duration': 8.002}, {'end': 1453.55, 'text': 'Now for that, you need Google Play Services installed, so make sure you check this in your SDK Manager in your Android Studio.', 'start': 1447.406, 'duration': 6.144}], 'summary': 'React native maps sdks installation for google and apple maps, linking to native features, and setup for ios and android platforms.', 'duration': 90.707, 'max_score': 1362.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1362843.jpg'}, {'end': 1551.179, 'src': 'embed', 'start': 1521.991, 'weight': 4, 'content': [{'end': 1529.139, 'text': 'you will now need to add a new entry to the application element in your android manifest xml file.', 'start': 1521.991, 'duration': 7.148}, {'end': 1541.152, 'text': "so let's go back to our project app source, android manifest, and here in application, i'll temporarily store my key and then copy that metadata item.", 'start': 1529.139, 'duration': 12.013}, {'end': 1551.179, 'text': "don't overwrite the full application, just add this item here and then take your key and replace your google maps api key with that.", 'start': 1541.152, 'duration': 10.027}], 'summary': 'Add a new entry to the android manifest xml file in the application element to replace the google maps api key.', 'duration': 29.188, 'max_score': 1521.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1521991.jpg'}, {'end': 1611.753, 'src': 'embed', 'start': 1580.053, 'weight': 7, 'content': [{'end': 1590.377, 'text': 'and then take the new maps package code here and in the same file, scroll down to the get packages function,', 'start': 1580.053, 'duration': 10.324}, {'end': 1597.686, 'text': 'add a comma of the main react package and add this entry, And with that you should have everything you need to work with maps.', 'start': 1590.377, 'duration': 7.309}, {'end': 1599.026, 'text': "Now, let's see if that's the case.", 'start': 1597.766, 'duration': 1.26}, {'end': 1608.071, 'text': "Let's first of all create a new component and I'll name it UsersMap.js.", 'start': 1600.047, 'duration': 8.024}, {'end': 1611.753, 'text': "I'll import React in here from React.", 'start': 1609.212, 'duration': 2.541}], 'summary': 'Add main react package to get packages function for new maps package code.', 'duration': 31.7, 'max_score': 1580.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1580053.jpg'}, {'end': 1708.999, 'src': 'embed', 'start': 1681.46, 'weight': 6, 'content': [{'end': 1690.669, 'text': "So I'll create a new constant below my functional component, which I'll name styles, where I use style sheet create and pass our object to it.", 'start': 1681.46, 'duration': 9.209}, {'end': 1698.215, 'text': "And there I'll for one create a new property named MapContainer that will hold the styles the view receives.", 'start': 1691.693, 'duration': 6.522}, {'end': 1701.036, 'text': 'And here I simply want to use width 100%.', 'start': 1698.916, 'duration': 2.12}, {'end': 1704.598, 'text': 'Needs to be wrapped in quotation marks then.', 'start': 1701.036, 'duration': 3.562}, {'end': 1706.819, 'text': 'And height maybe 200.', 'start': 1705.818, 'duration': 1.001}, {'end': 1708.999, 'text': 'This will be pixels automatically.', 'start': 1706.819, 'duration': 2.18}], 'summary': "Creating a new constant 'styles' with width 100% and height 200 pixels.", 'duration': 27.539, 'max_score': 1681.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1681460.jpg'}], 'start': 1315.607, 'title': 'Integrating react native maps', 'summary': 'Explains how to integrate the react native maps library, including installation steps, linking to native device features, obtaining a maps api key for ios and android, with a focus on linking for android and adding the maps api key to the android manifest xml file. it also demonstrates the process of integrating react native maps into a react native app, including importing packages, creating a new component, setting up the map view with styling, and integrating the component into the app.', 'chapters': [{'end': 1580.053, 'start': 1315.607, 'title': 'Integrating react native maps', 'summary': 'Explains how to integrate the react native maps library, including installation steps, linking to native device features, and obtaining a maps api key for both ios and android, with a focus on linking for android and adding the maps api key to the android manifest xml file.', 'duration': 264.446, 'highlights': ['The chapter explains how to integrate the React Native Maps library, including installation steps, linking to native device features, and obtaining a Maps API key for both iOS and Android. Integration of React Native Maps library, installation steps, linking to native device features, obtaining Maps API key', 'The library wraps the Google Maps and Apple Maps SDKs and provides components for use in a React Native app, with access to native code features through a JavaScript interface. Library wrapping Google Maps and Apple Maps SDKs, components for React Native app, access to native code features', 'The installation instructions involve npm install command to download and add React Native Maps to the node modules folder. Installation instructions, npm install command', 'For Android, the steps include compiling the project, ensuring Google Play Services are installed, and adding dependencies and API key to the android manifest xml file. Steps for Android, compiling project, installing Google Play Services, adding dependencies and API key to android manifest xml file', 'For obtaining the Maps API key, the process involves generating new credentials in the Google API console and adding the key to the android manifest xml file. Obtaining Maps API key, generating credentials in Google API console, adding key to android manifest xml file']}, {'end': 1788.718, 'start': 1580.053, 'title': 'Integrating react native maps', 'summary': 'Demonstrates the process of integrating react native maps into a react native app, including importing the necessary packages, creating a new component, setting up the map view with styling, and integrating the component into the app.', 'duration': 208.665, 'highlights': ['The chapter demonstrates the process of integrating React Native Maps into a React Native app.', 'Setting up the map view with styling by creating a new constant for styles and applying it to the map view and the containing view.', 'Importing the necessary packages and creating a new component named UsersMap.js.']}], 'duration': 473.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1315607.jpg', 'highlights': ['Integration of React Native Maps library, installation steps, linking to native device features, obtaining Maps API key', 'Library wrapping Google Maps and Apple Maps SDKs, components for React Native app, access to native code features', 'Installation instructions, npm install command', 'Steps for Android, compiling project, installing Google Play Services, adding dependencies and API key to android manifest xml file', 'Obtaining Maps API key, generating credentials in Google API console, adding key to android manifest xml file', 'Demonstrates the process of integrating React Native Maps into a React Native app', 'Setting up the map view with styling by creating a new constant for styles and applying it to the map view and the containing view', 'Importing the necessary packages and creating a new component named UsersMap.js']}, {'end': 2229.762, 'segs': [{'end': 1832.022, 'src': 'embed', 'start': 1809.516, 'weight': 0, 'content': [{'end': 1821.463, 'text': "also, make sure because that's one common source that in your credentials page here, if you go to library, you can go to google maps, android api,", 'start': 1809.516, 'duration': 11.947}, {'end': 1824.504, 'text': 'that this is enabled, enable it otherwise.', 'start': 1821.463, 'duration': 3.041}, {'end': 1828.701, 'text': 'if this is not the case, With that, you should see the map here.', 'start': 1824.504, 'duration': 4.197}, {'end': 1832.022, 'text': 'Now, it would be nice to have some margin between the map and the button.', 'start': 1828.721, 'duration': 3.301}], 'summary': 'Enable google maps in credentials to display the map with a margin.', 'duration': 22.506, 'max_score': 1809.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1809516.jpg'}, {'end': 1880.104, 'src': 'embed', 'start': 1854.462, 'weight': 1, 'content': [{'end': 1864.756, 'text': "And now for starting with a certain region being focused on the map, let's have a look at the official docs here on Airbnb Create React Native Maps.", 'start': 1854.462, 'duration': 10.294}, {'end': 1866.879, 'text': 'So on this GitHub repository you found via Google.', 'start': 1864.816, 'duration': 2.063}, {'end': 1875.462, 'text': 'there. if you scroll down, you will find a code snippet where we set an initial region prop to some object that has a latitude,', 'start': 1868.499, 'duration': 6.963}, {'end': 1880.104, 'text': 'a longitude and a latitude delta and a longitude delta.', 'start': 1875.462, 'duration': 4.642}], 'summary': 'The airbnb create react native maps documentation provides details on setting an initial region with latitude and longitude.', 'duration': 25.642, 'max_score': 1854.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1854462.jpg'}, {'end': 1953.483, 'src': 'embed', 'start': 1928.313, 'weight': 2, 'content': [{'end': 1934.276, 'text': "If I now save this and we go back to our application, you see we're zoomed in on San Francisco here.", 'start': 1928.313, 'duration': 5.963}, {'end': 1937.009, 'text': 'So this is the initial region.', 'start': 1935.765, 'duration': 1.244}, {'end': 1943.868, 'text': 'I now also want to focus onto the place the user sits in when I got that user location.', 'start': 1937.029, 'duration': 6.839}, {'end': 1947.542, 'text': "So for that, I'll go back to the app.js file.", 'start': 1944.761, 'duration': 2.781}, {'end': 1953.483, 'text': "And in there, I'll add my state property because I want to manage all the application state in here.", 'start': 1948.202, 'duration': 5.281}], 'summary': 'Application zoomed in on san francisco, managing state in app.js', 'duration': 25.17, 'max_score': 1928.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1928313.jpg'}], 'start': 1789.539, 'title': 'Setting up and integrating user location in react native maps', 'summary': 'Covers setting up and configuring a react native map, including enabling google maps api, setting initial region, and managing application state regarding user location. it also discusses integrating user location in react native maps, including setting user coordinates, handling markers and conditionally rendering content, and using firebase as a backend for storing and fetching user locations.', 'chapters': [{'end': 1975.652, 'start': 1789.539, 'title': 'Setting up and focusing react native maps', 'summary': 'Covers setting up and configuring a react native map, including enabling google maps api, setting initial region, and managing application state regarding user location.', 'duration': 186.113, 'highlights': ['Enabling Google Maps API in the credentials page under the library section is crucial for displaying the map, as mentioned by the presenter.', 'Setting the initial region using latitude, longitude, and delta values is essential for focusing on a specific area on the map, with the presenter demonstrating the process and its impact on the displayed region.', 'Managing application state for the user location in the app.js file is discussed, with the presenter emphasizing the use of state management and mentioning the possibility of using Redux in React Native.']}, {'end': 2229.762, 'start': 1977.194, 'title': 'Integrating user location in react native maps', 'summary': 'Discusses integrating user location in react native maps, including setting user coordinates, handling markers and conditionally rendering content, and using firebase as a backend for storing and fetching user locations.', 'duration': 252.568, 'highlights': ['The chapter discusses integrating user location in React Native Maps, including setting user coordinates, handling markers and conditionally rendering content, and using Firebase as a backend for storing and fetching user locations.', 'The code sets the user location to an object with latitude and longitude properties to navigate to a point and maintain a certain zoom level.', 'Props user location is passed down to the UsersMap component to update the initial region at runtime, allowing the map to focus on the specified location.', 'The chapter explains the conditional rendering of content in React, demonstrating how to render the user location marker only if the user position is available.', 'The use of Firebase as a backend for storing and fetching user locations is introduced, with a focus on setting up a new Firebase project and configuring the real-time database with open read and write permissions.']}], 'duration': 440.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c1789539.jpg', 'highlights': ['Enabling Google Maps API in the credentials page is crucial for displaying the map.', 'Setting the initial region using latitude, longitude, and delta values is essential for focusing on a specific area on the map.', 'Managing application state for the user location in the app.js file is discussed, emphasizing the use of state management.']}, {'end': 2484.15, 'segs': [{'end': 2347.728, 'src': 'embed', 'start': 2318.629, 'weight': 0, 'content': [{'end': 2320.93, 'text': 'And again, this is just a normal Fetch API.', 'start': 2318.629, 'duration': 2.301}, {'end': 2324.451, 'text': "If it's unclear to you how it works, check out some docs on it.", 'start': 2321.21, 'duration': 3.241}, {'end': 2327.212, 'text': "It's just React Native's implementation of it.", 'start': 2325.011, 'duration': 2.201}, {'end': 2330.361, 'text': 'Now, we send a POST request.', 'start': 2328.76, 'duration': 1.601}, {'end': 2333.722, 'text': "We also need to send a body, so let's specify a body property.", 'start': 2330.561, 'duration': 3.161}, {'end': 2340.285, 'text': 'And this now needs to be a JSON string, so we can use JSON Stringify to turn a JavaScript object into such a string.', 'start': 2334.542, 'duration': 5.743}, {'end': 2344.507, 'text': 'And I just want to send an object that holds a latitude and a longitude.', 'start': 2341.065, 'duration': 3.442}, {'end': 2347.728, 'text': 'So I will just copy latitude and longitude from there.', 'start': 2345.347, 'duration': 2.381}], 'summary': 'Using fetch api in react native to send a post request with a json string body.', 'duration': 29.099, 'max_score': 2318.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2318629.jpg'}, {'end': 2409.863, 'src': 'embed', 'start': 2363.139, 'weight': 1, 'content': [{'end': 2372.301, 'text': 'so I can chain then here to get back a response and log that response to the console and catch to catch any errors during that.', 'start': 2363.139, 'duration': 9.162}, {'end': 2379.083, 'text': 'Not server-side errors or 404 errors, but errors due to connectivity problems, for example.', 'start': 2372.881, 'duration': 6.202}, {'end': 2385.348, 'text': 'Now if we save that and I click get location, I get back a 200 response.', 'start': 2380.323, 'duration': 5.025}, {'end': 2386.109, 'text': "So that's looking good.", 'start': 2385.388, 'duration': 0.721}, {'end': 2387.009, 'text': 'Looks like it worked.', 'start': 2386.269, 'duration': 0.74}, {'end': 2394.977, 'text': 'If I check out Firebase, I see the places node and in there a new element with this cryptic ID.', 'start': 2387.95, 'duration': 7.027}, {'end': 2398.56, 'text': "That's an ID automatically generated by Firebase.", 'start': 2395.297, 'duration': 3.263}, {'end': 2401.283, 'text': 'And in there I see my latitude and longitude.', 'start': 2399.421, 'duration': 1.862}, {'end': 2402.604, 'text': "So that's looking promising.", 'start': 2401.303, 'duration': 1.301}, {'end': 2409.863, 'text': "We're storing data, obviously we want to get it to output markers of other users too.", 'start': 2404.48, 'duration': 5.383}], 'summary': 'Successfully retrieved and stored location data, generating a cryptic id in firebase.', 'duration': 46.724, 'max_score': 2363.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2363139.jpg'}], 'start': 2230.703, 'title': 'Managing location data with react native and firebase', 'summary': 'Covers sending http post request in react native to store user location data in firebase using fetch api, processing latitude and longitude data, and utilizing firebase for storing and displaying location data with manual marker coordinates, fetch location button, and view component styling.', 'chapters': [{'end': 2340.285, 'start': 2230.703, 'title': 'Sending http post request in react native', 'summary': 'Explains how to send a post request in react native using the fetch api to store user location data in firebase database, emphasizing the usage of the fetch api and the configuration of the request with key points such as the url, method, and body.', 'duration': 109.582, 'highlights': ['The chapter emphasizes using the Fetch API in React Native to send a POST request, showcasing the modern approach to handling HTTP requests in JavaScript.', 'It explains the configuration of the POST request, with the method set to POST and the body specified as a JSON string using JSON Stringify.', 'The speaker mentions the usage of Firebase as the backend for demonstration purposes due to its ease of use, but indicates that the approach can work with any backend.', 'The Fetch API is highlighted as the modern replacement for XML HTTP request in JavaScript, and its usage is recommended for handling HTTP requests in React Native.']}, {'end': 2387.009, 'start': 2341.065, 'title': 'Firebase location data processing', 'summary': 'Illustrates the process of sending latitude and longitude data to firebase, chaining promises to handle response and error logging, ultimately achieving a successful 200 response.', 'duration': 45.944, 'highlights': ['Chaining promises to handle response and error logging, resulting in a successful 200 response', 'Sending latitude and longitude data to Firebase for marker positions', 'Handling connectivity errors through catch statements to ensure robust functionality']}, {'end': 2484.15, 'start': 2387.95, 'title': 'Using firebase for location data', 'summary': 'Discusses using firebase to store and display location data, manually tweaking coordinates for markers, adding a button to fetch location, and styling it using a view component.', 'duration': 96.2, 'highlights': ['The chapter discusses using Firebase to store and display location data, manually tweaking coordinates for markers, adding a button to fetch location, and styling it using a view component.', 'Firebase automatically generates cryptic IDs for data elements, storing latitude and longitude for location data.', 'Manually tweaking the coordinates for markers to create and display different positions for markers on the map.', 'Adding a button to fetch the location and styling it using a view component for easy customization.']}], 'duration': 253.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2230703.jpg', 'highlights': ['The chapter emphasizes using the Fetch API in React Native to send a POST request, showcasing the modern approach to handling HTTP requests in JavaScript.', 'Chaining promises to handle response and error logging, resulting in a successful 200 response', 'The chapter discusses using Firebase to store and display location data, manually tweaking coordinates for markers, adding a button to fetch location, and styling it using a view component.']}, {'end': 2867.593, 'segs': [{'end': 2587.798, 'src': 'embed', 'start': 2539.564, 'weight': 0, 'content': [{'end': 2547.57, 'text': "instead i will call log response json here to take the json out of it, and then the next then call i'll have the parsed response.", 'start': 2539.564, 'duration': 8.006}, {'end': 2549.612, 'text': 'this is essentially how fetch works.', 'start': 2547.57, 'duration': 2.042}, {'end': 2556.458, 'text': 'we first of all get back the response with the code and the unparsed data body,', 'start': 2549.612, 'duration': 6.846}, {'end': 2561.462, 'text': 'and then with json we can parse that and we get back the body in a javascript object form.', 'start': 2556.458, 'duration': 5.004}, {'end': 2565.564, 'text': "so here we have this object, and that's an important thing.", 'start': 2562.142, 'duration': 3.422}, {'end': 2574.169, 'text': 'we probably want to have an array to conveniently loop through it and output a couple of markers for the different items in the array.', 'start': 2565.564, 'duration': 8.605}, {'end': 2578.052, 'text': 'on firebase we store everything in this object format, though.', 'start': 2574.169, 'duration': 3.883}, {'end': 2587.798, 'text': 'so here we got the places object, which has these cryptic strings here as properties, and then the values would be these objects here.', 'start': 2578.792, 'duration': 9.006}], 'summary': 'Using fetch to parse json, store data in object format on firebase.', 'duration': 48.234, 'max_score': 2539.564, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2539564.jpg'}, {'end': 2700.842, 'src': 'embed', 'start': 2674.619, 'weight': 3, 'content': [{'end': 2682.263, 'text': 'And now set state should set the state of user places equal to my places array I got here.', 'start': 2674.619, 'duration': 7.644}, {'end': 2685.477, 'text': 'With that, I got an array of these places.', 'start': 2683.496, 'duration': 1.981}, {'end': 2693.959, 'text': "I, of course, want to output them on my map, though, so to my map component, I'll pass user places.", 'start': 2687.357, 'duration': 6.602}, {'end': 2700.842, 'text': "You can name this property whatever you want, and I'll bind it to this state user places.", 'start': 2694.319, 'duration': 6.523}], 'summary': 'Setting state to user places equals my places array for map component.', 'duration': 26.223, 'max_score': 2674.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2674619.jpg'}, {'end': 2760.962, 'src': 'embed', 'start': 2727.644, 'weight': 4, 'content': [{'end': 2730.906, 'text': 'i now want to create as many markers as needed.', 'start': 2727.644, 'duration': 3.262}, {'end': 2740.262, 'text': "so i'll create my users markers component here a constant here and use props users places.", 'start': 2730.906, 'duration': 9.356}, {'end': 2748.286, 'text': 'this new prop we just added with the map method, as you always do it in react, for outputting an array of elements in jsx.', 'start': 2740.262, 'duration': 8.024}, {'end': 2760.962, 'text': "in there I'll get my user place and I want to return a map view dot marker component where I bind the coordinate to user place,", 'start': 2748.286, 'duration': 12.676}], 'summary': "Creating markers for user places using react's map method.", 'duration': 33.318, 'max_score': 2727.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2727644.jpg'}, {'end': 2854.13, 'src': 'embed', 'start': 2828.682, 'weight': 5, 'content': [{'end': 2836.466, 'text': 'You can access the camera, add authentication, create responsive designs all of that, all of that covered in my Udemy course,', 'start': 2828.682, 'duration': 7.784}, {'end': 2837.327, 'text': "in case you're interested.", 'start': 2836.466, 'duration': 0.861}, {'end': 2845.268, 'text': 'But I hope that this was a great introduction to it, that you got a feeling for how you work with React Native, how you start a project,', 'start': 2837.907, 'duration': 7.361}, {'end': 2854.13, 'text': 'how you add packages that need native device features, how you work with components, build your own components, work with the web with a backend.', 'start': 2845.268, 'duration': 8.862}], 'summary': 'Udemy course covers camera access, authentication, and responsive designs for react native.', 'duration': 25.448, 'max_score': 2828.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2828682.jpg'}], 'start': 2484.83, 'title': 'Handling fetch requests and react native user places', 'summary': 'Covers handling fetch requests in javascript, parsing responses, and converting nested objects. it also explains storing user places in the state of a react native component and displaying them on a map with user markers.', 'chapters': [{'end': 2645.198, 'start': 2484.83, 'title': 'Handling fetch requests and parsing responses', 'summary': 'Explains how to handle fetch requests in javascript, parsing the response, and converting nested objects into an array for convenient looping through data. it details the process of executing a method, making a fetch request, parsing the response, and converting nested objects into an array.', 'duration': 160.368, 'highlights': ['The process of executing a method, making a fetch request, and parsing the response is detailed, emphasizing the importance of converting nested objects into an array for convenient data manipulation.', 'The chapter emphasizes the need to convert nested objects into an array for convenient looping through the data, illustrating the process with code snippets and explanations.', 'It also explains the process of making a fetch request, handling the response, and parsing it into a JavaScript object, showcasing the practical implementation of handling fetch requests in JavaScript.']}, {'end': 2867.593, 'start': 2645.198, 'title': 'React native user places', 'summary': 'Explains how to store user places in the state of a react native component, output them on a map, and create user markers, resulting in the display of user-added places on the map.', 'duration': 222.395, 'highlights': ['The user places array is stored in the state of the component, enabling the output of user-added places on the map. User places array stored in the component state', 'The process of creating and outputting user markers is explained, resulting in the display of user-added places on the map. Creation and output of user markers', 'Introduction to React Native and the potential functionalities it offers is highlighted, including styling, camera access, authentication, and responsive designs. Introduction to potential functionalities of React Native']}], 'duration': 382.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6ZnfsJ6mM5c/pics/6ZnfsJ6mM5c2484830.jpg', 'highlights': ['The process of executing a method, making a fetch request, and parsing the response is detailed, emphasizing the importance of converting nested objects into an array for convenient data manipulation.', 'The chapter emphasizes the need to convert nested objects into an array for convenient looping through the data, illustrating the process with code snippets and explanations.', 'It also explains the process of making a fetch request, handling the response, and parsing it into a JavaScript object, showcasing the practical implementation of handling fetch requests in JavaScript.', 'The user places array is stored in the state of the component, enabling the output of user-added places on the map.', 'The process of creating and outputting user markers is explained, resulting in the display of user-added places on the map.', 'Introduction to React Native and the potential functionalities it offers is highlighted, including styling, camera access, authentication, and responsive designs.']}], 'highlights': ['React Native enables building native mobile apps for iOS and Android using React and JavaScript, providing real native apps distributed over app stores.', 'React Native apps compile UI elements to native code, ensuring better performance and leveraging web stack technologies while providing a real native app experience.', 'The installation process involves using the Create React Native App tool to create a new project and install required dependencies, with additional tips for using Yarn and avoiding NPM version 5 issues.', "Running 'npm run eject' provides access to the full workflow and capabilities of React Native, enabling the use of real native app features and functionalities.", 'Detailed instructions for setting up Android and iOS development environments, including installing Android Studio, setting environment variables, and running the development server.', "Noting the inability to build for iOS on Windows due to Apple's restrictions, and the requirement of Xcode which does not run on Windows.", 'Process of running the development server to build the project, bundle it, and ship it to the simulator, as well as starting the app on the simulator.', 'Integration of React Native Maps library, installation steps, linking to native device features, obtaining Maps API key', 'The chapter emphasizes using the Fetch API in React Native to send a POST request, showcasing the modern approach to handling HTTP requests in JavaScript.', 'The process of executing a method, making a fetch request, and parsing the response is detailed, emphasizing the importance of converting nested objects into an array for convenient data manipulation.']}