Photo by Allef Vinicius on Unsplash

5 Lessons learned while creating a React Native app from scratch

+ my personal opinions

Intro

It was autumn 2019 when I decided to dive deep into waters of the React-Native. I had some previous experience with React, but no experience with native code and neither with cross-platform languages. To adopt React Native I decided to build the application for students at STUBA (Slovak Technical University). “It would be just another simple and typical client-server mobile application, it just cannot be that hard”, I thought - but by reading this article you can assume I was wrong.

If I should start again or advise somebody, the following would be the words I needed:

1. Find your “WHY”

“Why”, Noun: For what cause or reason, the reason for which, for what reason.

I have seen a lot of people just pass along their days without passion like they do not care about their jobs or future. Do you know Casey Neistat and his “Without Goal you can not score”? Without vision, you drift around and you never end up anywhere.

Why right "why" is important

When I had left my first full-time job it was very tempting to buy a flight ticket to Bali, Portugal or Spain and do nothing or just “explore”.

The thing is I start being bored with doing nothing. Without learning, challenging work, or growing in one or another way I start being deprived.

Photo by Taylor Simpson on Unsplash

In wild and dangerous business waters, things can get tough. You may find something that you wanna try, but sooner or later you will need to solve some issues.

With more problems coming towards you, you are more likely to stop working on something that looked so important for you back in time. If you have your right, not-selfish or ego-driven "WHY", something so important or exciting that you can not wait to get up from your bed and continue working on it, you are in the zone where great things happen. You should find something that you like doing — with hate you definitely will not go very far. If you find your work to be exhausting, uninteresting or boring, maybe it is time for a change.

Sure, when I look back, I was often frustrated with some things in the beginning. But, I must also tell that what came later was one of my most creative times and - I was really happy.

These days freedom, challenging work, place to grow, great leadership, creativity are what catches the attention of people like me. It's not just about company name, your boss or team.

To sum it up you need to find your "WHY" to do things that:

  • you will certainly be proud of completing
  • drive you to create something bigger than yourself
  • are not purely ego-driven
  • allow you to learn (creativity over repetitive tasks)
  • challenge you
  • you will do even in tough times
  • are in harmony with your character (just be yourself)

And remember that it takes on average only 4 attempts to succeed.

Photo by Estée Janssens on Unsplash

2. Get to know your customers

Do you know who is the primary target group for your app? The young students at high schools or skilled professionals in their 30s have different expectations. If you are building something with global impact/availability, did you incorporate all cultural do’s and dont’s ? Will they use it indoor/outdoor? Do you need to include heavy offline capabilities, optimize for slow network conditions, etc. ? If you are heavily relying on the camera/photo scanning, will it work also at night? If you are building something for a stable and big company, did you ask for their style guidelines? Do you know which devices and platforms do they use?

After identifying client needs you can very fast analyze what is currently at the market, see what the users do not like and what their real-world habits are. I recommend you to do the one or another kind of market-analysis that gives you the answers to the questions I mentioned.

Photo by Sebastian Sammer on Unsplash

3. Find your study-guide book or course

"Master Java in 3 Days", "Android in Nutshell" or "iOS Expert in 10 days" — are hot candidates for titles of books or video-courses. If you are a person working in the SW industry, you surely know it does not work like that - and to be honest, it took me definitely more time than 10 days to "understand" the RN ecosystem and its cons and pros.

When you want to learn about something you do not know, the solution is simple — read the book from somebody that knows more than you. Believe me, great books are made because somebody is trying to tell you something. Youtube videos will not give you view big enough.

Maybe you could find a better book but I can recommend you this one: Mastering React Native.

I have also found out that I did remember more from reading books, than from watching video courses only + I was able to find code snippets or problematic topics much faster than with video courses.

If you still insist on video-courses, there is no need to pay for them:
Stanford offers great React Native course for free: (was there any bad course on Stanford ? )

If you are convinced you do not need any upfront learning, it will come back to you in the future. Trust me, I have been there multiple times and I am sure you do not want to learn things “the hard way” like me and moreover, in between tight deadlines.

Decent RN Book / Course should make you understand the following:

All of this knowledge will help you to properly estimate the effort required to build the RN apps.

Learn on your own too, but not to level you close your mind against the new

During the learning process, it is crucial not to be against any new unknown ideas — and it is purely up to you or your team to find out if something new is bullsh*t, anti-pattern, or something you could benefit from. Just keep your mind open to the changes.

4. Get or Make Design

After market-analysis and some theoretical technical knowledge (deep enough to allow you to estimate the complexity of your app), this is the place where designers come to the game (very often you just should go and find them). The created outcomes a.k.a fully-functional design should be agreed on with the client or product owner now! and not later. It is much, much easier to rework application UI prototype using designer tools, than to re-code already built application and associated business logic.

Why design matters

As you can see in the AppStore or Google Play, people love great UX and UI. The great UX works with emotion, makes you want to use the app once again, etc.

Moreover, the poor design looks unprofessional and it hurts also both your personal brand and new incoming clients. Just think about that sooner or later your client could realize that he wants something “nicer” just to be more market-competitive. Yes, you can do it, but you can also get stuck with this project and not be able to take a new one.

Make your design useful, easy to use, and desirable in a way that represents you and your personality.

If you do not want to hire a professional designer, you could still create the design by yourself.

You could use either:

To start quickly, you can find free Figma templates here or Sketch templates here and then just edit them: but be aware, that great UX/UI is more than just “redesigning” templates of someone else. UX / UI are deeply related to the specific problem you are trying to solve. And also be sure that the final design reflects you or your brand in one or another way.

