React Native Flash Card Project

This was my first React Native project. The basic idea behind the app is to give the user the capability to create flash card decks that they can use to study different subjects.

React Native VS React

This is perhaps what I like the most about React Native, in many ways its exactly like developing a react app (which I enjoy). You still have most of the same great data flow tools such as state (ie setState), the passing of properties between components; you can still use Redux for more complicated applications; lastly you can still modularize your code with custom components which can keep your code nice and clean.

One of the key differences is that you have to use flex box for all of your styling (which isn’t necessarily a bad thing). Another is that you have to use custom React Native components, which again is no big deal its just another thing to get used to. The one difference that I did find a little bit troubling is I didn’t find the debug tools to be all that expansive. In order to really debug I essentially had to leave a lot of console.logs or apply logger middlewares for my redux store. Compared to react and redux this is sort of a drag but I will be looking out for better debug tools (I’m sure they are out there).

React Native Navigation

For this project I used react-navigation. If found it to be pretty cool, I can add three different types of navigation including tab, stack and drawer navigation types. Tabs seem to be really good for your main navigations, stacks is best for views that you have to pass new data between screens and drawer is an addition or supplement to tabs menus (drawer is not seen in this project but can commonly be seen with apps that have hamburger menus and have the menu popping out from the side). You can also have special configurations to deal with menu colors and other customizations.

React Native Components

React Native is a bit different from other hybrid mobile frameworks that I know of (namely Ionic) in that the components map to native iOS and Android components, while Ionic just uses web view and just uses html components; this leads react native having better performance and animations having more “native” feel.

Some of the basic components include the , and components. In my experience with this project View roughly maps to div and every app view should probably be wrapped with at least one View component. Unlike Ionic which only uses html, any type of text needs to be wrapped by a component or you will end up getting an error. is a good substitution for the button tag, it has slightly different animations between iOS and Android to give a more native feel.

Expo

By far one of the coolest things about react native is expo. Expo is an application for building and deploying react native apps. One of the coolest features is for testing your code. You can download the expo app, run expo with yarn start and see your app on a real phone (or two or three different devices at once), make an update, it will update on your other devices as long as they are on the same wireless network. While this is uber cool it can take a little while for the other devices to update with new code differences (maybe about 30 seconds) so while your really doing development its usually better to use xCodes and Android studios emulators which update virtually immediately (and you can run both of those at the same time). Once you are ready to deploy all you have to do is run a command; if you are deploying an iOS app it will ask you for some of your Apple ID info and then expo will push the app to iTunes Connect for you (super easy); for android it will do a build and then give you a link to the compiled code where you can upload to Google Play.

This was a really fun project and I’m hoping to work with React Native more. If you would like to see the code for this project you can see it at: https://github.com/djarrin/react-native-flash-cards