Scribd
Upload
72 views12 pages

React Native Tutorial: Build Your First Mobile Application

This document provides an overview of building a mobile application with React Native. It will cover setting up a project, rendering basic components like text and images, creating custom components, passing props, and rendering scrollable lists. The prerequisites include installing Expo CLI, the Expo client app, and sample assets. The tutorial will then walk through initializing an Expo project, creating CarItem and Button components, finishing the CarItem component with buttons and props, and rendering a scrollable list of cars with a header. It concludes with a demo and Q&A section.

Uploaded by

alejandro guespud
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
72 views12 pages

React Native Tutorial: Build Your First Mobile Application

This document provides an overview of building a mobile application with React Native. It will cover setting up a project, rendering basic components like text and images, creating custom components, passing props, and rendering scrollable lists. The prerequisites include installing Expo CLI, the Expo client app, and sample assets. The tutorial will then walk through initializing an Expo project, creating CarItem and Button components, finishing the CarItem component with buttons and props, and rendering a scrollable list of cars with a header. It concludes with a demo and Q&A section.

Uploaded by

alejandro guespud
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

REACT NATIVE TUTORIAL

Build your first mobile application


What will you learn?

- Setting up a project
- Rendering Components (Texts, Views, Images)
- Creating Custom Components
- Using Props
- Rendering Scrollable Lists

Who am I

- Full stack developer for >7yrs


- CTO @Fitenium
- ex Amazon Intern
- Passionate about coding and building
impactful startups.

Prerequisites

1. Expo CLI
2. Expo client app for iOS and Android
3. Assets: http://assets.notjust.dev/tesla

Docs: https://docs.expo.io/get-started/installation/

Let’s get started

Initialise the expo project:

$ expo init TeslaClone


Open TeslaClone in your editor of choice
Then, start the project:

$ yarn start

Car Item Component

1. Render the text (Model, etc.)


2. Render the Background Image
3. Create a separate component for CarItem

Button Component

1. Create a separate component


2. Receive props
3. Style The button based on ‘type’ prop

Finish Car Item Component

1. Use buttons
2. Implement props

Render a scrollable list of Cars

1. Use the dummy data


2. Render the FlatList
3. Setup Snap to view

Render the header of the app


DEMO
Q&A

You might also like