{"id":19200984,"url":"https://github.com/dabit3/react-native-bootcamp","last_synced_at":"2025-11-17T15:15:43.847Z","repository":{"id":73191457,"uuid":"143885927","full_name":"dabit3/react-native-bootcamp","owner":"dabit3","description":"React Native Bootcamp Materials for TylerMcginnis.com","archived":false,"fork":false,"pushed_at":"2018-09-08T19:47:11.000Z","size":344,"stargazers_count":93,"open_issues_count":2,"forks_count":24,"subscribers_count":7,"default_branch":"Day1","last_synced_at":"2025-10-09T09:59:00.537Z","etag":null,"topics":["android","android-development","bootcamp","ios","ios-development","react","react-native"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabit3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-07T14:34:47.000Z","updated_at":"2024-01-28T10:05:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"4be2ee17-dc18-4890-af9b-7a75d64e1a70","html_url":"https://github.com/dabit3/react-native-bootcamp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dabit3/react-native-bootcamp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-bootcamp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-bootcamp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-bootcamp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-bootcamp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/react-native-bootcamp/tar.gz/refs/heads/Day1","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-native-bootcamp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284905111,"owners_count":27082386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-development","bootcamp","ios","ios-development","react","react-native"],"created_at":"2024-11-09T12:35:49.343Z","updated_at":"2025-11-17T15:15:43.820Z","avatar_url":"https://github.com/dabit3.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Bootcamp - Day 1\n\n## Your first React Native App\n\n### 1. Getting Started\n\n1. Go to the React Native docs [Getting Started page](https://facebook.github.io/react-native/docs/getting-started.html), click on __Building Projects with Native Code__, \u0026 follow the documentation for getting set up on your operating system.\n\n2. Create a new project using the `react-native init` command:\n\n```bash\nreact-native init MyProject\n```\n\n3. Change into the new directory:\n\n```bash\ncd MyProject\n```\n\n4. To run your project on iOS, run the following command from the command line:\n\n```bash\nreact-native run-ios\n```\n\nTo run your project on Android, first open an Android emulator, then run the following command:\n\n```bash\nreact-native run-android\n```\n\n### 2. Project structure\n\n```\nMyProject\n│\n└───android\n│   \n└───ios\n│   \n└───node_modules\n│   \n│   .babelrc\n│   .buckconfig\n│   .flowconfig\n│   .gitattributes\n│   .gitignore\n│   .watchmanconfig\n│   App.js\n│   app.json\n│   index.js\n│   package.json\n```\n\n#### Main things to know:\n\n__android__\n\nThis folder contains the Android project. To open this project in Android Studio, only open the Android folder.\n\nIf changes are made in this project, the native code needs to be recompiled (`i.e. react-native run-android`).\n\n__ios__\n\nThis folder contains both the iOS as well as the Apple TV projects. Top open this project, open only the ios/MyProject.xcodeproj in Xcode.\n\nIf changes are made in this project, the native code needs to be recompiled (`i.e. react-native run-ios`).\n\n__index.js__ - Main application entrypoint\n\n```js\nimport {AppRegistry} from 'react-native';\nimport App from './App';\nimport {name as appName} from './app.json';\n\n\nAppRegistry.registerComponent(appName, () =\u003e App);\n// AppRegistry.registerComponent gets called only once per application\n// This function takes in two arguments:\n// First argument - The application name (here, we've imported the appName property from app.json)\n// Second argument - The main application component (App)\n```\n\n__App.js__ - This component contains the initial boilerplate for the project\n\n__.babelrc__ - This file allows you to update your babel configuration. To do so, install the babel dependency you're interested in using \u0026 then update this file with the new dependency\n\n__package.json__ - This file lists all dependencies of the project as well as scripts for running commands within the project\n\n__.flowconfig__ - Preconfigured settings for Flow (A typechecking system that is optional \u0026 not enabled by default)\n\n# Intro to React Native\n\n## Basic Components\n\nReact Native ships with over 30 UI components \u0026 over 40 native device APIs.\n\nUI components display UI along with some functionality, while native device APIs allow you to access native functionality.\n\nLet's take a look at a few components that we're introduced to in App.js:\n\n```js\nimport {Platform, StyleSheet, Text, View} from 'react-native';\n```\n\n### Text\nThis component allows you to render text to the UI. If you've ever used a __span__, __p__, or __h1__ in HTML, you can think of a __Text__ component as being similar but without any default styling at all.\n\nUsage:\n\n```js\n\u003cText\u003eHello World\u003c/Text\u003e\n```\n\n### View \nThe most fundamental building block when building UIs in React Native. If you've ever used a __div__ in HTML, then you can think of a __View__ as a being very similar to a __div__.\n\nUsage:\n\n```js\n\u003cView\u003e\n  \u003cText\u003eHello World\u003c/Text\u003e\n\u003c/View\u003e\n```\n\n### StyleSheet\nA StyleSheet is an abstraction similar to CSS StyleSheets\n\nYou can style React components many different ways:\n```js\n// inline\n\u003cText style={{ color: 'red' }}\u003eHello World\u003c/Text\u003e\n\n// with object\nconst styles = {\n  text: {\n    color: 'red'\n  }\n}\n\u003cText style={styles.text}\u003eHello World\u003c/Text\u003e\n\n// an array\n\u003cText style={[styles.text, { fontSize: 22 }]}\u003eHello World\u003c/Text\u003e\n```\n\nBut, using the StyleSheet API is recommended for its performance benefits. Here's how we can implement the same styles using the StyleSheet API:\n\n```js\n// with object\nconst styles = StyleSheet.create({\n  text: {\n    color: 'red'\n  }\n})\n\u003cText style={styles.text}\u003eHello World\u003c/Text\u003e\n\n// an array\n\u003cText style={[styles.text, { fontSize: 22 }]}\u003eHello World\u003c/Text\u003e\n```\n\n### Platform\nThis component allows us to get information about the current device we're using.\n\nBasic usage:\n\n```js\nPlatform.OS // returns OS, i.e. ios, android, web, etc..\nPlatform.Version // returns Version, i.e. 11.2\nPlatform.isIpad // returns boolean\nPlatform.isTV // returns boolean\nPlatform.isTVOS // returns boolean\n```\n\nOther usage:\n\n```js\n// Platform.select\nconst greeting = Platform.select({\n  ios: 'Hello from iOS',\n  android: 'Hello from Android',\n  default: 'Hello world'\n})\nconsole.log(greeting) // Hello from iOS\n\n// platform specific styling\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    ...Platform.select({\n      ios: {\n        backgroundColor: 'red',\n      },\n      android: {\n        backgroundColor: 'blue',\n      },\n      default: {\n        backgroundColor: 'orange'\n      }\n    }),\n  },\n});\n```\n\n## Intro to debugging\n\nDebugging your app is one of the most important things you need to know how to do in order to competently develop in React Native. Let's take a look at some ways to do this.\n\n### Developer Menu\n\nTo open the developer menu, click `CMD + d` in iOS or `CTRL + m` on Android.\n\nHere we have 7 options:\n\n- Reload\n- Debug JS Remotely\n- Enable Live Reload\n- Start Systrace\n- Enable Hot Reloading\n- Toggle Inspector\n- Show Perf Monitor\n\n#### Main things to know:\n\n- There is a shortcut for reloading: `CMD + r` on iOS or `m + m` on Android.\n- Debug JS Remotely is an easy way to debug \u0026 log your JS. This will open a browser window \u0026 you can then open developer console to debug.\n- Hot reloading is very powerful.\n- Toggle inspector is OK. Use the __Touchables__ functionality to highlight touchable components.\n- For more serious UI debugging, use [React Devtools](https://github.com/facebook/react-devtools) or [React Native Debugger](https://github.com/jhen0409/react-native-debugger)\n\n## Other React Native \"Good to knows\"\n\n- You can use any text editor to develop for React Native. I recomment VS Code.\n- If you install a JavaScript dependency, you only need to refresh your app or at the most restart the packager to use the new package.\n- If you install a native dependency, you must first properly link the dependency \u0026 then rerun the native code in order to use it.\n- 80% of React Native is just knowing how to use React well\n- Keep in mind touchable space when developing for React Native but really mobile in general.\n\n\n## Understanding React\n\nIn React, everything can be thought of in terms of Components.\n\nA Component is a created using either a function or a class.\n\nEach component can return:\n\nA. A piece of UI   \nB. A piece of UI with self-contained functionality (state, lifecycle methods, etc..)   \nC. Self-contained funcationality without returning UI\n\n### Creating a component using a class\n\nIn App.js we see the following class generated for us as part of the initial project boilerplate code:\n\n```js\nclass App extends Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.welcome}\u003eWelcome to React Native!\u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003eTo get started, edit App.js\u003c/Text\u003e\n        \u003cText style={styles.instructions}\u003e{instructions}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\nAs we can see, this component is was created using a class.\n\nWhen using a class, you have two main benefits:\n\n1. Control of local state   \n2. Access to lifecycle methods\n\nIn the above class, we have __no__ state but there is a lifecycle method: `render()`\n\nLet's update the component to have some state as well as hook into the other lifecycle methods:\n\n```js\nclass App extends Component {\n  state = { greeting: 'Hello World' } // 1\n  static getDerivedStateFromProps() { // 2\n    console.log('getDerivedStateFromProps called')\n  }\n  componentDidMount() { // 4\n    console.log('componentDidMount called')\n  }\n  render() { // 3\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cText style={styles.instructions}\u003e{this.state.greeting}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\nIn the above component, we hook into all of the mounting lifefycle methods. You can see in the comments the order in which they are called.\n\n### Creating a component using a function\n\nThis same original App component can be rewritten as a function:\n\n```js\nconst App = () =\u003e \n  \u003cView style={styles.container}\u003e\n    \u003cText style={styles.welcome}\u003eWelcome to React Native!\u003c/Text\u003e\n    \u003cText style={styles.instructions}\u003eTo get started, edit App.js\u003c/Text\u003e\n    \u003cText style={styles.instructions}\u003e{instructions}\u003c/Text\u003e\n  \u003c/View\u003e\n```\n\nThe above function is created using an ES6 arrow function.\n\nThe same function could be rewritten in ES5 this way:\n\n```js\nvar App = function() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.welcome}\u003eWelcome to React Native!\u003c/Text\u003e\n      \u003cText style={styles.instructions}\u003eTo get started, edit App.js\u003c/Text\u003e\n      \u003cText style={styles.instructions}\u003e{instructions}\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\nThese both work the same, but most documentation will use ES6 so it's good to know.\n\nTo learn more about ES6 arrow functions click [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).\n\n### State\n\nState is one of two ways to handle dynamic data in your application, the other being props.\n\nThe main difference is that state is controlled by class components, whereas props can be controlled in a multitude of ways.\n\nLet's take another look at a component with some basic state:\n\n```js\nclass App extends Component {\n  state = { greeting: 'Hello World' }\n  render() {\n    return (\n      \u003cText\u003e{this.state.greeting}\u003c/Text\u003e\n    );\n  }\n}\n```\n\n`this.state.greeting will be equal to `'Hello World'` in this component.\n\nWhat if we wanted to change the value of the state?\n\nWe can do this, but we need to keep in mind 1 thing: In order to rerender the new value of the greeting, we need to rerender by triggering update lifecyle.\n\nThat meains we can't simply do something like this:\n\n```js\nchangeName = () =\u003e {\n  this.state.greeting = 'Hello, this is my new greeting!'\n}\n```\n\nThe above function _would_ change the value of state.greeting, but the new value would not show up on the screen, to do that we need to trigger the render method.\n\nThere are 3 ways to trigger a rerendering of a component:\n1. Calling `setState()`   \n2. Calling `forceUpdate` (not recommended for most use cases)   \n3. Receiving new props into the component\n\nThe best way to change the state in our circumstance would be to call `setState()` which will change the state as well as trigger an update lifecycle:\n\n\n```js\nclass App extends Component {\n  state = { greeting: 'Hello World' }\n  changeGreeting = () =\u003e {\n    this.setState({ greeting: 'Hello, this is my new greeting!' })\n  }\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e{this.state.greeting}\u003c/Text\u003e\n        \u003cText onPress={this.changeGreeting}\u003eChange Greeting\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n### Props\n\nLet's take a look at how to use props.\n\nInstead of hard-coding values, we'll write a component that gets its data passed in as parameters known as \"props\" in React \u0026 React Native.\n\n#### Using props in a Class component\n\n```js\n// creation\nclass Person extends React.Component {\n  render() {\n    return (\n      \u003cText\u003eHello, my name is {this.props.name}\u003c/Text\u003e\n    )\n  }\n}\n\n// usage\n\u003cPerson name=\"Allison\"\u003e\n\u003cPerson name=\"Nader\"\u003e\n\u003cPerson name=\"Amanda\"\u003e\n```\n\n#### Using props in a Functional component\n\n```js\n// creation\nconst Person = (props) =\u003e \u003cText\u003eHello, my name is {props.name}\u003c/Text\u003e\n\n// usage\n\u003cPerson name=\"Allison\"\u003e\n```\n\nYou may also use an ES6 destruturing assignment to get the individual props out of the function argument:\n\n```js\n// creation\nconst Person = ({ name }) =\u003e \u003cText\u003eHello, my name is {name}\u003c/Text\u003e\n\n// usage\n\u003cPerson name=\"Allison\"\u003e\n```\n\n\n#### Dynamic props\n\nProps can also be dynamic:\n\n\n```js\nconst Person = ({ name }) =\u003e \u003cText\u003eHello, my name is {name}\u003c/Text\u003e\n\nclass App extends React.Component {\n  state = { name: 'Amanda' }\n  changeName = () =\u003e {\n    this.setState({ name: 'Allison' })\n  }\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cPerson name={this.state.name} /\u003e\n        \u003cText onPress={this.changeName}\u003eChange Name\u003c/Text\u003e\n      \u003cView\u003e\n    )\n  }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-native-bootcamp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Freact-native-bootcamp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-native-bootcamp/lists"}