├── LICENSE ├── .vscode └── launch.json ├── .gitmodules ├── readme.md ├── .gitignore └── index.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Rod Landaeta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Debug Android", 9 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 10 | "type": "reactnative", 11 | "request": "launch", 12 | "platform": "android", 13 | "sourceMaps": true, 14 | "outDir": "${workspaceRoot}/.vscode/.react" 15 | }, 16 | { 17 | "name": "Debug iOS", 18 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 19 | "type": "reactnative", 20 | "request": "launch", 21 | "platform": "ios", 22 | "sourceMaps": true, 23 | "outDir": "${workspaceRoot}/.vscode/.react" 24 | }, 25 | { 26 | "name": "Attach to packager", 27 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 28 | "type": "reactnative", 29 | "request": "attach", 30 | "sourceMaps": true, 31 | "outDir": "${workspaceRoot}/.vscode/.react" 32 | }, 33 | { 34 | "name": "Debug in Exponent", 35 | "program": "${workspaceRoot}/.vscode/launchReactNative.js", 36 | "type": "reactnative", 37 | "request": "launch", 38 | "platform": "exponent", 39 | "sourceMaps": true, 40 | "outDir": "${workspaceRoot}/.vscode/.react" 41 | } 42 | ] 43 | } -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "samples/1.helloworld"] 2 | path = samples/1.helloworld 3 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-1.git 4 | [submodule "samples/2.actions"] 5 | path = samples/2.actions 6 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-2.git 7 | [submodule "samples/3.todos"] 8 | path = samples/3.todos 9 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-3.git 10 | [submodule "samples/4.navscreen"] 11 | path = samples/4.navscreen 12 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-4.git 13 | [submodule "samples/5.declarations"] 14 | path = samples/5.declarations 15 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-5.git 16 | [submodule "samples/6.simpleredux"] 17 | path = samples/6.simpleredux 18 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-6.git 19 | [submodule "samples/7.counterredux"] 20 | path = samples/7.counterredux 21 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-7.git 22 | [submodule "samples/8.asyncredux"] 23 | path = samples/8.asyncredux 24 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-8.git 25 | [submodule "samples/9.standardcontrols"] 26 | path = samples/9.standardcontrols 27 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-9.git 28 | [submodule "samples/10.typography"] 29 | path = samples/10.typography 30 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-10.git 31 | [submodule "samples/11.typography"] 32 | path = samples/11.typography 33 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-11.git 34 | [submodule "samples/12.tabnav"] 35 | path = samples/12.tabnav 36 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-12.git 37 | [submodule "samples/13.tabbedredux"] 38 | path = samples/13.tabbedredux 39 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-13.git 40 | [submodule "samples/14.reduxpersistcounter"] 41 | path = samples/14.reduxpersistcounter 42 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-14.git 43 | [submodule "samples/15.pouchBook"] 44 | path = samples/15.pouchBook 45 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-15.git 46 | [submodule "samples/16.pouchBook2"] 47 | path = samples/16.pouchBook2 48 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-16.git 49 | [submodule "samples/18.infinitescroll"] 50 | path = samples/18.infinitescroll 51 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-18.git 52 | [submodule "samples/17.swiftly"] 53 | path = samples/17.swiftly 54 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-17.git 55 | [submodule "samples/19.animations-v1.0"] 56 | path = samples/19.animations-v1.0 57 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-19.git 58 | [submodule "samples/20.animateflex"] 59 | path = samples/20.animateflex 60 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-20 61 | [submodule "samples/21.animatable"] 62 | path = samples/21.animatable 63 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-21 64 | [submodule "samples/22.lottie"] 65 | path = samples/22.lottie 66 | url = git@github.com:rodrigoelp/reactnative-typescript-exercise-22 67 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Working with React-Native and Typescript 2 | 3 | In here you will find a set of samples that I have been creating to help me understand how to work with [react-native](https://facebook.github.io/react-native/) and [typescript](https://www.typescriptlang.org/). 4 | 5 | So, what is in this repo? 6 | 7 | Multiple examples (and hopefully some explanation) of things you need to get react-native and typescript to work nicely between each other. 8 | 9 | ## Objective 10 | 11 | - Learn react-native 12 | - Share with others working examples of react-native and typescript. 13 | - Get feedback from others, if you have more knowledge and you have ways to improve these examples? by all means contribute to this or provide feedback. (Raise any feedback as an issue of this repo) 14 | 15 | ## Background 16 | 17 | I want to learn how to start building apps on [react-native](https://facebook.github.io/react-native/). Now, I've done web development in the past and I've also spent some time playing with [nodejs](https://nodejs.org/en/) so, I am not a complete foreigner to some of its concepts. 18 | 19 | Now, React, React-Native and Node are technologies based on JavaScript, which in _my personal view_ is a pervasive, evil programming language that should've been improved a long time ago and no real consensus has been formed on what it should be. ES[5, 6, 7, etc] is a good first start but still is missing some important features for me. I like a static type system so I wanted something guiding me as I write my code. 20 | 21 | So, I started looking at React-Native and other languages such as Typescript, Purescript, Kotlin, etc; and decided to settle with [Typescript](https://www.typescriptlang.org/) because: 22 | 23 | - It has a big enough community backing it up. 24 | - It seems to be close enough to JavaScript so porting samples between each other should be relatively straightforward. 25 | - Requires fewer plugins/modules to work. 26 | 27 | ## What do I need to use this repo? 28 | 29 | You will need already installed to use/try/abuse/copy/whatever this code: 30 | 31 | > _I am a Mac user. Take these recommendations with a pinch of salt as it might not apply to your system._ 32 | 33 | - First and extremely important, you will need `git`. Without it this repo might not make sense as every exercise has been stored in a separate repository and added to this one as submodules. If you want to check each individual project I have set up an [index](./index.md) with a basic description and observations gathered along its development process. 34 | - [XCode](https://developer.apple.com/xcode/) with command line tooling installed already. This is **required to run your code in iOS**. 35 | - [Android Studio](https://developer.android.com/studio/index.html) or [Visual Studio for Mac](https://docs.microsoft.com/en-us/visualstudio/mac/) with the Android tooling and an emulator. 36 | - A text editor of sorts. I like [vscode](https://code.visualstudio.com/) a lot. 37 | - [Node](https://nodejs.org/en/). Best way to get it into your system is via [brew](https://brew.sh/) as I have tried the mac installer and it wasn't as flexible as with brew. There are other mechanisms to get it such as the [node version manager](https://github.com/creationix/nvm/blob/master/README.md) but I found it was much easier to do `brew install node` 38 | - You will need React-Native which can be installed via node package manager: `npm install react-native -g` 39 | 40 | ## How to clone this repo? 41 | 42 | Cloning a repo with submodules is not too much of a problem (although dealing with submodules can be a pain) 43 | 44 | Just type in a terminal: 45 | 46 | `git clone --recursive -j8 git@github.com:rodrigoelp/reactnative-typescript.git` 47 | 48 | *What are those parameters?* 49 | 50 | Pretty easy: 51 | 52 | - `--recursive` tells `git` that you want to download everything in this repo, as well as anything included in the `.gitmodules` file. 53 | - `-j8` tells `git` you want to download anything additional in parallel. 54 | 55 | ### But I have already typed in git clone before I read this message! 56 | 57 | That's fine... if you have already typed `git clone git@github.com:rodrigo.elp/....git` then you can initialize and download the exercises as follows (you must be at the root of the cloned project): 58 | 59 | `git submodule update --init --recursive` 60 | 61 | This will take care of the submodules and set it up for you. 62 | 63 | ## Anything else? 64 | 65 | Once you have downloaded the repo (or you could browse it in here) you will find inside the folder `samples` each of my attempts. Inside there is a small explanation of what is contained. 66 | 67 | If you want to read the intention behind any of the samples/exercises, open the [index file](./index.md). 68 | 69 | **Enjoy and I hope you find this repo useful.** 70 | 71 | ### Note 72 | 73 | I am open to suggestions and improvements. Create an issue with your comment to talk it over. 74 | 75 | #### Extension note 76 | 77 | Some of these samples could be used as a starter for your application (as it becomes fairly repetitive). If you want to use it to kickstart your project be my guest. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node,macos,reactnative 3 | 4 | ### macOS ### 5 | *.DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | 9 | # Icon must end with two \r 10 | Icon 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | .com.apple.timemachine.donotpresent 23 | 24 | # Directories potentially created on remote AFP share 25 | .AppleDB 26 | .AppleDesktop 27 | Network Trash Folder 28 | Temporary Items 29 | .apdisk 30 | 31 | ### Node ### 32 | # Logs 33 | logs 34 | *.log 35 | npm-debug.log* 36 | yarn-debug.log* 37 | yarn-error.log* 38 | 39 | # Runtime data 40 | pids 41 | *.pid 42 | *.seed 43 | *.pid.lock 44 | 45 | # Directory for instrumented libs generated by jscoverage/JSCover 46 | lib-cov 47 | 48 | # Coverage directory used by tools like istanbul 49 | coverage 50 | 51 | # nyc test coverage 52 | .nyc_output 53 | 54 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 55 | .grunt 56 | 57 | # Bower dependency directory (https://bower.io/) 58 | bower_components 59 | 60 | # node-waf configuration 61 | .lock-wscript 62 | 63 | # Compiled binary addons (http://nodejs.org/api/addons.html) 64 | build/Release 65 | 66 | # Dependency directories 67 | node_modules/ 68 | jspm_packages/ 69 | 70 | # Typescript v1 declaration files 71 | typings/ 72 | 73 | # Optional npm cache directory 74 | .npm 75 | 76 | # Optional eslint cache 77 | .eslintcache 78 | 79 | # Optional REPL history 80 | .node_repl_history 81 | 82 | # Output of 'npm pack' 83 | *.tgz 84 | 85 | # Yarn Integrity file 86 | .yarn-integrity 87 | 88 | # dotenv environment variables file 89 | .env 90 | 91 | 92 | ### ReactNative ### 93 | # React Native Stack Base 94 | ### ReactNative.Android Stack ### 95 | # Built application files 96 | *.apk 97 | *.ap_ 98 | 99 | # Files for the ART/Dalvik VM 100 | *.dex 101 | 102 | # Java class files 103 | *.class 104 | 105 | # Generated files 106 | bin/ 107 | gen/ 108 | out/ 109 | 110 | # Gradle files 111 | .gradle/ 112 | build/ 113 | 114 | # Local configuration file (sdk path, etc) 115 | local.properties 116 | 117 | # Proguard folder generated by Eclipse 118 | proguard/ 119 | 120 | # Log Files 121 | 122 | # Android Studio Navigation editor temp files 123 | .navigation/ 124 | 125 | # Android Studio captures folder 126 | captures/ 127 | 128 | # Intellij 129 | *.iml 130 | .idea/workspace.xml 131 | .idea/tasks.xml 132 | .idea/gradle.xml 133 | .idea/dictionaries 134 | .idea/libraries 135 | 136 | # External native build folder generated in Android Studio 2.2 and later 137 | .externalNativeBuild 138 | 139 | # Freeline 140 | freeline.py 141 | freeline/ 142 | freeline_project_description.json 143 | 144 | ### ReactNative.Node Stack ### 145 | # Logs 146 | 147 | # Runtime data 148 | 149 | # Directory for instrumented libs generated by jscoverage/JSCover 150 | 151 | # Coverage directory used by tools like istanbul 152 | 153 | # nyc test coverage 154 | 155 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 156 | 157 | # Bower dependency directory (https://bower.io/) 158 | 159 | # node-waf configuration 160 | 161 | # Compiled binary addons (http://nodejs.org/api/addons.html) 162 | 163 | # Dependency directories 164 | 165 | # Typescript v1 declaration files 166 | 167 | # Optional npm cache directory 168 | 169 | # Optional eslint cache 170 | 171 | # Optional REPL history 172 | 173 | # Output of 'npm pack' 174 | 175 | # Yarn Integrity file 176 | 177 | # dotenv environment variables file 178 | 179 | 180 | ### ReactNative.Buck Stack ### 181 | buck-out/ 182 | .buckconfig.local 183 | .buckd/ 184 | .buckversion 185 | .fakebuckversion 186 | 187 | ### ReactNative.Xcode Stack ### 188 | # Xcode 189 | # 190 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore 191 | 192 | ## Build generated 193 | DerivedData/ 194 | 195 | ## Various settings 196 | *.pbxuser 197 | !default.pbxuser 198 | *.mode1v3 199 | !default.mode1v3 200 | *.mode2v3 201 | !default.mode2v3 202 | *.perspectivev3 203 | !default.perspectivev3 204 | xcuserdata/ 205 | 206 | ## Other 207 | *.moved-aside 208 | *.xccheckout 209 | *.xcscmblueprint 210 | 211 | ### ReactNative.Gradle Stack ### 212 | .gradle 213 | **/build/ 214 | 215 | # Ignore Gradle GUI config 216 | gradle-app.setting 217 | 218 | # Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored) 219 | !gradle-wrapper.jar 220 | 221 | # Cache of project 222 | .gradletasknamecache 223 | 224 | # # Work around https://youtrack.jetbrains.com/issue/IDEA-116898 225 | # gradle/wrapper/gradle-wrapper.properties 226 | 227 | ### ReactNative.Linux Stack ### 228 | *~ 229 | 230 | # temporary files which can be created if a process still has a handle open of a deleted file 231 | .fuse_hidden* 232 | 233 | # KDE directory preferences 234 | .directory 235 | 236 | # Linux trash folder which might appear on any partition or disk 237 | .Trash-* 238 | 239 | # .nfs files are created when an open file is removed but is still being accessed 240 | .nfs* 241 | 242 | ### ReactNative.macOS Stack ### 243 | 244 | # Icon must end with two \r 245 | Icon 246 | 247 | 248 | # Thumbnails 249 | 250 | # Files that might appear in the root of a volume 251 | 252 | # Directories potentially created on remote AFP share 253 | 254 | # End of https://www.gitignore.io/api/node,macos,reactnative 255 | 256 | 257 | # EXTRA COMMENTS: 258 | # You might want to start ignoring cache directories and the output. 259 | # In this case, the ./lib/ folder should be ignored as you will regenerate 260 | # it from the typescript files. But I left it in for you to play directly 261 | # and run without having to compile. 262 | # Ignoring the .jest directories... 263 | 264 | .jest/ 265 | 266 | # Uncomment the line below if you want to ignore the lib folder 267 | # (our output directory) 268 | 269 | #**/lib 270 | 271 | # if you just want to ignore the map files. 272 | #**/lib/*.js.map 273 | #**/lib/*/*.js.map 274 | 275 | lib/ -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | # Table of samples 2 | 3 | Every exercise described here, should have been downloaded to your `samples` folder, prefixed with a number (matching the number given to these exercises). If the folder is empty, you might need to initialise the submodules by typing in the root folder of this repo: 4 | 5 | `git submodule update --init --recursive` 6 | 7 | If you want to browse and play with that application in `vscode` (sublime, atom or any other) I suggest you to open that folder instead of the root folder. Most tools are configured to work within the project itself. 8 | 9 | ```sh 10 | $> cd samples/ 11 | $> code . 12 | ``` 13 | 14 | Before running any project, you might need to setup its dependencies locally as I was not going to push all the dependencies. I recommend `yarn` as it is much faster than `npm` (or it feels much faster) but, in case you don't have `yarn` installed here is the command you need to type: 15 | 16 | ```sh 17 | $> cd samples/ 18 | $> npm install 19 | $> ./node_modules/.bin/tsc 20 | ``` 21 | 22 | If you **DO** have `yarn` installed then: 23 | 24 | ```sh 25 | $> cd samples/ 26 | $> yarn 27 | $> ./node_modules/.bin/tsc 28 | ``` 29 | 30 | _Step 2: will install all the dependencies. Alternatively, you can run `$> yarn` which will install the dependencies as well (if you have yarn installed)_ 31 | 32 | _Step 3: will compile the typescript code and populate the `lib/` folder. OTHERWISE YOU WILL GET THE RED SCREEN OF FAILURES_ 33 | 34 | If you want to know more about npm: [Follow this link](https://docs.npmjs.com/getting-started/installing-npm-packages-locally) 35 | 36 | ## Before you start browsing the code 37 | 38 | I wrote below a few (lots) words to describe the intension behind (or warnings) each exercise I set up myself to do. If you are interested, each repo has its own readme file where I discuss a few ideas I had, observations and notes to future Rod reading the code (I am Rod, just in case). If you find a comment out of context, please let me know and I will fix it as soon as possible. 39 | 40 | ## Exercises 41 | 42 | ### 1.Hello World 43 | 44 | This project gives you the minimum configuration to build and execute a react-native app in iOS and Android, written in typescript with the typescript linter (`tslint`) + vscode project configuration to debug the application. 45 | 46 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-1) 47 | 48 | ### 2. Actions 49 | 50 | Just an increment of the previous sample. 51 | 52 | Learning about subcomponents, styles, usage of resources and how to listen to button events. 53 | 54 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-2) 55 | 56 | ### 3. ToDos (really simple-poorly built- list of todos) 57 | 58 | Getting the practice of setting up a new react-native + typescript is boring but necessary... so, decided to take a look at a very *simple* list of todos... How to add items and how to remove it. 59 | 60 | > I thought doing this sample was going to be dead easy as all I needed to do was: 61 | > 62 | > 1. Display a list on the screen. 63 | > 1. Understand a bit better flexbox (completely missed this) 64 | > 1. Get some navigation to work (completely missed on this one as well) 65 | > 66 | > Hopefully, you will notice some of the mistakes I have made in that app. It made me understand that I needed to spend more time looking at some of the dependencies (and youtube videos to learn more). 67 | 68 | That sounds simple, right? 69 | 70 | Wrong! 71 | 72 | *Learn to walk before you run* used to tell me mom every time I was learning something new. 73 | 74 | Unfortunately, I tried to fly when I was still unstable on my legs and this exercise is a pure of different things. Understanding a list is not difficult, the part making me struggle here was understanding how navigation works and how to pop views from the stack. 75 | 76 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-3) 77 | 78 | ### 4. NavScreen (Navigating between screens and passing data through) 79 | 80 | Going back to baby steps. 81 | 82 | Let's get navigation to work. 83 | 84 | The objective is: 85 | 86 | - Learn how to use a navigator (a navigator that pushes cards/views/screen as the user requires more information or details) 87 | - How to pass arguments between each other (more especifically, how to send data to the top of the stack) 88 | - What's the minimum configuration to get the navigator to work. 89 | - Improving my understanding of flex. 90 | 91 | This exercise will be just checking the `StackNavigator` as the `TabNavigator` does define routes and I can concieve an example to get it to switch tabs with a different control, but a `StackNavigator` was giving me issues previously. 92 | 93 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-4) 94 | 95 | ### 5. Declarations 96 | 97 | Not a __react native__ exercise but something very useful if you are working with typescript. 98 | 99 | The idea behind this exercise is to understandh how to generate the type definitions (or `d.ts` files) for a given javascrip library; a library outside of your control that needs to be wrapped and used in your project. 100 | 101 | **Why?** 102 | 103 | Typescript gives you a rich way to understand your code. It gives you guidance when writing it and type safety when invoking your code. 104 | 105 | Unfortunately, most of the Javascript developer have not used Typescript (_shocking! I know!_) and sometimes you will find a library that has not been 'defined' for typescript. The type definition file bridges your Javascript and Typescript world without you having to sacrifice the safety of types. 106 | 107 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-5) 108 | 109 | ### 6. Simple Redux 110 | 111 | From the react-native site to most tutorials around the web, one common topic spoken around is Redux. 112 | 113 | But what is it? 114 | Plainly put, is a framework (not attached to react-native in particular) that tries to separate the application state from your logic to decrease the mutability of your state and helpfully adding some simple concepts to order the chaos of communicating changes between components. 115 | 116 | These are the first steps towards building an application with React-Native, Typescript and Redux. Unfortunately, I end up complicating things a bit too much (again). Exercise 7 should be easier to follow to begin with. 117 | 118 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-6) 119 | 120 | ### 7. Simple Redux app (A counter) 121 | 122 | This application will increase or decrease the current count... By how much you ask? I don't know... let's be crazy and get random numbers. 123 | 124 | This second exercise should allow me to practice and understand just redux concepts without having to worry about multiple reducers, action creators and the store. 125 | 126 | In here you will find a single container, single reducer, two action creators and one store (is always one store in redux). Also, will be trying to fix that nasty declaration from the simple redux exercise `class Container extends React.Component` as I did not know how to create a type with merged definition. 127 | 128 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-7) 129 | 130 | ### 8. A feeder app (first try) 131 | 132 | So far I've done two exercises with redux, the first one (exercise 6) allowed me to start understanding these concepts and the second one (exercise 7), gave me the opportunity to test those concepts in a very simple scenario. 133 | 134 | Now, so far I have been practicing with synchronous functions and that is kind of boring. In the real world most opertions take some time to complete. How does redux deal with that? 135 | 136 | What should I learn to deal asyncrhonous state? 137 | 138 | Let's find out! 139 | 140 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-8) 141 | 142 | ### 9. Back to basics (standard controls) 143 | 144 | As much fun as I had building the feeder app, I've started to notice I've not played with most controls... and as the matter of fact, haven't played with the android emulator either... so, I will create a project that allows me to practice different controls, nothing fancy and no logic behind all the controls, just a showcase of the controls. 145 | 146 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-9) 147 | 148 | ### 10. Typography 149 | 150 | Over these past exercises, just noticed the font names have unexpected names (sometimes)... So, let's create a simple app that explores all the different fonts available to us in react native. 151 | 152 | Fortunately for me, I found online a list of fonts supported by both Android and iOS. Hard coding this list may give us a foundation to work with. 153 | 154 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-10) 155 | 156 | ### 11. Typography 2.0 157 | 158 | Previously, we used a hard coded list to iterate and display all the fonts available to use in an operating system (A very uncommon thing to do as an app for both iOS or Android). 159 | 160 | But... I started to wonder, 161 | 162 | Is there a dynamic way of getting all the systems fonts? 163 | 164 | iOS has a method exposed on its `UIFont` object, I am not that sure about Android (let's investigate how!). 165 | 166 | If react native does not provide it, could I create a native service to look that for me and pass it through the react native side of the app? 167 | 168 | This means: time for interops `iOS => React Native` and `Android => React Native`! (and maybe back?) 169 | 170 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-11) 171 | 172 | ### 12. Tab Navigation 173 | 174 | To avoid information overload, is important to know how to organise and present data to the user. 175 | 176 | Let's use twitter as an example: the application presents a tweet stream, users, mentions and settings in clear sections. 177 | 178 | Each of these sections have clear and well defined functionality, intended to be discovered almost immediately. This is a behaviour very different to the one provided by a `StackNavigator` and I completely ignored how to work with `TabNavigator` before... So, I might need to take a look at other ways of navigating the content provided by an application. 179 | 180 | I had planned to look at a different navigator mixing it up with redux... but I need to remember, babysteps (again, my mom always used to say: "piano piano si va lontano", meaning "you will get far if you do it calmedly and steadily"... although the actual translation from Italian is slowly one goes far). So, I will slowly build my way there. 181 | 182 | Info to [tabnavigator](https://reactnavigation.org/docs/navigators/tab) 183 | 184 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-12) 185 | 186 | ### 13. Reduxing the Tab Navigator. (Tab navigation and redux) 187 | 188 | The `TabNavigator` wasn't that bad, pretty similar (configurationwise) to the StackNavigator. Now, how do I get this to work as expected with a redux store? 189 | 190 | Reading the `react-navigation` guide [here](https://reactnavigation.org/docs/guides/redux), I've found the basic configuration to get it to work, and browsing around for repos you will find pretty quickly lots of different (undocumented) examples that are very confusing. 191 | 192 | The documentation also mentions to store the navigation state (whatever that is)... how can I use that? 193 | 194 | More importantly, how can I configure my application so a container or component does not know about the navigator (increasing the capacity of code composition further in the future). 195 | 196 | A great place of inspiration, perspiration and examples was the [redux example](https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample) provided by the community. Based on this, I decided to build an application with a log-in screen and an user area in which you will be able to tab around your way or log-out. 197 | 198 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-13) 199 | 200 | ### 14. How do I persis things locally? 201 | 202 | So far, we've learnt libraries to develop our applications such as: `react-navigation`, `react-native-vector-icons`, `react-native-elements`, and `redux`. All very useful but... I keep losing the data I've input when the application is deallocated from memory. 203 | 204 | Ideally, I should be able to preserve the application data store... and that is exactly what `redux-persist` does for you. Redux persist is not going to replace your usage or configuration or your redux application, it will enhance it and extend it for you. This means you need to be more conscious about the state you put in your application data store, otherwise you will find yourself writing lots of transformation from a previous state to your new state, but at this very moment, we will focus on just creating a simple application requesting information from a slow data source and display it on the screen. 205 | 206 | In this exercise we will be writing an application to count your energy intake (or caloric intake, although the application is going to have the data expressed in kilo joules or kJ), meaning we need to get a list of products (or available energy sources) and mark the quantity of each as we ingest it. 207 | 208 | [More info about redux-persist](https://github.com/rt2zz/redux-persist/) 209 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-14) 210 | 211 | ### 15. Let's check other persistance forms... Couch, Pouch or Sqlite? 212 | 213 | A common example to investigate is the integration to any database of sorts. 214 | 215 | Reading about different technologies can open up your mind to new ways to fullfil your goals, but reading for the sake of reading does not give you these ideals, we need to tackle a problem. 216 | 217 | An application to browse an online catalog would be great, but what about if we could take that store and make it offline? wouldn't that make your application more responsive and save up resources? 218 | 219 | On this first exercise, we will look into sqlite before we try to dive head first in pouchdb. 220 | 221 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-15) 222 | 223 | ### 16. Same book catalog, but in pouchdb! 224 | 225 | Reimplementing exercise 15, but using pouch db with async storage. 226 | 227 | This exercise will illustrate how much or how little code you need to achieve a similar behaviour with PouchDB (as well as understanding how to use it). 228 | 229 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-16) 230 | 231 | ### 17. Swiftly. Wondering what you need to do to get a swift project to work nicely with react native? 232 | 233 | So far, we have been working with the ObjectiveC (which is quite a dated language)... so... how difficult would it be to make react-native work with Swift? 234 | 235 | Swift is a better language than ObjC (although XCode has become horribly slow... no idea if the root cause is Swift support) but... It would be lovely to have the option to pick which programming language your template is going to be based upon (more on this a little bit later) 236 | 237 | So... this exercise will take a new project we just created in xcode (choosing swift as our programming language) and add react native support to display a view or what have you. 238 | 239 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-17) 240 | 241 | #### I see you continued reading... perhaps you like idea about getting react native cli to generate a template that better fits your native programming skills 242 | 243 | I love Swift as a programming language as much as I love C# (which is a lot) and F# (although I do not have a lot of experience with this one)... So, I was mildly annoyed when you need to go around so many different loops to get a simple Swift project up and running with React Native. Because of that I've created a feature request, to extend `react-native init` to take in a series of parameters to specify if you want your template to be based on swift or objective c for ios or java/kotlin on the android side. 244 | 245 | Ideally, this feature request should also enrich the ecosystem as building application in react native tend to drive you a little towards the native side to solve some issues. 246 | 247 | If you want to support this idea, please vote on [canny.io](https://react-native.canny.io/feature-requests/p/initialise-a-new-project-with-specific-native-language) to get the facebook people interested on this. 248 | 249 | ### 18. Infinite Scrolls 250 | 251 | One of the awesome things of learning from an online community is, you get to interact with other developers and get ideas from other people. 252 | 253 | As I explored before, I had to fetch the typography from the system or download certain information before I was going to display it. This process meant that I had to fetch a set that was relatively known in size for me to define if I wanted to display a loading message or just risk it while the application was downloading data. 254 | 255 | Looking for better ways to deal with this I bumped into [Spencer Carli youtube channel](https://www.youtube.com/channel/UC_uuod9nde9Hoea8xIVBeZQ) and his infinite scrolling app. The basic idea is, download just a few pages worth of data and display is as quickly as possible. This gives you great responsiveness and saves resources. 256 | 257 | This exercise is a reimplementation of [Spencer Carli flat list demo](https://github.com/spencercarli/react-native-flatlist-demo)... but in typescript 😝 with some custom variation 🤨 258 | 259 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-18) 260 | 261 | ### 19. Basic animations 262 | 263 | We've looked into lots of different controls, interops with native code (at least in iOS), dealing with data storage and persistance, navigation and immutability of global state (redux)... all of that is good but the finess and delightful experience does not come from just a good and stable application, it is generate from the interactions with the application. 264 | 265 | Indicating how different elements variate over time is a great way of communication with the user, so the next exercise is about the animation api provided by react native. 266 | 267 | What would be a great little animation to make? let's get the little prince to take off his little planet. 268 | 269 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-19) 270 | 271 | ### 20. Animating flex box. Expanding a set of sections. 272 | 273 | Wondering how to expand and collapse sections with an smooth experience? So am I, let's do this! 274 | 275 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-20) 276 | 277 | ### 21. Animations 2. React native animatable library 278 | 279 | Checking out what is possible with animatable library and how is different to the one that is already part of react-native. 280 | 281 | As it turns out, `react-native-animatable` will provide you with a easy to use mechanism to inject animations into your UI elements, giving it a little bit of life on its own in case you need to draw their attention to specific areas. If you will be implementing a complex animation, you might need to look back at the standard animated library or... I wonder if it is possible to import animations from Adobe After Effects. 282 | 283 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-21) 284 | 285 | ### 22. Fancy animations or Animations 3. Lots start looking into professional animations that we can import... Lottie to the rescue! 286 | 287 | Getting nice animations just the way your designers want has never been easier. Airbnb has made a library for react-native allowing you to import your animations without hassle. 288 | 289 | [Source code](https://github.com/rodrigoelp/reactnative-typescript-exercise-22) 290 | 291 | ### 23. Gestures. 292 | 293 | What to build? TBA 294 | --------------------------------------------------------------------------------