React Native roadmap

JSX is a syntax extension for JavaScript that lets you write HTML-like markup right inside your code. It bridges the gap between how you structure your layout and how your logic works.

Imagine you are building a profile card. Instead of creating elements using complicated script methods, you simply write a tag like View that describes the container. Under the hood, this gets turned into regular JavaScript objects.

This matters because React Native uses JSX to define your mobile user interface. Knowing how it works is your very first step towards building real apps.

• JSX looks like HTML mixed with JavaScript
• It gets compiled into standard JavaScript function calls
• Every JSX expression must have a single root element
• You can embed JavaScript expressions using curly braces

Components are independent, reusable bits of code that represent a part of your user interface. Props are simply inputs you pass into these components to customise what they display.

Think of a component like a reusable button mould in a factory. You can pass different text and colour props into the same mould to create a blue submit button or a red cancel button.

This matters because breaking your app into small pieces keeps your code organised, easy to read, and simple to maintain as your project grows.

• Components are JavaScript functions returning JSX
• Props flow downwards from parent to child components
• Props are read-only and cannot be changed by the child
• Reusing components saves time and reduces repeated code

State represents data in your app that changes over time, such as whether a toggle is on or what a user typed into a search bar. Unlike props, state is managed from within the component.

Think of state like a light switch in a room. When you flip it, the room remembers its new lighting condition and updates everything accordingly.

This matters because state is what makes your mobile app interactive and alive, allowing the screen to update instantly when a user taps a button or loads new content.

• State holds mutable data inside a component
• Updating state triggers a re-render of the user interface
• Use the useState hook to add state to function components
• Never modify state directly without using its update function

Side effects are actions that happen outside the normal rendering flow, such as fetching data from a server, setting up a timer, or saving data to device storage.

Think of this like cooking a meal. While the pasta boils on the stove, you might chop vegetables on the side. The boiling is your main task, while the chopping is an extra effect.

This matters because mobile apps constantly need to talk to external services and load data after they appear on the screen, which requires careful timing.

• Side effects happen outside standard rendering
• The useEffect hook manages these operations
• You can control when effects run using dependency arrays
• Always clean up timers or subscriptions to prevent bugs

Views and Text are the fundamental building blocks of every React Native layout. Unlike web development, you cannot just drop a div or a span into your app.

Think of a View as a blank cardboard box used for grouping items, and Text as the dedicated container for any words you want to show on the screen.

This matters because every screen you build will rely on these two components to structure your content properly across different mobile operating systems.

• View acts as a container box for layout
• Text must wrap all strings visible on screen
• Views can be nested to create complex layouts
• Text components do not inherit styles automatically

When your app needs to display more items than can fit on a single phone screen, you need scrollable containers and specialised list components.

Think of a contacts list on your phone. Instead of loading every single friend at once and slowing down the device, it loads items smoothly as you scroll.

This matters because mobile devices have limited memory, and using efficient list components keeps your app scrolling smoothly without freezing.

• ScrollView handles simple scrollable content
• FlatList efficiently renders long lists of data
• Lists require unique keys for performance
• SectionLists help organise data into grouped headers

User inputs allow people interacting with your app to tap buttons, submit forms, and type text into fields.

Think of a login screen where you tap a username field, type your email, and press a submit button to sign in.

This matters because apps are rarely read-only; capturing user input is essential for creating functional tools and interactive experiences.

• Pressable or TouchableOpacity handles tap events
• TextInput captures keyboard text input from users
• State tracks what the user types in real time
• Keyboard behaviour requires careful styling consideration

Flexbox is a layout system that helps you align, space, and distribute items evenly across a screen regardless of its size.

Think of packing items into a suitcase. You can decide whether they pack tightly side by side or spread out evenly with space between them.

This matters because mobile screens come in many different dimensions, and Flexbox ensures your buttons and images stay neatly in place.

• React Native uses Flexbox by default
• Flex direction defaults to column instead of row
• Justify content aligns items along the main axis
• Align items aligns elements across the cross axis

The StyleSheet API is a built-in tool that lets you organise and apply CSS-like styles to your React Native components safely.

Think of it like keeping all your interior design choices in a neat style catalogue rather than scribbling notes on individual walls.

This matters because it keeps your code clean, validates your style rules, and optimizes performance before your app renders on the screen.

• StyleSheet.create groups your component styles
• Properties use camelCase instead of hyphens
• Styles do not cascade down like standard CSS
• It helps catch typos in style names early

Responsive design ensures your app looks great on everything from a compact budget phone to a large tablet.

Think of adjusting the straps on a backpack so it fits comfortably whether you are wearing a thin t-shirt or a thick winter coat.

This matters because users expect professional mobile apps to adapt seamlessly to their device without text overlapping or buttons disappearing.

• Use percentage widths and flexible units
• Avoid fixed pixel sizes for major containers
• Test your app on multiple screen sizes
• Utilise safe area views for notched devices

Stack navigation lets users move forward into new screens and slide back to previous ones, just like a deck of cards.

Think of browsing products on a shopping app. You tap a shoe, it slides over the screen, and you hit the back arrow to return to the list.

This matters because almost every multi-screen mobile application relies on this stack pattern for smooth user flows.

• New screens push onto the navigation stack
• The back button pops the top screen off
• Headers and titles are built into the navigator
• You can pass parameters between screens easily

Tab navigation places a persistent bar at the bottom of the screen for instant access to your app's main sections.

Think of the tabs at the bottom of a music streaming app that let you switch quickly between search, library, and settings.

This matters because it gives users shortcuts to primary features without forcing them to tap the back button repeatedly.

• Bottom tabs offer quick top-level navigation
• Each tab maintains its own navigation state
• You can add icons and badges to tabs
• Tabs can combine with stack navigators

Fetching web data allows your mobile app to connect with internet servers, load live information, and send user updates.

Think of a weather app asking a meteorological server for today's forecast and displaying the temperature on your phone.

This matters because most modern apps rely on cloud databases and external APIs to show up-to-date content.

• Use async and await with fetch for network requests
• Handle loading states while waiting for data
• Always include error handling for failed connections
• Parse JSON responses into usable app data

The Expo ecosystem provides a set of tools, libraries, and development servers that speed up building and testing React Native apps.

Think of it like a fully equipped workshop that gives you all the tools you need without having to build your own workbench first.

This matters because it removes the headache of setting up complex native compilation tools, letting you focus entirely on writing app code.

• Expo Go app lets you preview on real phones
• Managed workflow handles native code configurations
• Built-in libraries simplify common device tasks
• Over-the-air updates let you push quick fixes

Device hardware modules let your app interact with physical phone features like the camera, GPS location, and compass.

Think of a fitness tracker app using your phone's GPS sensor to map your daily running route.

This matters because leveraging native hardware is what separates mobile apps from standard mobile websites, offering a much richer experience.

• Expo modules provide simple JavaScript device APIs
• Always request user permissions before accessing hardware
• Handle cases where users deny permission requests
• Test hardware features on physical mobile devices

App publishing is the final process of preparing your application files and submitting them to the Apple App Store and Google Play.

Think of publishing a book. You finish writing, design the cover, check formatting guidelines, and send it to bookstores for readers to buy.

This matters because it is how you get your finished application into the hands of real users around the world.

• Configure app icons and splash screens
• Build standalone installation files for stores
• Follow strict store review guidelines and policies
• Provide privacy policies and store descriptions