Finally, all built "sketches” will help you to create a clickable prototype that you could share with the client and discuss ideas. Yes, clickable and exportable. See example below - what could be built with Sketch (with no code):

Moreover, with a great design tool you should be able to export parts of delivered templates e.g. in SVG, PNG formats and use them directly in your code (I added it here because not many people know about this).

After I-have-design phase

With the all design files in front of you, you can analyze reusable components, identify how many screens you need, etc... Then you could distribute these independent screens between your whole UI team members to develop app faster.

5. Development

After planning, and design analysis the development is right ahead of us. Let’s go.

The later in time the bigger or more complicated changes come, the more dirty your code would be. And certainly more buggy. I definitely recommend you not to start without having any design upfront.

Read the docs (and continuously)

Whenever you start doing something, read the documentation. In this fast-paced world, things are changing almost with each new release and it is necessary to be in contact with RN developers. Put your ego aside, and do not think you already know everything.

Start with hello world

Make sure that you have installed all the stuff React Native needs for both platforms. If you are starting with nothing ( like I was ), make sure that you can run a simple application like "Hello World". Try to edit it, change texts, add more components and styling just to become familiar with the tools.

Photo by Keri liwi on Unsplash

Develop UI with Storybook first

Then if you are brave, go and install StoryBook.

UI development is typically done with the help of the Storybook that allows you to transform the design from Sketch into code without the need to deeply integrate UI screens with external data fetching e.g. like API calls. Moreover, your components will be more isolated, reusable!!, your code will be cleaner and by running multiple emulators with Storybook-backed application you can fix screen-resolution-oriented problems early in the project phase. Start thinking about interactivity, hiding/showing components, inputs handling, etc.

Example of Sketch Design — what you will use to build UI with Storybook

Moreover, by using Storybook you will create the project, which is definitely much easier to maintain in the future.

Create your app-flows using navigation library

If you have read a great book or watched a video course, you already know that react-navigation allows you to compose navigators in a structure similar to a tree. After you have developed screens with StoryBook, connect them to navigation and create application flows (take a quick look below).

//screens, navigation and navigation-nesting exampleimport {  createStackNavigator,  createBottomTabNavigator} from "react-navigation";const AppBottomTab = createBottomTabNavigator({
firstTab: {
screen: Home,
navigationOptions: {
title: "Home"
}
},
secondTab: {
screen: Profile,
navigationOptions: {
title: "My Profile"
}
}
});
const RootStack = createStackNavigator({
errorScreen: {
screen: ErrorScreen,
navigationOptions: {
header: nullHeader,
headerLeft: null
}
},
appHome: {
// navigators nesting example
screen: AppBottomTab,
navigationOptions: {
header: nullHeader
}
}
});
// you should render this one
export default RootStack;

Use state-management libraries

After you have introduced navigation, it is time to involve the state-management library (if it is needed). Model your state on the board without coding anything, just to see what you need to handle and where you need to handle it. Divide And Conquer.

Photo by Christina @ wocintechchat.com on Unsplash

Add more business logic / Handle side-effects

For asynchronous actions or more complex business logic, you may need to add Redux-Saga or Redux-Thunk. Although with both you can define business flows, by using Redux-Saga you will create much cleaner code - you will just need to understand JS-generators syntax. Just to give you a few examples, Redux-Saga can be used for calling APIs, handling OAuth authentication and tokens refresh or interacting with persistent layer -database.

If you choose MobX as your state management library there is a chance you will need neither Redux-Saga nor Thunk. So you could handle side-effects directly with MobX.

No matter which library you choose, be sure you read and can use also things written in advanced parts of the documentation. Everybody can do Hello World.

To keep your code clean, do not write spaghetti-code, too much-complicated code or invent your own wheels. Just NO.

Photo by Keri liwi on Unsplash

Few library hints:

After you have mastered all of this, you can find a few more things about how to improve your application even further:

Summary

I wrote this article just to show you, what it takes to create great React Native application and what mistakes I made and - you do not have to. I have tried to share as much as I could and describe every resource that helped me.

Before you even start, you really need to find motivation or reason to create something valuable so that your application would not end like a side-project (unfinished). At least, I personally prefer not to end with just Hello-World applications.

If you have found your goal, you just need to start preparing to score. Know your market, users and their habits. Without failing to prepare for this you are preparing to fail.

Continue with the learning phase. By finding proper learning materials, you are one step closer to your goal. With all theoretical knowledge, you can start planning the development of your app. Involve UI / UX designing in the process, as it is very important and cheaper than rewrite your application later on the client's demand.

Continue with StoryBook development. After just add navigation, connect state-management libraries and you are almost done! If needed, install Redux-Saga or Redux-Thunk to handle complex business logic and confirm the final state with the client. And voila, your application is born and…

You have just scored the goal.

So far I did not write anything about testing, setting up your CI build and distributing your application to end-users. So, the next story will be about unit and E2E (end-to-end) testing, setting up CI, distributing the application to the end-users and maintenance of RN apps.

Do you like the content like this? Let me know :)

Hi, I am Stefan Majiros, serverless and React Native freelancer. You can follow me on Twitter (@stefanmajiros), or hire me for your project using https://stefan-majiros.com where you could schedule 30min video call with me to consult your project — for free.

--

--

--

Senior React Native Developer @stefan-majiros.com (Mobile MVP Dev Agency). Working w/ AWS Amplify and Firebase. Open to remote dev projects w/ my own clients!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stefan Majiros

Stefan Majiros

Senior React Native Developer @stefan-majiros.com (Mobile MVP Dev Agency). Working w/ AWS Amplify and Firebase. Open to remote dev projects w/ my own clients!

More from Medium