The idea is create a simple Todo App for iOS and Android, that saves and retrieves data from firebase.
npm install -g react-native-cli yarn
react-native init RNTodoWorkshop
Create your App.js with Hello World content and edit your index.android.js and index.ios.js to use it.
Copy these files and folders from this repository to yours:
- .babelrc
- .eslintrc
- .flowconfig
- .gitignore
- package.json
- __tests__/
- assets/
- backup/
- utils/
Execute:
yarn
You can clone this project and setup to run the final version of the proposed Todo App.
You can also checkout a specific commit to see each version of this app.
To setup this project:
npm install -g yarn
yarn
You can either run the app as a normal project on XCode or run on terminal:
react-native run-ios
This will run the app on an iOS simulator
To run the app on an iOS device see: https://facebook.github.io/react-native/docs/running-on-device.html
if packager is not already running, run on terminal:
npm start
You can either run the app as a normal project on Android Studio or run on terminal:
react-native run-android
This will run the app on an Android device or Genymotion
For more options see: https://facebook.github.io/react-native/docs/running-on-device.html
The idea of this workshop is execute each of the following tasks to create a Todo App:
- Configure a react native project and add a image and custom Status Bar to it
- Configure firebase and see a List of tasks appear on screen
- Create a text field that add new tasks
- Add the ability to delete a given task
- Add the ability to mark a task as completed or uncompleted
- Add loading to wait for list of tasks to appear
- Add filters to tasks
- Add the ability to inline edit a given task
Bonus tasks:
- Show the count of active tasks remaining (uncompleted tasks)
- Create a toggle all tasks to be completed or uncompleted
- Add cache to tasks so it can work offline
Configure firebase by going on: https://console.firebase.google.com/?pli=1 with a valid google account.
Then create a new project.
After the project is created, click on "Add firebase to your webapp" option.
Copy the values to utils/data.js
Import backup/workshop-rn-todo-initial-data.json to your database.
And override the rules of your database to:
{
"rules": {
".read": true,
".write": true
}
}
You can ignore any warnings after that.
See official docs for learning how to use flow: https://flowtype.org/docs/builtins.html
To start learning flexbox see this article: https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35
See this guide for a more complete overview of flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This workshop was based on this egghead course: https://egghead.io/courses/build-a-react-native-todomvc-application
See this repository for other examples: https://github.com/guilhermebruzzi/rnExamples
You can download the original presentation of this workshop here:
Keynote (mac): https://www.dropbox.com/s/subacw2atz0vklf/RNVTEX_Workshop.key?dl=0
PDF: https://www.dropbox.com/s/iiizrai57lc4gud/RNVTEX_Workshop.pdf?dl=0
Workshop on 08 of february of 2017 at VTEX: https://www.youtube.com/watch?v=uXkgDXrHVkg