World 2 / Rookie Zone

React Native Start

A hands-on React Native starter course. Build real mobile screens with View, Text, StyleSheet, Flexbox, Image, Pressable, props, state, conditional rendering, TextInput, FlatList and a final Todo App. Clear lessons to unlock next zone. Boss Project waits at the end.

Enter World 2
NP
World entranceStart Zone / Training CampBiome: Camp

The training camp collects the first React Native moves: screens, components, Expo, and mobile JavaScript.

Guide: Pixel Mentor

Reward skill: Mobile foundation

Objective: Learn View, Text, styling, state, and interaction as your starter mission chain.

Route progress0%

Start Zone / Training Camp

Build a confident first mobile screen and enter the course map.

Route progress0%
World route

What you will build

Build your first screens and understand the component model.

What you should know

World 1: JavaScript for React Native

Recommended previous world

World 1: JavaScript for React Native

Next world

World 3: Expo Start

Status

Free

World

World 1

Time

11 h 40 min

Map

3 zones / 14 lessons

Lessons

0 / 14 lessons

Sign in to save progress and XP.

Quest mapStart Zone / Training Camp0/14

First App Gatekeeper

01Current
NP

Quest

Mission 1

Mission 1: First mobile screen. Read the briefing, solve the practice quest, and bank the XP.

+30 XP
02Locked

Quest

Mission 2

Mission 2: View and Text: composing blocks. Read the briefing, solve the practice quest, and bank the XP.

+32 XP
03Locked

Challenge

Mission 3

Mission 3: StyleSheet: course card. Read the briefing, solve the practice quest, and bank the XP.

+38 XP
04Locked

Quest

Mission 4

Mission 4: Flexbox: dashboard row. Read the briefing, solve the practice quest, and bank the XP.

+42 XP
05Locked

Quest

Mission 5

Mission 5: Image: student profile. Read the briefing, solve the practice quest, and bank the XP.

+40 XP
06Locked

Reward

Mission 6

Mission 6: Pressable: interactive lesson card. Read the briefing, solve the practice quest, and bank the XP.

+45 XP
07Locked

Quest

Mission 7

Mission 7: Props: CourseCard component. Read the briefing, solve the practice quest, and bank the XP.

+55 XP
08Locked

Quest

Mission 8

Mission 8: useState: lesson progress. Read the briefing, solve the practice quest, and bank the XP.

+50 XP
09Locked

Challenge

Mission 9

Mission 9: Conditional rendering: empty and success. Read the briefing, solve the practice quest, and bank the XP.

+45 XP
10Locked

Quest

Mission 10

Mission 10: TextInput: note form. Read the briefing, solve the practice quest, and bank the XP.

+55 XP
11Locked

Boss

Boss mission

Boss mission: FlatList: course list. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

+60 XP
12Locked

Boss

Boss mission

Boss mission: TodoItem component. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

+55 XP
13Locked

Boss

Boss mission

Boss mission: Todo App: add and delete tasks. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

+75 XP
14Locked

Boss

Boss mission

Boss mission: Todo App: empty state and completion. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

+80 XP

Mission 1

Mission 1: First mobile screen. Read the briefing, solve the practice quest, and bank the XP.

Skill collectedMobile foundation
Rewards
Final objectiveStart Zone / Training Camp

First App Gatekeeper

World goal: Build a confident first mobile screen and enter the course map.

Skill collected: Mobile foundation

Level 1

React Native UI fundamentals

This module moves through a focused part of React Native Start. Each lesson includes a practical task, validation rules and a hidden solution.

Zone 1

Zone 1: React Native UI fundamentals. Clear the missions inside this zone to charge the path forward.

Level 1NEXT LEVEL+30 XP

First mobile screen

Mission 1: First mobile screen. Read the briefing, solve the practice quest, and bank the XP.

30 min
Enter level
Level 2LOCKED+32 XP

View and Text: composing blocks

Mission 2: View and Text: composing blocks. Read the briefing, solve the practice quest, and bank the XP.

35 minComplete previous level
Level 3LOCKED+38 XP

StyleSheet: course card

Mission 3: StyleSheet: course card. Read the briefing, solve the practice quest, and bank the XP.

40 minComplete previous level
Level 4LOCKED+42 XP

Flexbox: dashboard row

Mission 4: Flexbox: dashboard row. Read the briefing, solve the practice quest, and bank the XP.

45 minComplete previous level
Level 5LOCKED+40 XP

Image: student profile

Mission 5: Image: student profile. Read the briefing, solve the practice quest, and bank the XP.

40 minComplete previous level
Level 6LOCKED+45 XP

Pressable: interactive lesson card

Mission 6: Pressable: interactive lesson card. Read the briefing, solve the practice quest, and bank the XP.

45 minComplete previous level
Level 2

Components, props and state

This module moves through a focused part of React Native Start. Each lesson includes a practical task, validation rules and a hidden solution.

Zone 2

Zone 2: Components, props and state. Clear the missions inside this zone to charge the path forward.

Level 1LOCKED+55 XP

Props: CourseCard component

Mission 7: Props: CourseCard component. Read the briefing, solve the practice quest, and bank the XP.

55 minComplete previous level
Level 2LOCKED+50 XP

useState: lesson progress

Mission 8: useState: lesson progress. Read the briefing, solve the practice quest, and bank the XP.

50 minComplete previous level
Level 3LOCKED+45 XP

Conditional rendering: empty and success

Mission 9: Conditional rendering: empty and success. Read the briefing, solve the practice quest, and bank the XP.

45 minComplete previous level
Level 4LOCKED+55 XP

TextInput: note form

Mission 10: TextInput: note form. Read the briefing, solve the practice quest, and bank the XP.

55 minComplete previous level
Boss LevelBoss Project

Forms, lists and project

This module moves through a focused part of React Native Start. Each lesson includes a practical task, validation rules and a hidden solution.

Boss zone

Boss zone: Forms, lists and project. This is where the world turns into a portfolio proof. Todo App Boss Quest.

Level 1Boss LevelLOCKED+60 XP

FlatList: course list

Boss mission: FlatList: course list. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

1 hFinal QuestComplete previous level
Level 2Boss LevelLOCKED+55 XP

TodoItem component

Boss mission: TodoItem component. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

55 minFinal QuestComplete previous level
Level 3Boss LevelLOCKED+75 XP

Todo App: add and delete tasks

Boss mission: Todo App: add and delete tasks. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

1 h 15 minFinal QuestComplete previous level
Level 4Boss LevelLOCKED+80 XP

Todo App: empty state and completion

Boss mission: Todo App: empty state and completion. Combine the zone patterns into one final result. Build a confident first mobile screen and enter the course map.

1 h 10 minFinal QuestComplete previous level

Have a question or found an issue?

Your message will include this course context.

XP PRACTICE

Reinforce what you learned

Need a break from lessons? Play a short code game or test your speed in the Arena.

Open mini-gamesOpen Arena