Build an AudioBook app in React Native using Styled Components

In this tutorial, I am going to demonstrate how to use styled component architecture in building reach native UI.
You can find the finished source code on my repository..

AudioBooks design was created by David Felipe V and originally forked from codinger41

What is Styled Component?

In React Native, Javascript objects are used to create styling which is a daunting task, confusing and very hard to grasp for beginners, styled-components allows you to write actual CSS code to style your components.

Styled-components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use and love, including (but by far not limited to) media queries, all pseudo-selectors, nesting, etc.

Style Component removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it.

Benefits of using Styled Component over Javascript Object Based Style

Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.

No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.

Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

I won’t be wasting much time explaining how to use style component rather I am going to teach you how to apply the knowledge to build awesome UI.

What we will be building?

AudioBook is an app that lets you stream audio recordings of authors.
The finished app has;
Firebase for authentication, storage, and push notification.
Redux for state management
Adaptive layout for Ipad, Android and different variety of IOS layout
But for the purpose of this article, we are going to use mock data to keep the tutorial simple.

If you are a beginner who has never built an app, then you are in luck. Prototyping app these days is much easier than it used to be. With Expo, you can do awesome stuff in less time. After this article, you should be able to add the project to your portfolio.

Getting Started
If you have not installed expo-cli on your terminal, run the following command.
npm install -g expo-cli
Initialize a new project
expo init AudioBook
Press enter key to select > blank

Write AudioBook for name and press enter

Use Yarn to install dependencies?
Y
Once the package has finished installing
cd AudioBook and yarn start

There are 3 ways to open the app
1 Press i to open the ios simulator
2 Press a for android
3 Scan the QR code to open in your actual device

If you have the setup complete, congratulations.

If you are having issues setting up, you can book a free session with me here and I will help you resolve the issue.

Adding Startup files
Now that we have setup the project, we need to install dependencies and add the startup files. The startup file saves time and increases productivity for react native projects.

Open your project in a code editor

Delete your assets folder
Download the startup here

Copy assets, components, data, navigation, screens, utils folder to your project.

Install React navigation and Styled Component

yarn add react-navigation styled-components

Once the dependencies have installed, replace the App.js from the download startup folder to yours.
Now you should have this

Screens -- HomeScreen

Styled Component let's use CSS and tags to create custom and reusable component. This gives the developer the foresight to visualize every atomic space and size used.

Replace the HomeScreen.js with
HomeScreen

Next Replace the ImageList.js with
ImageList

Now we are done with the HomeScreen

Screen -- BookScreen

Replace the BookScreen.js with
BookScreen

Music Functionality

Music

Click on the Play button to play the music

If you have reached this stage, congrats

You can find the finished source code on my repository.

What we will be building Next?
We will be building GigStar, a freelance gig app where anyone can post and find gig within an environment. We will extensively use Firebase's new database called Cloud Firestore to store data.

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity.

With Cloud Firestore, you can do expressive querying, realtime updates, offline support and push notifications. I can't wait to be done.

Finally, react native is one of the most sought after technology in 2019 due to the large share of mobile share of the market, as a react native developer you write once and build both on the ios and android platform.

I offer long term mentorship on my page if you want to learn and build native apps with react native.

Here is what I teach most of my mentee.
Basics of Javascript
Styled Components
Props and Icon
Static Data and loops
Animation
Redux
Networking
Screens and Navigation
Adapting for different device
Gestures
Firebase database

Thanks for reading 😄 Please 👏 if you liked this article. If you have any questions at all, feel free to comment below and i will respond asap!