The library requires React Native's New Architecture (Fabric), so you'll need version 0.76 or newer.

In this tutorial, you'll learn:

• How to use CSS transitions for state-driven animations

• When to use worklets for gesture and scroll interactions

• How to migrate from Reanimated 3 to 4

• Practical patterns for collapsing headers, bottom sheets, and carousels

• Performance optimization techniques

Prerequisites

You should have:

• React Native 0.76+ with New Architecture enabled

• Basic React hooks knowledge (useState, useEffect)

• Node.js and npm or yarn are installed

Table of Contents

• Installation and Setup

• Understanding the Two Approaches (CSS Animations and Worklets)

• How to Migrate from Reanimated Version 3 to Version 4

• CSS Animations Tutorial

• Worklets Tutorial

• Real-World Patterns

• Performance Optimizations

• Debugging Tips

• Conclusion

Installation and Setup

To get started, you'll need to install the required packages:

# For Expo
npx expo install react-native-reanimated react-native-worklets

# For React Native CLI  
npm install react-native-reanimated react-native-worklets
cd ios && pod install && cd ..

Update babel.config.js (the plugin must be last):

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-worklets/plugin', // Must be last
  ],
};

Then clear the cache and rebuild:

npm start -- --reset-cache
npx react-native run-ios

Understanding the Two Approaches

React Native Reanimated is an animation library that runs animations on the native thread instead of the JavaScript thread. This means your animations stay smooth even when your JavaScript code is busy processing data or handling user interactions.

Unlike React Native's built-in Animated API, Reanimated executes animation logic directly on the UI thread. This eliminates the performance bottleneck caused by communication between JavaScript and native code, which enables Reanimated to maintain 60 FPS even during complex operations.

Reanimated 4 offers two animation systems, each designed for different use cases.

CSS Animations

CSS animations work declaratively, meaning you describe what you want to happen rather than how to make it happen. You define which properties should animate (like width, color, or opacity), specify the timing and easing, then simply change the values through React state updates. Reanimated automatically handles the animation between the old and new values.

This approach excels at predictable, state-driven animations where you know both the starting and ending states. It's ideal for:

• Showing and hiding UI elements (modals, tooltips, notifications)

• Expanding and collapsing content (accordions, dropdown menus)

• Visual feedback for state changes (button hover effects, selection highlights)

• Loading indicators and progress animations

• Color and opacity transitions

Worklets

Worklets take a different approach by giving you imperative, frame-by-frame control over animations. They run on the UI thread and use "shared values" – special variables that can be accessed and modified from both JavaScript and native code without any communication overhead.

Worklets are essential for interactive animations that need to respond in real-time to user input or continuous data streams. They're best for:

• Gesture-driven interactions (drag-and-drop, swipe-to-dismiss, pinch-to-zoom)

• Scroll-linked effects (parallax images, collapsing headers, sticky elements)

• Physics-based animations (spring effects, momentum scrolling)

• Sensor-based animations (responding to device orientation)

• Any animation requiring dynamic, real-time control

Now that you understand the two approaches Reanimated offers, let's look at how to migrate from version 3 if you're already using the library.

How to Migrate from Reanimated Version 3 to Version 4

If you're currently using Reanimated 3, you'll be happy to know that version 4 maintains backward compatibility. Your existing animations using worklets, shared values, and useAnimatedStyle will continue to work without modification.

But version 4 introduces some architectural changes and removes deprecated APIs, so you'll need to make a few updates to your project configuration and code. Let's walk through the migration process step by step.

What Changed in Version 4

The most significant change is that worklets have been extracted into a separate package called react-native-worklets-core. This modular approach allows other libraries beyond Reanimated to leverage worklet functionality.

Because of this separation, you'll need to update your Babel configuration. Change the plugin from react-native-reanimated/plugin to react-native-worklets/plugin.

Version 4 also exclusively supports React Native's New Architecture (Fabric). The old Paper renderer is no longer compatible. If your project hasn't migrated to the New Architecture yet, you'll need to either upgrade to React Native 0.76+ (which has New Architecture enabled by default) or stay on Reanimated 3.x until you're ready to make that transition.

Removed APIs

Several APIs that were deprecated in version 3 have been removed in version 4. Here's what you need to replace:

• useAnimatedGestureHandler → Use the Gesture API from react-native-gesture-handler 2.x instead

• useWorkletCallback → Use useCallback with the 'worklet' directive

• combineTransition → Use EntryExitTransition.entering().exiting()

The useScrollViewOffset hook has been renamed to useScrollOffset. The old name still works but is deprecated, so update your code to use the new name.

Spring Configuration Change

The spring animation configuration has changed to feel more natural. The duration parameter now represents "perceptual duration" rather than exact milliseconds. The actual animation runs approximately 1.5 times longer than the specified duration, creating springs that feel more organic and less mechanical.

// Version 3
withSpring(100, { duration: 300 }) // Runs for exactly 300ms

// Version 4  
withSpring(100, { duration: 200 }) // Runs for approximately 300ms

If you need to maintain the exact timing from version 3, divide your duration values by 1.5.

Step-by-Step Migration Process

Here's how to migrate your project from Reanimated 3 to version 4:

Step 1: Verify your project is using React Native 0.76 or newer with New Architecture enabled. Check your iOS Podfile for ENV['RCT_NEW_ARCH_ENABLED'] = '1' and your Android gradle.properties for newArchEnabled=true.

Step 2: Install the new versions of Reanimated and the worklets package:

npm install react-native-reanimated@^4.1.0 react-native-worklets@^0.5.0

Step 3: Update your babel.config.js to use the new worklets plugin:

module.exports = {
  plugins: [
    'react-native-worklets/plugin', // Changed from react-native-reanimated/plugin
  ],
};

Step 4: Search your codebase for the removed APIs and replace them:

• Replace useAnimatedGestureHandler with the Gesture API

• Replace useWorkletCallback with useCallback and add 'worklet' directive

• Replace combineTransition with EntryExitTransition.entering().exiting()

• Rename useScrollViewOffset to useScrollOffset

Step 5: Rebuild your native apps:

cd ios && pod install && cd ..
npx react-native run-ios
# or for Android
npx react-native run-android

After completing these steps, your app should be running on Reanimated 4 with all your existing animations working as before. You're now ready to start using the new CSS animation features alongside your existing worklet-based animations. In the next section, you'll learn how to build animations using the CSS syntax.

CSS Animations Tutorial

CSS animations provide a clean, declarative way to handle transitions that are triggered by state changes. Instead of manually managing animation values, you simply declare which properties should animate and how, then update your component state – Reanimated handles the rest.

This approach is particularly powerful for animations where you know the start and end states ahead of time. It's perfect for UI elements that toggle between different visual states, like modals appearing and disappearing, buttons providing feedback on press, or content expanding and collapsing.

Basic Transitions

A transition animates the change between two property values. When you specify a property that should transition, Reanimated automatically interpolates between the old and new values over the specified duration.

Let's look at an expandable card that grows when tapped:

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated from 'react-native-reanimated';

function ExpandableCard() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Pressable onPress={() => setExpanded(!expanded)}>
      <Animated.View style={{
        width: expanded ? 300 : 200,
        height: expanded ? 200 : 100,
        backgroundColor: expanded ? '#4ade80' : '#86efac',
        transitionProperty: ['width', 'height', 'backgroundColor'],
        transitionDuration: 300,
        transitionTimingFunction: 'ease-in-out',
      }}>
        <Text>Tap to toggle</Text>
      </Animated.View>
    </Pressable>
  );
}

Here's what's happening: The card's width, height, and background color are controlled by the expanded state. The transitionProperty array tells Reanimated which properties to animate. When expanded changes, Reanimated smoothly animates from the current values to the new values over 300 milliseconds, using an ease-in-out timing function that starts slow, speeds up, then slows down again.

Keyframe Animations

While transitions handle changes between two states, keyframe animations let you define multi-step sequences with precise control over each stage. You create an object where each key represents a percentage of the animation timeline, and the value defines what properties should look like at that point.

Here's a pulsing badge that scales up and fades slightly, then returns to normal:

const pulseAnimation = {
  '0%': { scale: 1, opacity: 1 },
  '50%': { scale: 1.05, opacity: 0.8 },
  '100%': { scale: 1, opacity: 1 },
};

function PulsingBadge() {
  return (
    <Animated.View style={{
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: '#ef4444',
      animationName: pulseAnimation,
      animationDuration: 2000,
      animationIterationCount: 'infinite',
    }} />
  );
}

The animation starts at 0% (normal size and opacity), grows and fades at the 50% mark, then returns to the original state at 100%. By setting animationIterationCount to 'infinite', the animation loops continuously. This creates the pulsing effect you often see on notification badges or live indicators.

Built-in Animations

Reanimated includes a collection of pre-built animations for common entrance and exit effects. These save you from writing animation configurations for standard patterns like fading, sliding, and zooming.

Here's a modal that fades in when shown and fades out when hidden:

import { FadeIn, FadeOut } from 'react-native-reanimated';

function Modal({ visible, children }) {
  if (!visible) return null;

  return (
    <Animated.View 
      entering={FadeIn.duration(300)}
      exiting={FadeOut.duration(200)}
    >
      {children}
    </Animated.View>
  );
}

The entering prop automatically applies the fade-in animation when the component mounts, and exiting applies the fade-out before unmounting. Other commonly used built-in animations include SlideInRight, SlideOutLeft (for drawer-style entrances), and ZoomIn, ZoomOut (for attention-grabbing pop-ins).

Now that you understand CSS animations for state-driven transitions, let's explore worklets for creating interactive animations that respond to user input in real-time.

Worklets Tutorial

While CSS animations excel at predefined state transitions, many animations need to respond dynamically to user input. This is where worklets come in. Worklets give you frame-by-frame control over animations, allowing them to follow gestures, scroll position, or any other real-time input source.

Interactive animations differ from CSS animations in that they don't have predefined start and end states. Instead, they continuously update based on user input. For example, a draggable element needs to follow your finger precisely as you move it – there's no way to know ahead of time where you'll drag it. This requires imperative control, where you directly manipulate animation values in response to events.

Basic Worklet Animation

Shared values are the foundation of worklet-based animations. They're special variables that exist simultaneously in both the JavaScript and UI threads, allowing you to update them from JavaScript while the UI thread reads them to update the display – all without any communication overhead.

Here's a button that scales down when pressed and bounces back when released:

import Animated, { 
  useSharedValue, 
  useAnimatedStyle, 
  withSpring 
} from 'react-native-reanimated';
import { Pressable } from 'react-native';

function BouncyButton() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable
      onPressIn={() => { scale.value = withSpring(0.9); }}
      onPressOut={() => { scale.value = withSpring(1); }}
    >
      <Animated.View style={[styles.button, animatedStyle]}>
        <Text>Press Me</Text>
      </Animated.View>
    </Pressable>
  );
}

The useSharedValue(1) creates a shared value initialized to 1 (normal scale). The useAnimatedStyle hook creates a style object that depends on this shared value and runs on the UI thread. When you press the button, scale.value = withSpring(0.9) updates the shared value, and withSpring creates a spring animation to the new value. The useAnimatedStyle hook automatically re-runs, updating the transform with the new scale value.

Gesture Animations

Gestures require even tighter integration between user input and animation. The react-native-gesture-handler library provides high-performance gesture recognition that works seamlessly with Reanimated.

First, install the gesture handler:

npm install react-native-gesture-handler
cd ios && pod install && cd ..

Next, you need to wrap your app with GestureHandlerRootView. This component sets up the gesture handling system at the root of your application. Without it, gestures won't work. Think of it as activating the gesture system for your entire app:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content goes here */}
    </GestureHandlerRootView>
  );
}

Now you can create gesture-driven animations. Here's a box you can drag around the screen that springs back to center when released:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

function DraggableBox() {
  const offsetX = useSharedValue(0);
  const offsetY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((event) => {
      offsetX.value += event.changeX;
      offsetY.value += event.changeY;
    })
    .onEnd(() => {
      offsetX.value = withSpring(0);
      offsetY.value = withSpring(0);
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: offsetX.value },
      { translateY: offsetY.value },
    ],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}

The Gesture.Pan() creates a pan gesture recognizer. The .onChange() callback fires continuously while you're dragging – event.changeX and event.changeY tell you how much the finger moved since the last frame. By adding these values to the offsets, the box follows your finger. When you lift your finger, .onEnd() fires and springs the box back to the center (0, 0).

Scroll-Linked Animations

Another common use case for worklets is creating effects that respond to scroll position, like headers that shrink as you scroll down or parallax backgrounds.

Here's a header that collapses as you scroll:

function ParallaxHeader() {
  const scrollY = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => {
    const height = interpolate(
      scrollY.value,
      [0, 150],
      [200, 60],
      'clamp'
    );

    return { height };
  });

  return (
    <>
      <Animated.View style={[styles.header, headerStyle]}>
        <Text>Header</Text>
      </Animated.View>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        {/* Content */}
      </Animated.ScrollView>
    </>
  );
}

The useAnimatedScrollHandler creates a scroll event handler that runs on the UI thread. Every time you scroll, it updates scrollY with the current scroll position. The interpolate function maps the scroll position to the header height – when scrollY is 0 (top of the scroll), height is 200. When scrollY reaches 150, height is 60. The 'clamp' option prevents the height from going outside this range.

With these fundamentals of CSS animations and worklets covered, let's look at how to apply them to common real-world scenarios.

Real-World Patterns

Now that you understand both CSS animations and worklets, let's combine them to build three patterns you'll frequently encounter in production apps. These examples demonstrate when to use each animation approach and how to structure your code for maintainability.

In this section, you'll learn how to build a collapsing header that shrinks as users scroll (using worklets for scroll tracking), a bottom sheet that responds to drag gestures (using worklets for gesture control), and a swipe-to-delete interaction for list items (combining worklets for gesture detection with animations for the deletion effect).

Collapsing Header

A collapsing header is a navigation bar that starts tall and shrinks as you scroll down. This pattern is popular because it maximizes content space while keeping navigation accessible. You'll use worklets here because the animation needs to follow the scroll position in real-time.

function CollapsibleHeader() {
  const scrollY = useSharedValue(0);
  const HEADER_MAX = 200;
  const HEADER_MIN = 60;

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const headerStyle = useAnimatedStyle(() => ({
    height: interpolate(
      scrollY.value,
      [0, HEADER_MAX - HEADER_MIN],
      [HEADER_MAX, HEADER_MIN],
      'clamp'
    ),
  }));

  return (
    <View style={{ flex: 1 }}>
      <Animated.View style={[styles.header, headerStyle]}>
        <Text>My App</Text>
      </Animated.View>
      <Animated.ScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      >
        <View style={{ height: 1000, padding: 16 }}>
          <Text>Scroll to see header collapse</Text>
        </View>
      </Animated.ScrollView>
    </View>
  );
}

This pattern tracks scroll position in scrollY and uses interpolate to map it to header height. When you're at the top (scrollY = 0), the header is 200 pixels tall. As you scroll down 140 pixels, the header shrinks to 60 pixels. The animation happens on every frame as you scroll, which is why worklets are necessary – CSS animations couldn't track scroll position this smoothly.

Bottom Sheet

A bottom sheet is a panel that slides up from the bottom of the screen, commonly used for action menus, filters, or additional content. Users can drag it to different heights or dismiss it with a swipe down. This requires worklets because it needs frame-by-frame gesture tracking.

function BottomSheet({ children }) {
  const translateY = useSharedValue(300);
  const context = useSharedValue({ y: 0 });

  const pan = Gesture.Pan()
    .onStart(() => {
      context.value = { y: translateY.value };
    })
    .onChange((event) => {
      translateY.value = Math.max(
        event.translationY + context.value.y,
        -300
      );
    })
    .onEnd((event) => {
      if (event.velocityY > 500) {
        translateY.value = withSpring(300); // Dismiss
      } else if (translateY.value > -100) {
        translateY.value = withSpring(-50); // Collapsed
      } else {
        translateY.value = withSpring(-300); // Expanded
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.bottomSheet, animatedStyle]}>
        <View style={styles.handle} />
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

The bottom sheet starts off-screen at translateY = 300. When you start dragging, .onStart() saves the starting position in context. As you drag, .onChange() updates the position, but Math.max() prevents it from going below -300 (fully expanded). When you release, .onEnd() checks the velocity – if you swiped down quickly (velocity > 500), it dismisses. Otherwise, it snaps to either the collapsed (-50) or expanded (-300) position based on where you released it.

Swipe to Delete

Swipe-to-delete lets users remove items from a list by swiping left. It's a common pattern in email apps and to-do lists. This uses worklets for gesture tracking and timing functions for the deletion animation.

function SwipeToDelete({ children, onDelete }) {
  const translateX = useSharedValue(0);
  const itemHeight = useSharedValue(60);

  const pan = Gesture.Pan()
    .activeOffsetX([-10, 10])
    .onChange((event) => {
      if (event.translationX < 0) {
        translateX.value = event.translationX;
      }
    })
    .onEnd(() => {
      if (translateX.value < -100) {
        translateX.value = withTiming(-500, { duration: 200 });
        itemHeight.value = withTiming(0, { duration: 200 }, () => {
          runOnJS(onDelete)();
        });
      } else {
        translateX.value = withSpring(0);
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
    height: itemHeight.value,
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.item, animatedStyle]}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
}

The .activeOffsetX([-10, 10]) setting means the gesture only activates after you've moved 10 pixels horizontally, preventing accidental triggers during vertical scrolling. The if (event.translationX < 0) check ensures you can only swipe left, not right. If you swipe past -100 pixels and release, it triggers the deletion: the item slides off-screen (-500), the height collapses to 0, and runOnJS calls your delete function from the UI thread back to JavaScript.

These patterns demonstrate the power of combining Reanimated's animation approaches with gesture handling. Now, let's look at how to keep these animations performing smoothly.

Performance Optimizations

Even though Reanimated runs on the UI thread, poorly structured animations can still drop frames. Here are four key optimizations that will keep your animations consistently smooth at 60 FPS.

Memoize Animations

Every time your component re-renders, any animations you create inside the render function are recreated. This wastes memory and processing time.

Don't do this – creating a new animation object on every render:

{items.map(item => (
  <Animated.View entering={FadeIn.duration(300)} key={item.id} />
))}

Instead, create the animation once outside the component or memoize it:

const fadeIn = FadeIn.duration(300);
{items.map(item => (
  <Animated.View entering={fadeIn} key={item.id} />
))}

By storing the animation in a constant, you create it once and reuse the same object for all items. This reduces memory allocation and garbage collection, keeping your animations smooth even with long lists.

Use useDerivedValue

If you're doing expensive calculations inside useAnimatedStyle, those calculations run every frame, even if the dependencies haven't changed.

Don't do this – recalculating every frame:

const animatedStyle = useAnimatedStyle(() => ({
  width: Math.min(Math.max(offset.value * 2, 100), 500),
}));

Instead, use useDerivedValue to compute the value only when dependencies change:

const width = useDerivedValue(() => 
  Math.min(Math.max(offset.value * 2, 100), 500)
);

const animatedStyle = useAnimatedStyle(() => ({
  width: width.value,
}));

Now the complex calculation only runs when offset.value changes, not on every frame. The useAnimatedStyle just reads the pre-computed width, which is much faster.

Batch Updates

When you update multiple shared values, each update can trigger a separate re-render. This creates unnecessary work for the UI thread.

Don't do this – triggering multiple re-renders:

scale.value = withSpring(1.2);
opacity.value = withSpring(0.8);

Instead, batch the updates using runOnUI:

runOnUI(() => {
  'worklet';
  scale.value = withSpring(1.2);
  opacity.value = withSpring(0.8);
})();

The runOnUI function ensures both updates happen in the same frame, so the UI only re-renders once. This is especially important when updating many values at once, like in complex gestures or choreographed animations.

Prefer Transform Over Layout

Animating layout properties like width, height, or margins forces React Native to recalculate the position of every element that depends on the changing element. This is expensive.

Don't do this – expensive layout recalculation:

width: withSpring(newWidth)

Instead, use transform properties, which only affect the visual appearance without triggering layout:

transform: [{ scaleX: withSpring(scale) }]

Transform operations are hardware-accelerated and don't affect layout, making them dramatically faster. Whenever possible, use translateX/Y instead of changing position, scale instead of changing size, and rotate instead of changing orientation.

These optimizations will keep your animations buttery smooth. Now let's look at how to debug issues when they arise.

Debugging Tips

Even with proper setup, you may encounter issues with animations. Here are the most common problems and their solutions, written as complete troubleshooting steps.

Animations Not Working

If your animations aren't running at all, the most common cause is a missing or incorrectly configured Babel plugin. Open your babel.config.js file and verify that react-native-worklets/plugin is present in the plugins array and is the last plugin in the list. The order matters because the worklets plugin needs to process your code after all other transformations.

After confirming the plugin is correctly configured, clear your Metro bundler cache by running npm start -- --reset-cache, then rebuild your app completely. Simply reloading JavaScript won't work because Babel transformations happen during the build process.

App Crashes on Startup or Reload

If your app crashes immediately after installing Reanimated or when you reload, the native modules likely aren't properly linked. With React Native 0.76+, this usually means the pods weren't installed or the native build is out of sync.

For iOS, run cd ios && pod install && cd .. then do a clean build with npx react-native run-ios. For Android, clean the build with cd android && ./gradlew clean && cd .. then rebuild with npx react-native run-android.

If you're getting build errors about missing headers or modules, make sure you've added both react-native-reanimated and react-native-worklets to your package.json dependencies.

"TurboModuleRegistry Not Found"

If you see an error message saying "TurboModuleRegistry.get('NativeReanimated'): 'NativeReanimated' could not be found", it means the native code hasn't been properly linked to your JavaScript code.

First, verify you're using React Native 0.76 or newer, as Reanimated 4 requires the New Architecture. Check your ios/Podfile for ENV['RCT_NEW_ARCH_ENABLED'] = '1' and android/gradle.properties for newArchEnabled=true.

Then rebuild completely: cd ios && pod install && cd .. && npx react-native run-ios.

Logging and Inspecting Shared Values

If you try to debug worklets using console.log(), you'll notice nothing appears in your console. This is because worklets run on the UI thread, which doesn't have direct access to the JavaScript console.

To log values from worklets, use the useDerivedValue hook:

const offset = useSharedValue(0);

useDerivedValue(() => {
  console.log('Offset:', offset.value);
  return offset.value;
});

For more advanced debugging, React Native's built-in debugger (accessed through dev menu → "Open Debugger") now supports debugging both threads. You can set breakpoints in worklets and inspect shared values in real-time.

Monitor Performance

To see if your animations are actually running at 60 FPS, enable the Performance Monitor built into React Native. Shake your device (or press Cmd+D in the iOS simulator, Cmd+M in Android emulator) to open the dev menu, then select "Show Perf Monitor".

The monitor displays two critical numbers: JS thread FPS and UI thread FPS. Your animations run on the UI thread, so watch that number. If it stays at 60 FPS, your animations are smooth. If it drops below 60, your animations are skipping frames and will appear janky. The JS thread FPS shows whether your React code is keeping up – if this drops, it indicates issues with your component renders, not your animations.

For more detailed debugging information and advanced troubleshooting, check the official debugging guide here.

Conclusion

Reanimated 4 gives you two powerful approaches to animation: CSS animations for simple state changes and worklets for complex, interactive animations that need real-time control.

Start with CSS transitions when building your next animation feature. They're simpler to write, easier to maintain, and perfect for the majority of UI animations. Reach for worklets when you need gesture control, scroll effects, or any animation that requires frame-by-frame updates.

The official documentation provides complete API references, detailed guides, and interactive examples. The GitHub repository includes production-ready sample code you can study and adapt.

Building smooth animations isn't just about technical capability – it's about creating experiences that feel responsive, intuitive, and delightful to use. Reanimated 4 makes achieving that standard straightforward, whether you're animating a simple button press or building a complex screen transition with multiple coordinated elements.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about React Native. This beginner-friendly course, created by Dave Gray, is packed with over four hours of clear, hands-on instruction. Whether you're completely new to app development or have some experience with React, this tutorial will guide you through the essentials of React Native, helping you build functional, visually appealing, and dynamic mobile apps.

What You’ll Learn

The course is structured into eight chapters, each focusing on a critical aspect of React Native development. Here’s a breakdown of what you can expect:

1. Intro
   A quick introduction to React Native, what it is, and why it’s such a popular choice for mobile development. You’ll set up your environment and get ready to code.

2. Chapter 1: Start Here
   This chapter introduces the basics of React Native, including setting up your development environment and understanding the fundamental building blocks of a React Native app.

3. Chapter 2: Build an App
   Dive into building your first simple app. You’ll learn how to create components, style them, and structure your app for better readability and functionality.

4. Chapter 3: Navigation
   Learn how to implement navigation between different screens using React Navigation. This is essential for creating multi-screen apps that feel seamless to users.

5. Chapter 4: List Views
   Explore how to display and manage lists in React Native, an essential skill for creating dynamic and interactive user interfaces.

6. Chapter 5: CRUD App
   Build a simple CRUD (Create, Read, Update, Delete) application. This chapter introduces you to state management and handling user input, two critical concepts in app development.

7. Chapter 6: Data Storage
   Learn how to store and retrieve data locally, which is crucial for offline functionality and saving user preferences.

8. Chapter 7: Dynamic Routing
   Expand your knowledge of routing by implementing dynamic routes that adapt to the user’s input or app state.

9. Chapter 8: EAS Development Builds
   Get introduced to Expo Application Services (EAS), a powerful tool for building and deploying your React Native apps.

Why Learn React Native?

React Native is a popular framework because it allows you to use JavaScript—a widely used programming language—to build mobile apps. This means you can transition from web development to mobile development without needing to learn a completely new language. Plus, React Native’s community and ecosystem are rich with resources, making it easier for beginners to find support and tools.

Start Building Today

This course provides everything you need to get started with React Native, from understanding the basics to deploying your app. By the end, you’ll have built multiple projects, gaining the confidence and skills to tackle your own mobile app ideas.

Ready to start your mobile app development journey? Check out the full course on the freeCodeCamp.org YouTube channel (4-hour watch).

We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about developing native mobile apps using React Native, Supabase, Stripe, and Next.js. This course is designed to take you through the entire process of building a complete e-commerce platform, making it an ideal project for anyone looking to strengthen their full-stack development skills. Whether you're new to mobile development or looking to expand your knowledge, this course covers everything step by step. Alaribe Bright developed this course.

What You’ll Learn

1. React Native & Expo: You'll start by creating a React Native app using Expo, a powerful framework that simplifies mobile app development. You'll dive into Expo Router for managing navigation with file-based routing, build dynamic pages for product categories, and manage cart functionality using Zustand, a lightweight state management library.

2. Supabase: This section introduces Supabase, an open-source alternative to Firebase. You'll learn to handle authentication, database management, and real-time updates. You'll implement secure user authentication, explore SQL functions, triggers, and set up row-level security for a secure back-end.

3. Next.js for Admin Panel: The admin panel is built using Next.js, known for its server-side rendering and API capabilities. You'll learn to manage categories and products, handle role-based access, and protect routes. The panel will allow you to perform CRUD operations (Create, Read, Update, Delete) efficiently on your platform’s data.

4. Stripe for Payments: This course will also guide you through integrating Stripe to handle payments securely. You’ll learn how to create Stripe customers, set up checkout sessions, and manage payments, all while keeping customer data safe.

5. Push Notifications: To enhance the user experience, you'll add real-time push notifications using EAS (Expo Application Services), ensuring your app can notify users of updates like order status changes in real time.

6. Deployment: Finally, you'll deploy your project to Vercel, ensuring your admin panel and the entire application are live and accessible. You'll also troubleshoot deployment fixes and ensure your app runs smoothly in production.

Conclusion

By the end of this course, you'll have a fully functioning e-commerce mobile app with an admin panel, payment integration, real-time updates, and secure authentication. This project is an excellent addition to your portfolio, demonstrating your ability to handle complex, full-stack development.

Watch the full course on the freeCodeCamp.org YouTube channel (12-hour watch).

You'll learn how to create an app that allows users to search and explore books using the Google Books API, manage personal bookshelves, and even generate AI-powered summaries. By the end of this course, you'll have a comprehensive understanding of building advanced MacOS applications.

Course Overview

This course, created by Brijen Makwana, provides a step-by-step guide to building a sophisticated MacOS app using React Native. You'll gain hands-on experience with essential tools and techniques, from setting up your development environment to implementing advanced features like AI-powered book summaries and state management.

Here are the key things you will learn:

• Setup and Initialization: Begin by setting up React Native on your Mac and initializing your project. You'll learn how to clean up the project structure to ensure a smooth development process.

• Building Components: Develop key components such as the SearchBar and BookItem, which are crucial for user interaction and displaying book information.

• Integrating Google Books API: Discover how to use Postman to test the Google Books API and integrate it into your project, enabling users to search and explore a vast library of books.

• State Management with Tanstack Query and Zustand: Learn how to manage application state efficiently using Tanstack Query and Zustand. You'll create custom hooks like useSearch and useBook to streamline data fetching and state updates.

• Navigation and Routing: Implement React Navigation to ensure smooth transitions between different screens in your app. You'll add routes for the Book Screen and Bookshelves Screen, enhancing the user experience.

• AI-Powered Features: Explore the integration of AI by setting up Google Generative AI and creating a custom hook, useAI, to generate book summaries. This feature adds a modern touch to your app, providing users with concise and insightful book overviews.

• Local Storage and Book Management: Implement local storage support to save user data and manage bookshelves effectively. You'll learn how to update and remove books using Zustand, ensuring a seamless user experience.

The course is structured into detailed sections, each focusing on a specific aspect of app development:

• Book Management MacOS App (React Native)

• Setup React Native on your Mac

• Initialize the Project

• Cleanup the Project

• SearchBar Component

• Intro to Google Books API

• Use Postman to test the API

• Integrate Google Books API in the Project

• Setup Tanstack Query

• useSearch Custom Hook

• BookItem Component

• Render Books on Home Screen

• Add support for Icons in the Project

• Rating in BookItem

• Setup React Navigation

• Add new Route for Book Screen

• useBook Custom Hook

• Implement Book Screen

• Add types to React Navigation

• SelectBookShelf Component

• Add new Route for Bookshelves Screen

• SegmentedButtons Component

• Intro to Zustand

• Setup Zustand

• Zustand store for Bookshelves

• BookShelfItem Component

• Render Books on Bookshelves Screen

• Implement update book in Zustand

• Implement remove book in Zustand

• Implement Local Storage Support

• AI Book Summary

• Setup Google Generative AI

• useAI Custom Hook

• Outro

Join Us Today

Head over to the freeCodeCamp.org YouTube channel to watch the course (3-hour watch). Whether you're looking to enhance your current projects or embark on new ones, this course will help you master MacOS application development.

This comprehensive tutorial will guide you through every step of the development process, from setting up your local development environment to implementing various screens and functionalities within the app. You'll also learn how to incorporate TypeScript for type safety, use NativeWind for styling, and manage your app's navigation and state effectively.

Here's a glimpse of what you'll learn in this course:

Introduction

You will start by understanding the fundamentals of creating a meditation app using Expo and React Native, providing a solid foundation for the rest of the project.

Setup Local Development Environment

Learn how to set up your local development environment, including installing necessary tools and dependencies to get started with Expo and React Native.

Add Static Assets and Define Constant Files

Understand how to add static assets such as images and icons to your project and define constant files for better organization and maintainability.

Setup NativeWind

Explore how to set up NativeWind for styling your application components in a consistent and efficient manner.

Implement Initial Screen

Implement the initial screen of your meditation app, laying the groundwork for a smooth user experience.

Splash Screen Image

Create an engaging splash screen image to enhance the visual appeal of your app during the startup phase.

The useRouter Hook

Learn to use the useRouter hook for handling navigation within your app, ensuring seamless transitions between different screens.

Add AppGradient Component and Tabs Directory

Enhance your app's UI by adding a gradient component and organizing your tabs directory for better structure and navigation.

The Meditation Index Screen

Build the Meditation Index Screen, where users can browse through available meditation sessions.

Use FlatList on the Meditation Index Screen

Implement FlatList to efficiently display a list of meditation sessions, ensuring a smooth scrolling experience.

The Affirmations Index Screen

Create an Affirmations Index Screen, allowing users to explore various positive affirmations.

The Affirmations Detail Screen

Develop the Affirmations Detail Screen to provide more information and details about each affirmation.

The Meditation Detail Screen

Implement the Meditation Detail Screen, giving users access to specific meditation session details and options.

Meditation Audio/Song

Incorporate meditation audio or songs into your app, enhancing the overall meditation experience for users.

React Context and Modal Screen

Learn how to use React Context for state management and create a modal screen for additional interactive elements within your app.

By the end of this course, you will have built a fully functional meditation app while gaining valuable experience with Expo, React Native, TypeScript, and other essential tools. Whether you're a beginner or an experienced developer, this course offers something for everyone, helping you grow your skills and create impactful mobile applications.

Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).

When building mobile applications, one common requirement is the ability to save data locally on the device. This is when local storage comes into play. Async Storage, provided by React Native Expo, is a simple but powerful solution for saving data locally within your React Native Expo apps.

In this tutorial, we'll discuss the fundamentals of local storage, introduce Async Storage, and demonstrate how to properly integrate it into React Native Expo projects.

Table of Contents

• Prerequisites
• What is Local Storage?
• What is Async Storage?
• How to Get Started with Async Storage
• Understanding Async Storage Methods
• Advanced Usage and Best Practices
• Conclusion

Prerequisites

• Familiarity with React Native and JavaScript.
• Node.js and npm (or yarn) installed.

What is Local Storage?

Local storage is an essential component of mobile app development, allowing developers to store data on the user's device. Unlike other storage choices such as databases, Local Storage uses a straightforward key-value pair storage technique.

Developers can use it to save small quantities of data that remain stored even when they close the program or restart the device. This makes it excellent for storing user preferences, authentication tokens, and other important information.

Local storage is essential for boosting app speed because it eliminates the need to retrieve data from faraway servers regularly.

What is Async Storage?

Async Storage is a key-value storage system supplied by React Native Expo that allows you to manage local storage in mobile apps. It provides a simple key-value storage system that enables developers to store and retrieve data asynchronously.

Unlike synchronous storage methods, Async Storage allows you to save and retrieve data without interrupting the main thread, resulting in a more seamless user experience.

How to Get Started with Async Storage

To use Async Storage in your React Native Expo project, ensure that Expo is installed. If you haven't already set up a React Native Expo project, you can do so by installing Expo CLI:

$ npm install -g expo-cli

Create a new Expo project:

$ expo init MyProject
$ cd MyProject

To add Async Storage to your project, run the following command:

$ expo install @react-native-async-storage/async-storage

The @react-native-async-storage/async-storage is a community-maintained version of AsyncStorage. Once installed, you can then setup a file to handle the AsyncStorage methods such as setItem(), updateItem(), deleteItem(), and others. This file would be imported whenever you want to make a call to the local storage.

In this example, we'll create a folder named utils in the root path of our project and then create the AsyncStorage.js file to handle these methods:

Async Storage File Structure

Within the AsyncStorage.js file, you can define the AsyncStorage methods like this:

// utils/AsyncStorage.js

import AsyncStorage from '@react-native-async-storage/async-storage';

export const setItem = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error setting item:', error);
  }
};

export const getItem = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value != null ? JSON.parse(value) : null;
  } catch (error) {
    console.error('Error getting item:', error);
    return null;
  }
};

export const removeItem = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.error('Error removing item:', error);
  }
};

export const mergeItem = async (key, value) => {
  try {
    await AsyncStorage.mergeItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error merging item:', error);
  }
};

export const clear = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    console.error('Error clearing AsyncStorage:', error);
  }
};

export const getAllKeys = async () => {
  try {
    return await AsyncStorage.getAllKeys();
  } catch (error) {
    console.error('Error getting all keys:', error);
    return [];
  }
};

export const getAllItems = async () => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    const items = await AsyncStorage.multiGet(keys);
    return items.reduce((accumulator, [key, value]) => {
      accumulator[key] = JSON.parse(value);
      return accumulator;
    }, {});
  } catch (error) {
    console.error('Error getting all items:', error);
    return {};
  }
};

Moving forward, In the next section, we'll explain and break down the meaning of these AsyncStorage functions in the AsyncStorage.js file.

Understanding Async Storage Methods

By separating AsyncStorage functions into their own file, you can conveniently manage and reuse them throughout your React Native Expo project. This modular approach improves code maintenance and readability.

In the previous section, we created the AsyncStorage.js file and added several functions.

In the following sections, we'll talk about these methods and how to use them effectively.

setItem()

This method is essential for storing data locally on the device. It allows developers to store key-value pairs in AsyncStorage, where the key serves as a unique identifier and the value represents the data to be stored.

await AsyncStorage.setItem('username', 'freeCodeCamp');

getItem()

The getItem() method returns the value associated with a given key from local storage. It sends a parameter/key, which is the unique identification of the data being requested. And it returns the value associated with the supplied key, or null if no value is discovered for the given key.

const username = await AsyncStorage.getItem('username');

In this scenario, the value for the key username is fetched from local storage. This obtained value, freeCodeCamp, is then placed in the variable username, making it available for further use across the application.

removeItem()

This function deletes the object with the supplied key from local storage. It's useful when you want to remove a specific piece of data that's no longer required.

await AsyncStorage.removeItem('username');

In this example, the object identified by the key username is removed from local storage.

mergeItem()

The mergeItem() method combines the value of an existing key with the value supplied as input. If the key do not exists, it works similarly to setItem(), creating a new key-value pair.

await AsyncStorage.mergeItem('user', JSON.stringify({ name: 'John' }));

clear()

The clear() method deletes all items from local storage. It's useful when you wish to delete all local data, such as when you log out of a user or reset the application state.

await AsyncStorage.clear();

getAllKeys()

The getAllKeys() function returns all keys kept in local storage. It's useful when you need to loop through all keys or conduct operations based on the keys in local storage.

const keys = await AsyncStorage.getAllKeys();

multiGet()

The multiGet() function obtains several key-value pairs from local storage using an array of keys provided.

const data = await AsyncStorage.multiGet(['username', 'email']);

In this example, the values for the keys username and email are fetched from local storage.

Advanced Usage and Best Practices

While AsyncStorage provides a straightforward interface for local storage, there are several best practices to consider:

1. Data Serialization: When storing complex data types such as objects or arrays, remember to serialize them into a string format using JSON.stringify() before storing and deserialize them using JSON.parse() when retrieving.
2. Error Handling: Implement robust error handling to gracefully handle any failures that may occur during Async Storage operations.
3. Security Considerations: Be mindful of the sensitivity of the data being stored locally and implement appropriate security measures such as encryption for sensitive information.

Conclusion

In conclusion, using local storage into your React Native Expo projects is essential for developing robust and responsive mobile applications. Async Storage simplifies the process of storing and retrieving data on the device, providing a consistent user experience and enabling offline functionalities.

By following the steps provided in this article, you can utilize Async Storage to improve your apps local storage functionality.

Remember, if you have any questions or just want to say hi, feel free to reach me on X(Twitter) or my website. :)

Note that this tutorial is not applicable for apps created with Expo.

SVG Icon Image and Background

The first thing you need is an image. It can be in any format, but I recommend using SVG because, from it, you will generate icons of various sizes for different types of Android and iOS devices.

You will also need a background color that complements or contrasts your project's primary color. In my case, I will use #074C4E.

icon imagem and backgorund color

Add the Image to the Project

Next, add the SVG image to your project. It doesn't matter where. The most important thing is remembering the path because you will need to reference it later.

In my case, I placed it in src/assets/svgs/logo-vertical-white.svg.

How to Use the react-native-bootsplash Library

You will use the [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash) library to create native splash screens. This library will help you in three essential areas to guarantee your users an excellent experience when encountering the splash screen.

1. Native Splash Screens: React Native apps have a "JavaScript side" that only loads after the native side is ready. Therefore, to present a splash screen quickly, a native experience is necessary. The good news is that all the code is already inside the library, so you just need to connect it to your project.
2. Generation of Images and Files: When creating native splash screens, it is necessary to create specific image files for each platform. This can be done through tools like Xcode and Android Studio. Fortunately, the library comes with a CLI (command-line interface) that allows you to generate these files with just one command!
3. Hide at the Right Moment: In many cases, even after the native side has loaded, the app may still not be ready to display content to the user. On the JavaScript side, you still need to load your navigation stack, fetch the user's authentication status, or call the API to fetch some data. With the react-native-bootsplash, you can choose when to hide the splash screen.

First, let's add the library. As I am using Yarn as my dependency manager, I will execute the command:

yarn add react-native-bootsplash

Since the library has native dependencies, you need to install the pods on the iOS side. Inside the ios folder, run the following command:

pod install

Great, the library installation is complete 😁. In case you're wondering, the native Android dependencies are automatically installed when you run the yarn android command. We'll do this later after finishing the setup.

How to Generate the Splash Screen Files

In addition to installing the library, you need to generate the files and images mentioned earlier and update a few native files after that.

The react-native-bootsplash has a command that helps us create all the necessary native files and images to create a native Android and iOS splash screen.

It's worth mentioning that the library also has a premium option, where you can buy a license key to unlock extra CLI commands, like adding more than one icon on the screen and generating different images for Dark Mode. You will use the simplest splash screen, so you don't need a license key. But I highly recommend it if you have any of the use cases mentioned above and also to support the library's author, who does an incredible job.

To generate the files, you'll need the following to run the command, which you should customize according to your project:

1. File path and name: src/assets/svgs/logo-vertica-white.svg
2. The background color: 074C4E
3. The logo width: 105

yarn react-native generate-bootsplash src/assets/svgs/logo-vertica-white.svg \\
   --platforms=android,ios \\
   --background=074C4E \\
   --logo-width=105

After running this command, you will see that the native image files, color, and storyboard have been successfully generated.

terminal output

How to Connect the Library to the Project

It is time to integrate the library and newly created splash screen with the project by modifying some native files.

iOS - AppDelegate.mm

On iOS, the file where you configure libraries with native dependencies is the AppDelegate.mm.

And you will do this in two steps. First, import the library at the top of the file:

#import "RNBootSplash.h"

importing BootSplash on AppDelegate

The second change in this file is to add the function that will connect the native and JavaScript sides. Add this snippet at the end of the project before the last @end. The code will be different if you use a react-native version below 0.74.

// ⬇️ Add this before file @end (for react-native 0.74+)
- (void)customizeRootView:(RCTRootView *)rootView {
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
}

// OR

// ⬇️ Add this before file @end (for react-native < 0.74)
- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge moduleName:moduleName initProps:initProps];
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen
  return rootView;
}

In my case, I am on react-native 0.73, so my modification looks like this:

added createRootViewWithBridge (react-native < 0.74)

Android - styles.xml

On Android, you need to change three native files. Let's start with styles.xml.

Inside the android/app/src/main/res/values/styles.xml file, add the following code snippet inside the resources tag. Remember, there is already a style tag within it – do not replace it. Add an extra one.

<style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
</style>

styles.xml

Android - AndroidManifest.xml

To connect the splash screen in the file android/app/src/main/AndroidManifest.xml, you have to add the property android:theme="@style/BootTheme" inside the activity.

My AndroidManifest.xml

Android - Modify the MainActivity.java/kt

You need to initiate the splash screen within the MainActivity. Depending on your version of React Native, your file may have a Java or Kotlin extension. You have to modify or create the onCreate method if it does not exist.

I literally copied the code below from the library README file, so you don't need to jump there but feel free to check it here.

// Java (react-native < 0.73)
// …

// add these required imports:
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this, R.style.BootTheme); // ⬅️ initialize the splash screen
    super.onCreate(savedInstanceState); // super.onCreate(null) with react-native-screens
  }
}

My final MainActivity.java

Hide the Splash Screen

The implementation is ready for both platforms! But before running the app, you must hide the splash screen at some point on the JavaScript side; otherwise, the app will open and get stuck.

Of course, where to put it depends significantly on what you need to load for your app to be ready to display to the user. A classic example is waiting for React Navigation to load the navigation stack, which is signaled through the onReady callback.

import BootSplash from 'react-native-bootsplash';
// ...

export function Router() {
    // ...
    return (
    <NavigationContainer onReady={() => BootSplash.hide({fade: true})}>
      {Stack}
    </NavigationContainer>
  );
}

You are ready to go!

Your splash screen is ready for use! However, since you modified native files, rebuilding the app is necessary. To do this, run the commands yarn ios and yarn android to see how your implementation works.

Thanks for reading! If you speak Portuguese and would like more content about React Native, subscribe to my YouTube channel here.

The application leverages some of Supabase's features, such as authentication and database storage, to build a secured full-stack mobile application.

Additionally, you'll learn how to create React Native applications with Expo, generate a set of questions and answers from ChatGPT, and perform CRUD operations and user authentication with Supabase.

To fully understand this tutorial, you'll need to have a basic knowledge of React Native and data fetching in React applications.

Table of Contents

• Mobile Application Demo
• How to set up a React Native application with Expo
• How to style the React Native application with Tailwind CSS
• How to build the application screens
• How to build the authentication screens
• How to build the tab screens
• How to build the stack screens
• How to generate quiz questions and answers from ChatGPT
• How to add Supabase to React Native
• How to add Supabase authentication to React Native applications
• How to sign up new users
• How to sign in existing users
• How to log users out of the application
• How to protect screens from unauthenticated users
• How to interact with the Supabase database
• How to save user's score to the database
• How to retrieve data from Supabase
• Conclusion

Mobile Application Demo

To preview the application, download Expo Go and paste the links below into the app URL field:

Android: exp://u.expo.dev/update/a4774250-e156-4d34-bcfc-a4f2549c2e1d
iOS: exp://u.expo.dev/update/7e5f8ba5-89c4-4c1d-b219-a613ace642df

Scan the QR code to preview the mobile quiz application within the Expo Go application

How to Set Up a React Native Application with Expo

Expo is an open-source platform that allows you to create cross-platform applications easily with JavaScript. It saves us from the complex configurations required to create a native application with the React Native CLI, making it the easiest and fastest way to build and publish React Native apps.

Execute the code snippet below to create a new Expo project that uses Expo Router for navigating between screens.

npx create-expo-app@latest --template tabs@50

Expo Router is an open-source file-based routing system that enables users to navigate between screens easily. It is similar to Next.js, where each file name represents its route name.

Start the development server to ensure that the app is working as expected.

npx expo start

How to style the React Native application with Tailwind CSS

Tailwind CSS is a CSS framework that lets you create modern and stunning applications easily.

However, to style Expo applications using Tailwind CSS, you need to install NativeWind – a library that uses Tailwind CSS as its scripting language.

Run the code snippet below to install NativeWind and its dependencies:

npx expo install nativewind@^4.0.1 react-native-reanimated tailwindcss

Execute npx tailwindcss init within your terminal to create a tailwind.config.js file. Update the file with the code snippet below:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./app/**/*.{js,jsx,ts,tsx}"],
    presets: [require("nativewind/preset")],
    theme: {
        extend: {},
    },
    plugins: [],
};

Create a globals.css file within the root of your project and add the Tailwind directives below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the babel.config.js file with the code below:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Create a metro.config.js file within the root of your project and paste the code snippet below into the file:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './globals.css' })

Finally, import the ./globals.css file into the app/_layout.tsx file to enable you to style your application with Tailwind CSS:

//👉🏻 Within ./app/_layout.tsx

import "../globals.css";

Great job on creating the React Native project with Expo! Now, you're ready to add some style using Tailwind CSS. If you encounter any problems while installing NativeWind, check out the documentation for a step-by-step guide.

How to Build the Application Screens

Here, I'll guide you through building the application screens. They are divided into three categories:

• The Authentication screens – the register and login screens.
• The Tab layout screens – the dashboard, leaderboard, and profile screens.
• The Stack screens – the test and test completion screens.

The application prompts new users to create an account and log in before allowing access to the Tab layout screens.

On the dashboard screen, users can take tests on various topics. The leaderboard screen showcases the top ten users. Users can log out or preview their previous attempts on the profile page.

Application Demo

How to Build the Authentication Screens

The authentication screens accept the user's email and password and ensure the credentials are valid before creating an account or granting access to the application.

The Authentication Screens

Create an index.tsx and a register.tsx file within the app folder and a component that accepts the user's email and password using the React Native TextInput component.

import { Text, View, TextInput, Pressable, Alert } from "react-native";
import { Link, useRouter } from "expo-router";
import { useState } from "react";

export default function LoginScreen() {
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
    const router = useRouter();

    //👇🏻 triggered when the user submits the email & password
    const handleLogin = () => {
        if (!email.trim() || !password.trim())
            return Alert.alert("Error", "Please fill in all fields");
        setLoading(true);
        console.log({
            email,
            password,
        });
        router.replace("/(tabs)/");
    };

    return (
        <View>
        {/** -- user interface--*/}
        </View>
    );
}

The code snippet stores the user's email and password in states using the React useState hook. The handleLogin function accepts the user's email and password when the form is submitted and ensures that they are not empty before logging them to the console and redirecting the user to the Dashboard page.

You can create the user interface using the code snippet below. It displays the input fields for the user's credentials and an interactive Sign-in button that executes the handleLogin function. Additionally, the loading state ensures that the button is only pressed once.

<View className=' flex-1'>
    <View className='w-full px-4'>
        <Text className='text-3xl mb-4 font-bold text-white text-center'>
            Log in
        </Text>

        <Text className='text-lg text-gray-200'>Email Address</Text>
        <TextInput
            className='w-full border-b-[1px] py-4 rounded-md mb-3 text-white font-bold'
            value={email}
            onChangeText={setEmail}
        />
        <Text className='text-lg text-gray-200'>Password</Text>
        <TextInput
            className='w-full border-b-[1px] py-4 rounded-md mb-3 text-white font-bold'
            secureTextEntry
            value={password}
            onChangeText={setPassword}
        />
        <Pressable
            className={`w-full ${
                loading ? "bg-orange-200" : "bg-orange-600"
            } rounded-xl p-4 border-[1px] border-orange-200`}
            disabled={loading}
            onPress={() => handleLogin()}
        >
            <Text className='text-white text-center font-bold text-xl'>
                {loading ? "Authenticating..." : "Sign in"}
            </Text>
        </Pressable>
        <Text className='text-center mt-2 text-orange-200'>
            Don't have an account?{" "}
            <Link href='/register'>
                <Text className='text-white'>Register</Text>
            </Link>
        </Text>
    </View>
</View>

For instance, the loading state becomes true when a user clicks the Sign-in button. The Pressable component (button) has a disabled attribute set to the loading state to ensure that the user does not press the button multiple times. Additionally, you can use the loading state to notify the user that the request is processing.

The register.tsx file is also similar to the login.tsx file. You only need to change the words from Login to Register.

How to Build the Tab Screens

The Tab Screens consist of the Dashboard, Leaderboard, and Profile screens.

The Tab Screens

Create a (tabs) folder containing index.tsx, leaderboard.tsx, profile.tsx, and _layout.tsx files within the app folder.

cd app
mkdir (tabs)
cd (tabs)
touch index.tsx leaderboard.tsx profile.tsx _layout.tsx

After creating the _layout.tsx file within the (tabs) folder, update the _layout.tsx to specify Tab screen navigation for the newly created screens. The screens use icons from the Expo Vector Icons library.

import { Tabs } from "expo-router";
import { Ionicons, MaterialIcons, FontAwesome5 } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native";

export default function TabScreen() {
    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: "#f97316",
                tabBarInactiveTintColor: "gray",
                tabBarShowLabel: false,
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: "#ffedd5",
                    borderTopColor: "#ffedd5",
                },
            }}
        >
            <Tabs.Screen
                name='index'
                options={{
                    tabBarIcon: ({ color }) => (
                        <Ionicons name='home' size={24} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name='leaderboard'
                options={{
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name='leaderboard' size={24} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name='profile'
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesome5 name='user-alt' size={24} color={color} />
                    ),
                }}
            />
        </Tabs>
    );
}

Next, update the RootLayoutNav component within the _app/layout.tsx file to render all the screens within the application.

function RootLayoutNav() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name='(tabs)' />
            <Stack.Screen name='(stack)' />
            <Stack.Screen name='index' />
            <Stack.Screen name='register' />
        </Stack>
    );
}

The Dashboard Screen

Update the component to allow users to select four categories from a list of categories.

export default function HomeScreen() {
    const greet = getGreeting();
    const router = useRouter();
    const { session } = useAuth();
    const [loading, setLoading] = useState<boolean>(false);
    const [userCategories, setUserCategories] = useState<string[]>([]);

    const fetchQuestions = async () => {};

    const handleStartTest = async () => {
        Alert.alert("Start Test", "Are you sure you want to start the test?", [
            {
                text: "Cancel",
                style: "destructive",
            },
            {
                text: "Yes",
                onPress: () => fetchQuestions(),
            },
        ]);
    };

    return (
        <SafeAreaView className='flex-1 bg-orange-100 px-4 py-2'>
            <View className='flex flex-row items-center justify-between mb-2'>
                <View>
                    <Text className='font-bold text-2xl mb-[1px]'>
                        Good morning
                        <Ionicons name='partly-sunny-sharp' size={24} color='orange' />
                    </Text>

                    <Text className='text-lg'>Welcome User</Text>
                </View>
            </View>
            {userCategories.length === 4 && (
                <Pressable
                    className={`w-full h-[70px] flex items-center justify-center ${
                        loading ? "bg-orange-300" : "bg-orange-500"
                    } rounded-xl mb-2`}
                    disabled={loading}
                    onPress={() => handleStartTest()}
                >
                    <Text className='text-xl font-bold text-orange-50'>
                        {loading ? "Loading questions..." : "START TEST"}
                    </Text>
                </Pressable>
            )}

            <View className='w-full flex-1'>
                <Text className='text-xl font-bold text-orange-500 mb-4'>
                    Available Categories
                </Text>
                <FlatList
                    data={categories}
                    numColumns={2}
                    contentContainerStyle={{ width: "100%", gap: 10 }}
                    columnWrapperStyle={{ gap: 10 }}
                    renderItem={({ item }) => (
                        <Categories
                            item={item}
                            userCategories={userCategories}
                            setUserCategories={setUserCategories}
                        />
                    )}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={(item) => item.id}
                />
            </View>
        </SafeAreaView>
    );
}

The code snippet above renders a list of categories where users can select only four categories to answer questions on and start the quiz.

The Dashboard Screen

The Leaderboard Screen

The Leaderboard screen displays the top ten users ranked in descending order.

import { Text, FlatList, SafeAreaView } from "react-native";
import Board from "../../components/Board";

interface Props {
    total_score: number;
    user_id: string;
}

export default function LeaderboardScreen() {
    const [leaderboard, setLeaderboard] = useState<Props[]>([]);

    return (
        <SafeAreaView className='flex-1 bg-orange-100 p-4'>
            <Text className='text-2xl font-bold text-gray-500 text-center mb-6'>
                Leaderboard
            </Text>

            <FlatList
                data={leaderboard}
                renderItem={({ item }) => <Board item={item} />}
                keyExtractor={(item) => item.user_id}
                showsVerticalScrollIndicator={false}
            />
        </SafeAreaView>
    );
}

The code snippet above renders a FlatList with ten items. You can create an array containing ten users and pass it into the FlatList for now.

The Profile Screen

The Profile Screen displays the user's image, recent attempts, and a log-out button that enables the user to sign out of the application.

export default function ProfileScreen() {
    const [loading, setLoading] = useState<boolean>(false);
    const [total_score, setTotalScore] = useState<number>(0);
    const [attempts, setAttempts] = useState<string[]>([]);

    const handleSignOut = async () => {
        setLoading(true);
    };

    return (
        <SafeAreaView className='flex-1 bg-orange-100 p-4'>
            <View className='flex items-center justify-center mb-6'>
                <Text className='text-gray-600 mb-[1px]'>
                    <FontAwesome name='star' size={20} color='red' />
                    <Text>45</Text>
                </Text>
                <Text className='text-gray-600 mb-2'>@dhastix</Text>

                <Pressable onPress={() => handleSignOut()} disabled={loading}>
                    <Text className='text-red-500'>
                        {loading ? "Logging out..." : "Log out"}
                    </Text>
                </Pressable>
            </View>

            <Text className='font-bold text-xl text-gray-700 mb-3 px-4'>
                Recent Attempts
            </Text>

            <FlatList
                data={attempts}
                contentContainerStyle={{ padding: 15 }}
                renderItem={({ item }) => <Attempts item={item} />}
                keyExtractor={(item, index) => index.toString()}
                showsVerticalScrollIndicator={false}
            />
        </SafeAreaView>
    );
}

The code snippet above displays the user's image, the sign-out button, and all the user's attempts. You can create an array of items for testing purposes.

How to Build the Stack Screens

The Stack Screens comprise two screens – the quiz screen and the screen that displays the user's score after completing a quiz session.

The Stack Screens

The Quiz Screen

The Quiz Screen displays a timer that countdowns from 15 seconds before moving to the next question. It shows the question, its category, available options, the Skip and Next buttons, and a cancel icon.

Create a similar screen to the one shown below. You can use this as a guide.

The Quiz Screen

The Quiz Completion Screen

It displays the user's score after completing a test.

import {
    SafeAreaView,
    Text,
    Pressable,
    View,
    ImageBackground,
} from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";

export default function CompletedScreen() {
    const { score } = useLocalSearchParams();

    return (
        <View className='flex flex-1 bg-orange-400'>
            <ImageBackground
                source={{ uri: "https://source.unsplash.com/NAP14GEjvh8" }}
                className='flex-1 p-4'
            >
                <SafeAreaView />
                <Pressable onPress={() => router.replace("/(tabs)/")}>
                    <MaterialIcons name='cancel' size={60} color='white' />
                </Pressable>

                <View className='flex-1 flex items-center justify-center'>
                    <View className='bg-orange-50 w-full py-[50px] rounded-xl p-4 flex items-center justify-center shadow-lg shadow-orange-500'>
                        <Text className='text-3xl text-orange-600 font-bold mb-4'>
                            {Number(score) > 20 ? "Congratulations🥳" : "Sorry! You lose 🥲"}
                        </Text>
                        <Text className='font-bold text-xl'>You scored {score}!</Text>
                    </View>
                </View>
            </ImageBackground>
        </View>
    );
}

The code snippet above accepts the user's score as a parameter after completing the quiz and displays the score to the user.

How to Generate Quiz Questions and Answers from ChatGPT

When building a quiz application, the first question is: how do you get the questions and options for the application? You can either create a list of questions or search for a suitable public API.

However, I'll guide you through creating a list of questions and options in JSON format using ChatGPT. Use this prompt to generate questions and answers from ChatGPT:

Generate 25 distinct questions on and ensure they are in JSON format containing an id, category which is , a question attribute containing the question, an options array of 3 options, and an answer property.

The prompt returns a JSON result containing the questions and answers. You can host them on GitHub or save them to a database.

The questions and answers I'm using in this mobile application are available on GitHub. Feel free to clone or copy the files.

Once your questions and answers are ready, you can connect the application to Supabase.

How to Add Supabase to React Native

Supabase is an open-source Firebase alternative that enables you to create secured and scalable software applications within a few minutes.

It provides a secured Postgres database, a complete user management system that handles various forms of authentication (including email and password, email sign-in, and social authentication), a file storage system that lets you store and serve files of any size, real-time communication, and many other features.

In this tutorial, I'll walk you through the following:

• How to authenticate users and control access to some application screens with Supabase.
• How to save the users' scores to the database to enable you to rank them based on their scores.

First, you need to install Supabase and its required dependencies. You can do that with the following commands:

npm install @supabase/supabase-js 
npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill
npx expo install expo-secure-store

Create a supabase.ts file within your project and copy the code snippet below into the file to initiate Supabase:

import "react-native-url-polyfill/auto";
import * as SecureStore from "expo-secure-store";
import { createClient } from "@supabase/supabase-js";

const ExpoSecureStoreAdapter = {
    getItem: (key: string) => {
        return SecureStore.getItemAsync(key);
    },
    setItem: (key: string, value: string) => {
        SecureStore.setItemAsync(key, value);
    },
    removeItem: (key: string) => {
        SecureStore.deleteItemAsync(key);
    },
};

const supabaseUrl = "YOUR_REACT_NATIVE_SUPABASE_URL";
const supabaseAnonKey = "YOUR_REACT_NATIVE_SUPABASE_ANON_KEY";

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
    auth: {
        storage: ExpoSecureStoreAdapter as any,
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: false,
    },
});

Next, visit the Supabase homepage, sign in, and create a new organization and project.

Create a new Supabase project

Click the Settings icon on the sidebar and select API to copy the project URL and the public API key.

Supabase API settings containing project credentials

Create a .env.local file and copy the credentials into the variables. Update the supabase.ts file to use the Supabase URL and API key.

EXPO_PUBLIC_API_URL=<YOUR_SUPABASE_URL>
EXPO_PUBLIC_API_KEY=<YOUR_SUPABASE_API_KEY>

Congratulations! You can now interact with Supabase from your application and access various features such as authentication, database, file storage, and so on.

How to Add Supabase Authentication to React Native Applications

Supabase offers various forms of authentication. But we only need the email and password method of authentication for this application.

How to sign up new users

The code snippet below accepts an email and a password and creates an account for the user. Otherwise, it returns an error if any of the credentials is invalid.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 sign up function
const handleRegister = async () => {
    if (!email.trim() || !password.trim())
        return Alert.alert("Error", "Please fill in all fields");
    const { error } = await supabase.auth.signUp({ email, password });
    if (error) return Alert.alert("Error", error.message);
    router.replace("/");
};

With the supabase.auth.signUp() function, Supabase handles the authentication process. If successful, the user is redirected to the login page. Otherwise, it displays an error message.

How to sign in existing users

This function allows existing users to access the application. It accepts the user's email and password and logs the user into the application.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 register function
const handleLogin = async () => {
    if (!email.trim() || !password.trim())
        return Alert.alert("Error", "Please fill in all fields");
    const { error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) return Alert.alert("Error", error.message);
    router.replace("/(tabs)/");
};

The supabase.auth.signInWithPassword() function validates the user's email and password and redirects the user to the Dashboard screen. Otherwise, it returns the necessary authentication error.

How to log users out of the application

Supabase also allows users to sign out of the application. You can execute this function when the user clicks a button within the Profile page.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 sign out function
const handleSignOut = async () => {
    try {
        const { error } = await supabase.auth.signOut();
        if (error) throw error;
    } catch (error) {
        console.log(error);
    }
};

How to protect screens from unauthenticated users

You've been able to add the sign-up, sign-in, and log-out functionalities to the React Native application. But the Dashboard and other screens containing sensitive data are still accessible to unauthenticated users.

How do we fix this?

In this section, I'll walk you through how to protect screens from unauthorized users using the React Context API.

The React Context API allows us to pass data through the component tree without needing to pass props down manually at every level.

Create an AuthProvider.tsx file. This is where the data to be passed down the application screens is stored. Copy the code snippet below into the file:

import { supabase } from "./supabase";
import { Session } from "@supabase/supabase-js";
import {
    PropsWithChildren,
    createContext,
    useContext,
    useEffect,
    useState,
} from "react";

type AuthData = {
    session: Session | null;
    loading: boolean;
};

//👇🏻 data to be passed down the components
const AuthContext = createContext<AuthData>({
    session: null,
    loading: true,
});

export default function AuthProvider({ children }: PropsWithChildren) {
    const [session, setSession] = useState<Session | null>(null);
    const [loading, setLoading] = useState(true);

    //👇🏻 fetches the current user's session
    useEffect(() => {
        const fetchSession = async () => {
            const {
                data: { session },
            } = await supabase.auth.getSession();
            setSession(session);
            setLoading(false);
        };

        fetchSession();
        supabase.auth.onAuthStateChange((_event, session) => {
            setSession(session);
            setLoading(false);
        });
    }, []);

    return (
        <AuthContext.Provider value={{ session, loading }}>
            {children}
        </AuthContext.Provider>
    );
}
//👇🏻 custom hook for using the context (data)
export const useAuth = () => useContext(AuthContext);

The code snippet retrieves the current user's session. If the user is signed in, the session and loading state variables are updated to show that the user is active, and they are passed into other components within the application.

The useAuth custom hook allows you to access the state variables (session and loading) within the application screens.

To access the context (data) available within the application screens, wrap the entire application with the AuthProvider. So now, update the RootLayoutNav component within the app/_layout.tsx file as shown below:

import AuthProvider from "../lib/AuthProvider";

function RootLayoutNav() {
    return (
        <AuthProvider>
            <Stack screenOptions={{ headerShown: false }}>
                <Stack.Screen name='(tabs)' />
                <Stack.Screen name='(stack)' />
                <Stack.Screen name='index' />
                <Stack.Screen name='register' />
            </Stack>
        </AuthProvider>
    );
}

Congratulations! You've successfully set up the context. Next, how do we read the context and ensure that only authenticated users can view some of the application screens?

You can do this using the custom useAuth hook. For example, you can protect the Tabs screens via the (tabs)/_layout.tsx file.

import { Tabs, Redirect } from "expo-router";
import { useAuth } from "../../lib/AuthProvider";
import { ActivityIndicator } from "react-native";

export default function TabScreen() {
    const { session, loading } = useAuth();

    if (!session) {
        return <Redirect href='/' />;
    }

    if (loading) {
        return <ActivityIndicator size='large' color='#f97316' />;
    } else {
        return (
            <Tabs
                screenOptions={{
                    tabBarActiveTintColor: "#f97316",
                    tabBarInactiveTintColor: "gray",
                    tabBarShowLabel: false,
                    headerShown: false,
                    tabBarStyle: {
                        backgroundColor: "#ffedd5",
                        borderTopColor: "#ffedd5",
                    },
                }}
            >
                {/**-- screens--*/}
            </Tabs>
        );
    }
}

The code snippet above checks if there is a session for the current user. If null, the application redirects the user to the login screen. If the application is yet to determine the user's status, it displays a loading icon.

How to Interact with the Supabase Database

In this section, I'll walk you through creating the database for the mobile application. You'll learn how to store and retrieve the user's scores and rank them based on their total score.

Before we proceed, note that the application calculates the user's score after answering each question on the test screen. Upon completion, the user's score is retrieved and displayed on the test completion screen.

const handleSave = () => {
    //👇🏻 checks if the user has not completed the test
    if (count < questions.length - 1) {
        //👇🏻 updates the user's score if the selected answer is correct
        if (questions[count].answer === userAnswer) {
            setUserScore((userScore) => userScore + 1);
        }
        //👇🏻 change the question, refresh the selected answer and time
        setCount((count) => count + 1);
        setSelectedBox(null);
        setTime(15);
    } else {
        //👇🏻 test completed
        router.push({
            pathname: "/(stack)/completed",
            params: { score: userScore },
        });
    }
};

Within your Supabase project, select Table Editor from the sidebar menu and create a new table containing the following columns:

• id – contains a unique ID for each row of data.
• created_at – represents the time the data was created.
• attempts – a text array containing the score and date attributes.
• total_score – represents a user's cumulative score. We'll rank users using this score
• user_id – a unique ID used to identify each user's data.

The Table Columns

Finally, you can add a Row Level Security that allows only authenticated users interact with the database.

The Table Row Level Security Policy

How to save the user's score to the database

Before you can save a user's score to the database, you need to check if the user's data already exists – meaning the user has taken a test before. If true, you need to update the user's score with the latest test score. Otherwise, add the data to the database.

The code snippet below accepts the user's score and user's ID (from the session data) and saves the user's score to Supabase.

export const saveScore = async (userScore: number, userID: string) => {
    try {
        //👇🏻 check if the user data exists
        const { data, error } = await supabase
            .from("scores")
            .select()
            .eq("user_id", userID);
        if (error) throw error;

        //👇🏻 if the user data does not exist, insert a new one
        if (error || !data.length) {
            const { data, error } = await supabase
                .from("scores")
                .insert({
                    attempts: [{ score: userScore, date: getCurrentDate() }],
                    total_score: userScore,
                    user_id: userID,
                })
                .single();
            if (error) throw error;
        } else {
            //👇🏻 if the user data exists, update the attempts and total_score
            const { data: updateData, error } = await supabase
                .from("scores")
                .update({
                    attempts: [
                        ...data[0].attempts,
                        { score: userScore, date: getCurrentDate() },
                    ],
                    total_score: data[0].total_score + userScore,
                })
                .eq("user_id", userID);
            if (error) throw error;
        }
    } catch (err) {
        console.log(err);
    }
};

How to retrieve data from Supabase

Recall that you need to rank the users based on their scores on the Leaderboard screen and retrieve the user's attempts on the Profile screen.

The code snippet below accepts a user's ID and retrieves the attempts and total score from the database.

export const getUserAttempts = async (userID: string) => {
    try {
        const { data, error } = await supabase
            .from("scores")
            .select("attempts, total_score")
            .eq("user_id", userID);
        if (error) throw error;
        return { attempts: data[0].attempts, total_score: data[0].total_score };
    } catch (err) {
        return { attempts: "", total_score: 0 };
    }
};

The code snippet below retrieves the top ten users from the database based on their score.

export const getLeaderBoard = async () => {
    try {
        const { data, error } = await supabase
            .from("scores")
            .select("total_score, user_id")
            .order("total_score", { ascending: false })
            .limit(10);
        if (error) throw error;
        return data;
    } catch (err) {
        return null;
    }
};

Congratulations! You've successfully completed the project for this tutorial.

Conclusion

In this tutorial, you’ve learned how to:

• build React Native mobile applications with Expo,
• style your mobile applications with Tailwind CSS,
• create stack and tab screen navigations using Expo Router,
• use Supabase and leverage its authentication and database features to build full-stack applications.

Supabase is an amazing tool that enables you to build a full-stack software application with no hassle. If you are looking forward to shipping great software products or side projects faster, consider using Supabase.

Expo also saves us from the complexities of setting up and developing mobile applications using the React Native CLI. It enables you to focus more on building your applications while it handles the necessary configurations, including deployment.

Feel free to customise the application using ChatGPT to generate questions and answers tailored to any niche or topic.

The source code for this tutorial is available in this GitHub repository.

Thank you for reading!

However, when developing mobile apps with React Native, integrating Tailwind CSS may be challenging. But guess what? Not anymore. With the development of tools such as NativeWind, React Native developers can leverage Tailwind CSS power to design stunning and responsive mobile UIs easily.

In this tutorial, you'll learn the process of integrating Tailwind CSS to your React Native Expo app using NativeWind. We'll also build a simple login screen with NativeWind.

Table of Contents:

• What's NativeWind?
• Prerequisites
• Getting Started
• How to Create A New Expo App
• How to Install NativeWind
• How to Set Up Tailwind CSS
• How to Configure NativeWind With Babel
• How to Style with NativeWind
• How to Build A Simple Login Screen
• Conclusion

What's NativeWind?

NativeWind acts as a bridge between Tailwind CSS and React Native Expo, allowing developers to take advantage of Tailwind's utility-first approach in their mobile app development workflow.

NativeWind provides various benefits to developers, some of these benefits include:

• Familiar Syntax: Developers that are familiar with Tailwind CSS can easily migrate to using NativeWind in their React Native projects, easing the learning curve.
• Consistent Styling: NativeWind ensures consistent styling across platforms by offering a single collection of components and services.
• Flexibility: NativeWind allows developers to easily adapt and extend styles to meet the app's design specifications.

Overall, It provides a collection of components and tools that are very similar to Tailwind CSS, allowing developers to create shorter, more concise code while preserving flexibility and consistency across platforms.

Tailwind makes writing code feel like I’m using a design tool - Didier Catz

Prerequisites

• Basic Understanding of React Native Expo and Tailwind CSS.
• Node.js and npm (or yarn) installed.
• Willingness to learn :)

Getting Started

Before you dive into integrating Tailwind CSS into your React Native Expo app, you'll need to ensure that you have the necessary tools set up.

If you haven't already installed Expo and expo-cli globally, you can do so using npm or yarn:

npm install -g expo-cli

or

yarn global add expo-cli

How to Create A New Expo App

With expo-cli installed, you can now create a new React Native Expo project.

Navigate to the directory where you wish to create your project and open the terminal. You can do this by pressing CTRL + ` on Visual Studio Code. Then execute this command in the terminal:

npx create-expo-app simpleproject

This command creates an expo project in your directory.

How to Install NativeWind

After creating your expo project, you can install NativeWind and its dependencies by running the following commands in your project's directory:

cd simpleproject
npm i nativewind
npm i --dev tailwindcss@3.3.2

or

cd simpleproject
yarn add nativewind
yarn add --dev tailwindcss@3.3.2

Next, you'll need to create a tailwind.config.js file. To do this, run this command in your terminal:

npx tailwindcss init

This would result in a tailwind.config.js file in your project's root directory.

How to Set Up Tailwind CSS

To set up Tailwind CSS in your project, navigate to your tailwind.config.js file, and under content, enter the paths to your components. Your tailwind.config.js file would then look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./<custom directory>/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

tailwind.conf.js file after adding paths to components

In the above example, you can replace <custom directory> with your directory's real name.

How to Configure NativeWind with Babel

You'll also need to configure NativeWind with Babel. To do this, include the NativeWind plugin in your project's babel.conf.js file:

plugins: ["nativewind/babel"],

The babel.conf.js file would look like this after adding the NativeWind plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

babel.conf.js file after adding nativewind plugin

By including the NativeWind plugin in the Babel configuration file you ensure that NativeWind's functionality is properly incorporated into your project's JavaScript codebase.

🎉With this, NativeWind has been successfully integrated into your Expo app. The next step is to begin styling the app with NativeWind.

How to Style with NativeWind

To begin styling with NativeWind, go to your project's App.js file or the component you would like to style, which would look like this by default:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

App.js boilerplate code

Next, modify your component to get rid of any instances of StyleSheet abstraction. In this example, we'll modify the App.js code. After adjustments, we should have something like this:

import { StatusBar } from "expo-status-bar";
// import { StyleSheet, Text, View } from "react-native";
import { Text, View } from "react-native";

export default function App() {
  return (
    // <View style={styles.container}>
    <View className='flex-1 justify-center items-center bg-white'>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     backgroundColor: "#fff",
//     alignItems: "center",
//     justifyContent: "center",
//   },
// });

App.js component after modification

In the modified codeblock, we remove all occurrences of StyleSheet abstractions, including the import statement for stylesheet and the StyleSheet.create function, and we replace style with className in the App.js return function.

Having cleared that up, all you need to do is write Tailwind CSS classes into your app className to begin implementing Tailwind CSS in your application. You'll see this in a bit as we build a simple login screen with NativeWind.

How to Build A Simple Login Screen

Now, let's dive into building a simple login screen using NativeWind. We'll continue with the initial setup in the App.js file and gradually add components to create the login UI.

First, let's replace the existing code in the App.js file with the following:

import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

export default function App() {
  return (
    <View className='flex-1 justify-center items-center bg-white'>
      <StatusBar style='auto' />
      <Text className='text-center mt-3 text-2xl font-light text-orange-300'>
        Login
      </Text>
      {/* Additional components goes here */}
    </View>
 );
}

Starter code for login screen UI

The code above imports the essential components from React Native and Expo. We then use a View component to define the structure of our login screen, which is styled with NativeWind's utility classes. Inside the View, we have a Text component that displays "Login" with styling applied using NativeWind classes.

Next, you can add your login form components, such as username and password input fields, a login button, and any other necessary elements. Here is an example of how you can extend the login screen:

import { StatusBar } from "expo-status-bar";
import { Text, View, TouchableOpacity, TextInput } from "react-native";

export default function App() {
  return (
    <View className='flex-1 justify-center items-center bg-white'>
      <StatusBar style='auto' />
      <Text className='text-center mt-3 text-2xl font-light text-orange-300'>
        Login
      </Text>
      {/* Additional components goes here */}
      <View className='mt-5 mx-5'>
        <View>
          <Text className='text-gray-400'>EMAIL:</Text>
          <TextInput
            placeholder='Enter Email...'
            className='border border-dotted p-2 text-gray-500 border-amber-400 mt-1'
          />
        </View>
        <View className='mt-3'>
          <Text className='text-gray-400'>PASSWORD:</Text>
          <TextInput
            secureTextEntry
            placeholder='Enter Password...'
            className='border text-gray-500 border-dotted p-2 border-amber-400 mt-1'
          />
        </View>

        <TouchableOpacity className='bg-orange-300 p-3 mt-4'>
          <Text className='text-center text-base text-white'>Login</Text>
        </TouchableOpacity>

        <Text className='text-center font-normal text-gray-500 text-base mt-3'>
          OR
        </Text>
        <View className='mt-4'>
          <TouchableOpacity className='flex flex-row items-center justify-center p-2 bg-orange-300'>
            <Text className='text-white mx-2 text-sm'>Sign In With Google</Text>
          </TouchableOpacity>
        </View>
        <View className='mt-6 flex-row justify-center'>
          <Text className=''>New to FreeCodeCamp? </Text>
          <TouchableOpacity>
            <Text className='text-amber-500'>Create an Account</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

Extended login screen UI with additional components

In this expanded version, we've included TextInput components for the username and password input fields, as well as a TouchableOpacity for the login button. Styling is done with NativeWind's utility classes to provide a clean and consistent appearance.

Furthermore, once you've finished creating your login screen using NativeWind in your React Native Expo project, you'll want to test it to check if everything works properly. You can do this by running this command on your terminal:

expo start

This command will launch the bundler and generate a QR code. To open the app, scan the QR code displayed in the terminal with your emulator's camera, or press "a" for Android or "i" for iOS.

Output of the code in an emulator

If you need to, you can access the complete project code on GitHub.

Conclusion

Integrating Tailwind CSS into a React Native Expo project with NativeWind has various benefits, including increased developer efficiency, code consistency, and performance. Developers can easily create amazing mobile applications by leveraging the power of Tailwind CSS's utility-first approach and React Native's native features.

NativeWind makes it easy to apply Tailwind CSS to your React Native Expo app. Using Tailwind CSS in your mobile app development workflow opens up new possibilities for UI design and customization.

Remember, if you have any questions or just want to say hi, feel free to reach me on X(Twitter) or my website. :)

We just published a full React Native course on the freeCodeCamp.org YouTube channel.

Emma Williams created this course. She is a software developer who specializes in React Native.

Our comprehensive React Native course is specifically designed to take you from the basics of app development to creating your very own weather app with a sleek user interface and real-time data integration. The course will walk you through core concepts such as components, state management, hooks, and styling, while providing hands-on experience and practical examples.

Course Overview

Introduction
Start your journey into React Native with a brief overview of the framework, its benefits, and why it's the go-to choice for cross-platform mobile development.

What is React Native and Expo?
Understand the purpose of React Native and learn how Expo simplifies the development process by offering a suite of tools and services.

Setting Up Your Environment
Get up and running with Expo, set up a custom app, and configure Android Studio to kickstart your development process.

The Directory Structure, Linting, and Prettier
Familiarize yourself with the typical directory structure of a React Native project, and learn how to set up linting and Prettier for a clean and consistent codebase.

Debugging and Native Components
Discover the art of debugging in React Native and explore the power of native components to achieve a truly native look and feel.

Core Components and JSX
Understand the significance of core components and learn how to use JSX to build dynamic UIs.

Working with Components
Dive deep into the world of components, their purpose, and how to create your very first component.

Styling and Layout Props
Grasp the essentials of styling in React Native and learn how to use layout props to create responsive designs.

Building the Weather App
Put your newfound skills to the test as you create the current weather screen, upcoming weather component, and city screen. Learn to work with lists, images, and props, all while refining your codebase.

Navigation and State Management
Delve into the realm of navigation and state management, implementing tabs and using hooks like useState and useEffect to manage your app's state.

Fetching Data and Integrating APIs
Learn how to fetch data from the OpenWeatherMap API, get the user's location, and create your own custom hook to pass data to your components.

Updating Components and Installing Moment
Update your components to use real-time data, and install Moment to display dates and times in a user-friendly format.

Error Handling and Final Refactoring
Create an error screen to handle unexpected issues, and polish your app with some last refactoring.

Bonus Material
Enhance your React Native knowledge with bonus content covering advanced topics and best practices.

By the end of this comprehensive React Native course, you'll have the skills and confidence to build your own cross-platform mobile applications with ease. Whether you're an aspiring app developer or a seasoned professional looking to expand your toolkit, this course offers the perfect balance of theory and hands-on practice to elevate your React Native expertise.

Watch the full course on the freeCodeCamp.org YouTube channel (5-hour watch).

One of the key benefits of both these libraries is that they each have the ability to manage their own state within components. But managing state, along with sharable data, can be tricky – especially as the applications become more complex.

In this article, we will explore global state management – and in particular, how to use the Pullstate library. You'll learn how you can easily implement it into your React and React Native projects.

Pre-Requisites:

• Basic knowledge of React / React Native applications
• Basic knowledge of CSS and styling (not essential)

Note: in this article, I will be using TypeScript and React Native. But the implementation and concepts will be exactly the same for JavaScript users and React (without the strongly typed variables).

What is State?

State refers to an object that stores data which can change over time. It's a way to manage and update data within a component or application without affecting other parts of the application.

State in React is like a backpack you carry around with you, containing things you might need for your day. It's a way to store and manage data in your app that can change over time, like what you've picked up or dropped off along the way.

Local vs global state

Component state is local to a specific component. This means that it's only accessible and modifiable within that component. You use component state to manage data that's specific to a single component – for example like form validation messages, or the visibility of certain UI (User Interface) elements.

Global state, on the other hand, refers to data that can be accessed and modified from multiple components across the entire application. Global state would be something that is managed by a state management library. It's useful for managing shared data across multiple components, like authentication status, user preferences, or shopping cart contents.

Global state and component state both have their own advantages and disadvantages, depending on the specific needs of the application.

Global state can simplify data management and improve performance, but can also increase complexity if not managed correctly. Component state is simpler to manage and understand, but can lead to duplicated data and inconsistent behavior across the application.

What are State Management Libraries?

logos of popular state libraries

State management libraries in React are tools that help developers manage and organize the state of their applications more easily. These libraries are designed to handle complex state management scenarios in large-scale applications so you don't have to. They also help you create a more central, organized state.

When talking about state management and data sharing, the most commonly talked about solution is Redux. But Redux is often seen as overly-complicated because it adds an additional layer of complexity.

Redux is designed to manage application state in a predictable and consistent manner, but it requires developers to learn a new set of concepts, such as actions, reducers, and the store.

Some other popular state management libraries in React include Zustand, MobX, and Recoil. These libraries provide features like global state management, immutability, and optimized re-rendering to help make applications more performant and easier to maintain.

Using a state management library can make it easier for developers to handle the state of their application, and simplify the process of passing data between components. It can take some time to learn how to use these libraries effectively, but they can be very powerful tools for building complex React applications.

What is Pullstate?

Pullstate is a much simpler and more lightweight state management library for React. It simplifies the whole process and makes it easier to build scalable applications.

Since React Native is built on React, you can use Pullstate to build not only web applications but mobile ones, too. It is is based on the concept of "pulling" data from the state, rather than pushing data into it.

How to use Pullstate

In order to use Pullstate and get up an running, you'll first need to know which package manager you're using (yarn or npm).

Open your existing React / React Native project, and in the terminal enter the following commands depending on whether you use npm or yarn:

npm install pullstate
//or
yarn add pullstate

If you haven't already got a React Native application you can create one using the React Native cli.

First, you'll need to make sure you have Node.js installed.

Open the terminal to the folder where you would like to create your React Native application:

npm uninstall -g react-native-cli
npx react-native init myReactNativeApp --template react-native-template-typescript

How to Set Up the Store

The below code and corresponding image shows how to initialize the Pullstate store code for copying and pasting below (this is how I'll include all the code in this tutorial – code for copying, along with how it should look in a snapshot).

You can put the below code in its own file, for example store.ts , in your project root folder.

import {Store} from 'pullstate';

interface UIStore {
  user: {
    firstName: string;
    lastName: string;
    acceptedTnC: boolean;
  };
  preferences: {
    isDarkMode: boolean;
    pushNotifications: boolean;
  };
}

const initialStore: UIStore = {
  user: {
    firstName: '',
    lastName: '',
    acceptedTnC: false,
  },
  preferences: {
    isDarkMode: false,
    pushNotifications: false,
  },
};

export const store = new Store<UIStore>({
  user: {
    firstName: '',
    lastName: '',
    acceptedTnC: false,
  },
  preferences: {
    isDarkMode: false,
    pushNotifications: false,
  },
});

Here's the snapshot of what that should look like:

image showing code snapshot of store configuration

What is this code doing?

First, we created an interface for the Pullstate store. This holds all the information we will need to store in state across the app. We have things like the user's first name and last name (so we can use them across the application).

The store can also hold nested objects, for example our preferences object, making managing state cleaner.

To keep things simple and allow cleaner code in the future, I've created an initial store state. This resets all the state properties to their default values.
We can then (when needed) return the state back to its initial state quick and easily. This could be very useful in situations like logOut, onError, and so on.

Then we initialize the store and make it an exportable object. This means that after the first time we import the object (ideally at the top level of our application) it is then accessible throughout our app.

How to Retrieve Data from the Store

Ok, so we have our store, but how we do access this data within our component?
To retrieve the data from the store, we can utilize either the getRawState or useState functions.

getRawState() returns the raw state at this moment in time. When called it gives the live state of the pull state store. If the state is updated, the value will not be updated

For example in the code below, the acceptedTerms variable would be whatever value it was at time of calling store.getRawState():

example of using getRawState() function

useState() acts in the same way as the React useState() function works. When the Pullstate store is updated, the acceptedTerms value will be be updated too, thus causing a re-render of the component.

Think of useState in Pullstate as a listening function – it waits for a value to be updated and then provides you with that new updated value.

example of using the store.useState() function

Real Life Example:

Let's take a look at a real life example, involving accepting a terms and conditions page. The code below will:

• Create a card component with some terms, and
• Have two buttons, 'Back' and 'Next', which will run a function on clicking.

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Card } from "react-native-paper";
import { store } from "./store";import { BlueButton } from "../atoms/button";

export const PullStateCard: React.FC = () => {  
    const handleAgreeTerms = () => {
        store.update((state) => {     
            state.user.acceptedTnC = true;    
        });  
    };  

    const handleDisagreeTerms = () => { 
        store.update((state) => {      
            state.user.acceptedTnC = false;    
        });  
    };  

    return (    
        <Card style={[styles.marginTop, styles.padding]}>
            <Text>Our services are provided on an as-is basis. 
            We do not guarantee the availability, accuracy, or completeness of our services. 
            You may use our services only for lawful purposes and in accordance with these terms and conditions.
            </Text>
            <Text style={{ marginTop: 16 }}>
                By clicking 'Next' you are agreeing to the terms and conditions of this app
            </Text>
            <View style={styles.row}>
                <BlueButton 
                    styleOverride={styles.button}
                    onPress={handleDisagreeTerms}
                    title="Back"/>        
                <BlueButton
                    styleOverride={styles.button}
                    onPress={handleAgreeTerms}
                    title="Next"/>
            </View>
        </Card>  

       )
}

My custom buttons:

import {
  StyleProp,
  StyleSheet,
  Text,
  TouchableOpacity,
  ViewStyle,
} from 'react-native';
import React from 'react';

interface BlueButtonProps {
  onPress: () => void;
  title: string;
  styleOverride?: StyleProp<ViewStyle>;
}

export const BlueButton: React.FC<BlueButtonProps> = ({
  onPress,
  title,
  styleOverride,
}) => (
  <TouchableOpacity onPress={onPress} style={[styles.button, styleOverride]}>
    <Text style={styles.buttonText}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    borderRadius: 10,
    padding: 10,
    alignItems: 'center',
    marginVertical: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

The Card component code would look like this:

Dissecting the handle functions

The handle functions are called when the buttons are clicked. Depending on which you click, a particular action will be carried out. But the underlying intent is the same, in that they both modify the state of the pull state store we created earlier.

One will set the user.acceptedTnC to true, and the other to false. We've used the .update()function on the store object we created earlier, and passed it an anonymous function to update the properties.

The method is not limited to update just the one property, and you can update multiple properties at once, for example:

store.update((state) => {  
    state.user.acceptedTnC = true;  
    state.user.firstName = "John";  
    state.user.lastName = "Doe";  
    state.preferences.pushNotifications = true;
});

Why is Pullstate and Global State Management So Useful?

The beauty of using state in this way means that the component doesn't handle the store, the application does. You can then share this across the whole app, and have other components listen to these changes.

Let's take the example above one step further and have a separate component that will show a relevant message that's dependent on the state of the acceptedTnC property.

const styles = StyleSheet.create({  
    disagree: {    
        color: "red",
        textDecoration: "italic",
    },
    accepted: {
        color: "#0d8009",
    },  
    marginTop: {
        marginTop: 10,
    },
});

export const AgreedToTerms: React.FC = () => {  
    const acceptedTerms = store.useState((state) => state.user.acceptedTnC);
    return (    
        <View style={styles.marginTop}> 
            {acceptedTerms ? (
                <Text style={styles.accepted}>
                    You have successfully accepted the Terms and Conditions                  </Text>) : (
                 <Text style={styles.disagree}>
                     Please accept the Terms and Conditions by pressing 'Next'        
                     </Text>)
            }
        </View>
    )
};

If you import these components and add your own styling to the App.tsx (App.js for JS) like so:

<PullStateCard />
<AgreedToTerms />

Your whole App.tsx code will look like this:

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

import {AgreedToTerms, PullStateCard} from './src/pullstate/pullstate_example';

const App = () => {
  return (
    <SafeAreaView>
      <StatusBar barStyle={'light-content'} />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.container}>
          <PullStateCard />
          <AgreedToTerms />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
});

export default App;

Once you have copied the code, you can add your own styling where necessary and run the app.

Click the Next button, and your text will turn green and inform you that you've accepted the the terms.

If you then click the Back button, you will see the text is red informing you that you need to accept the terms:

This is all powered by the global Pullstate store. There is no internal state on the AgreedToTerms component.

Decoupling Logic

Decoupling refers to the practice of separating different parts of your code so that they are not tightly dependent on / related to each other.

Think of it like building with LEGOs. When you build with LEGOs, each piece can connect to other pieces, but they can also be easily disconnected and reconnected with other pieces. This makes it easier to change and modify your LEGO build.

Similarly, in programming, when we decouple our code, we make it easier to change and modify without affecting other parts of our code. This is especially important in large applications with many different components or modules.

By moving the 'agreed to terms' acceptance state to Pullstate, it can be added and removed to any component that should need it. It's not tightly coupled with the AgreedToTerms component, and it becomes a re-usable piece of state that is globally updated. For example we could use it elsewhere in the app as an authorization mechanism, to show / hide UI elements, and much more.

Round up

I hope you've found this article useful and enjoyed this brief introduction to Pullstate and global state management.

What we've covered:

• What state management libraries are
• An introduction to Pullstate and how to integrate it into your application
• The benefits of Pullstate and how it works

For any more questions don't hesitate to reach out to me on Twitter.

Kevin used HTML, CSS, and JavaScript to create the markup, style the card, and implement the mouse tracking functionality, respectively.

In this tutorial, we'll take a look at how to replicate the same project in React Native. We'll write pure HTML markup and use the react-native-render-html library to render it all into 100% native views.

This how our tilted cards will look by the end of this tutorial:

Feeling excited? Let's begin!

Prerequisites

To follow this tutorial, you'll need to have a good understanding of HTML. Knowledge of JavaScript and React Native is helpful but not necessary.

To follow this tutorial locally, on your computer, you need to have the following installed:

• Node.js v10 or above

• Xcode or Android Studio (set up to run the emulator)

• React Native CLI

For step-by-step instructions on how to set up your React Native development environment, you can read the official documentation.

Alternatively, if you don't have the time or resources to set it up from scratch, use Expo Snack. This is a browser-based environment that lets you create React Native projects without needing to install anything.

Skip the Project Setup section if you're following this tutorial from Expo Snack. Otherwise proceed.

Project Setup

Run this command to install the React Native CLI tool using npm:

npm install -g react-native-cli

Initialize a new project:

react-native init my-app

Start your emulator:

cd my-app && npx react-native run-ios // Start the iOS simulator

// OR

cd my-app && npx react-native run-android // Android the android emulator

These commands should have the simulator show up on the screen like this:

Afterward, cd into your application folder on the terminal and run the following command to install React Native HTML Renderer:

npm i react-native-render-html

That's all for installations. Let's get started with the code.

How to Set Up the App

In this section, we'll import the React, useWindowDimensions, and RenderHtml, which we'll use create the layout of our application.

Open the App.js file in your project and clear the file content. Then start by importing the following:

import * as React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

The useWindowDimentions hook allow us to access the dimensions of the viewport, which is how we're going to make the content responsive across all screen sizes. We'll use RenderHtml to render pure HTML markup into native views in our React Native application.

If you're following this tutorial on Expo Snack, you'll be asked to add the react-native-render-html package by clicking on Add dependency link at the page bottom. Click it.

Next, include the following code beneath the imports:

const source = {
  html: `
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
  <span class="token property">display:</span></span> <span>grid;</span>
<span class="token punctuation">}</span></code></pre>`
};

As a value of the html property, we pass the HTML markup for the code block. It's pre-formatted content, so don't format the code (or it'll break). Just copy the code as it is and paste in your file.

Next, create App() as a functional component and a base stylesheet for the application. Return <RenderHTML /> and pass in both the pre-formatted code and stylesheet to the source and baseStyles, respectively:

export default function App() {  
  const { height, width } = useWindowDimensions();

  const base = {
    height: height,
    width: width,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'hsl(224, 32%, 12%)', 
    color: 'white'
  }

  return (  
      <RenderHtml      
      contentWidth={width}
      source={source}      
      baseStyle={base}      
      />
  );
}

On line 2, we access the height and width of the viewing device from the useWindowsDimensions() call. We then set the height and width of the root element to that of the screen, align the content to the center, set the background color to dark-blue, and the text color to white.

Save the file. You should find a UI that looks like the image below:

Next up is styling the code block.

How to Style the <pre> Code

In this section, we'll place the pre-formatted code inside a card, tilt the card, and apply different colors to the code to make it appear like real CSS code.

1. How to put the code in a card

All of the stylesheets for our HTML markup will go inside the htmlStyles object. The first property of htmlStyles is the stylesheet for the <pre> element:

const htmlStyles = { 
  pre: {
    fontSize: '18px',
    fontWeight: 'bold',
    backgroundColor: 'hsl(222, 45%, 7%)',
    padding: '10px',
    borderRadius: '5px',    
    transform: [
      { perspective: 5000 },
      { rotateX: '8deg'},
      { rotateY: '20deg'},
      { skewX: '8deg'},
    ],
  },  
}

This adds a dark-blue background around the code, rounds the box edges, increases the font size and weight of the code, and adds some padding between the box and the code.

With transform, we rotate the card 8 degree around the x-axis and 20 degrees along the y-axis, tilting the card a little bit.

We also set perspective to 5000 to set a significant distance between the user and the card (which makes it more realistic).

To see this in effect, you need to add the tagsStyles property to <RenderHTML /> and pass htmlStyles as its value, like so:

<RenderHtml      
  contentWidth={width}
  source={source}      
  baseStyle={base}
  tagsStyles={htmlStyles}      
/>

Save the file and go over to your device/emulator to see the effect:

Next, we style the text by adding different colors to it.

2. How to style the code

We don't want all of the code to be white. Instead, we want the .selector to be pink, the .property greenish-blue and the rest white. We'll add some extra CSS to get these colors.

Recall that each <span> element within <pre> had a class name of either .selector, .property or .punctuation. With react-native-render-html, we can't use the class selector to target elements, so this will not work:

.selector {
    color: 'hsl(338, 70%, 65%)'
}

We'll have to define the CSS code directly on the respective HTML tags with the inline style property. So for the <span> element with the class name selector, apply the pink color like so:

style="color: hsl(338, 70%, 65%);

As for the <span> element with class name of property, apply a greenish-blue color to it:

style="color: hsl(183, 70%, 62%);

Next, we'll add some glow to the text. To do this, we'll use the React Native versions of the text-shadow property and we'll apply it to the <span> elements (add inside the htmlStyles object):

 span: {
    textShadowColor: 'currentColor',
    textShadowOffset: {width: -0.5, height: 0.5},
    textShadowRadius: 4
  },

By setting textShadowColor to currentColor, we're telling React Native to use the same color of each text as shadow color, so the selector will have a pink glow and the property will have a greenish-blue glow.

Here's the result:

Now we're done with styling the code. In the next section, we'll turn the card into a 3D element.

How to Make the Card 3D and Add Different Layers

In this section, we'll add a second layer to the card and transform the card into a 3D object. The second box will be an image gradient containing the colors blue and red.

In the source object, underneath the <pre /> tag, create an <img> element and point its src to the image above (upload the image to a place like Dropbox and get the URL):

<img src="put-the-url-to-your-image-here"/>

Next, add the following stylesheet to the htmlStyles object:

  img: {    
    top: -95,
    right: 7, 
    zIndex: -10,   
    height: 95,
    width: 216,    
    borderRadius: '5px', 
    overflow: 'hidden',   
   transform: [
      { perspective: 5000 },
      { rotateX: '8deg'},
      { rotateY: '20deg'},
      { skewX: '8deg'},
    ],
  }

The above stylesheet basically overlaps the image with the code block (top and right), places the image behind the code block (z-index), makes the image the same size as the code block (height and width) and the same shape as well (transform).

Here's the final look of our application:

To straighten the button, you simply reset the value of rotateX and rotateY to 0 for both the <img> and the <pre> element:

Grab the full source code from here.

Conclusion

In this tutorial, we took a tilted 3D card made with HTML and CSS and replicated it in React Native.

To achieve this, we used react-native-html-renderer to render HTML to React Native elements, and React Native specific properties to style the elements.

I hope you enjoyed following this tutorial as I did making it. You can give feedback on this article or discuss opportunities with me on Twitter.

Responsive layouts also give the user a more consistent and unified look across all devices and platforms, while still making sure the user's experience is tailored to their device.

This helps create a more user-friendly experience and improves the overall usability of the website or application.

In this tutorial, I'll show you how to create a simple responsive layout in React Native. You can preview the demo here.

Requirements

To follow this tutorial, you'll need:

• A basic understanding of React Native

• Expo Snack – a browser-based development environment for React Native

How to Create a Responsive Layout

Go to Expo Snack and clear the content of App.js. Start by importing the React library and Text, View, and Stylesheet UI components:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

React Native is based on React, so we need to import the React library explicitly. The Text component is used to create text, View is a container element used for grouping other elements, and StyleSheet is used to define the components stylesheet.

Next, define an App function and return two custom components, <Header /> and <Footer />:

export default function App() {
  return (
    <View style={styles.container}>
      <Header />
      <Boxes />
    </View>
  );
}

Here we wrap <Header /> and <Footer /> inside a <View /> container. Both of them are custom components, and because they haven't been created yet, you'll get a ReferenceError. Ignore that for now.

Next, create the stylesheet for this component and define the styling for the container element:

const styles = StyleSheet.create({
  container: {
    flex: 1,   
  },  
});

This flex:1 value tells the component to fill all available space and to share the space evenly amongst its children.

Let's now create both the <Header> and <Boxes/> components.

How to Create the <Header /> Component

In the components folder, create a new file named Header.js. Then import both the following:

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';

Create a <Header /> function and return a single <View /> with text saying "Header Component":

export default function Header() {
  return (
    <View style={styles.header}>
      <Text>Header Component</Text>
    </View>
  );
}

The <View /> is linked to a style property of header. Keep in mind that we want to make this header responsive on all screen sizes. Let's do that using CSS.

const styles = StyleSheet.create({
  header: {
    width: "100%",
    height: "15%",
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'grey'    
  },
});

With this stylesheet, we're specifying that, no matter how big or small the screen, the header should span the whole width of the screen (100%) and take only 15% of the screen's height.

Now to the boxes.

How to Create the <Boxes /> Component

Below the header we want to place two boxes, one to the left and one to the right. We also want the boxes to take up a certain width and height based on the screen dimension of the target device.

Inside the components folder, create a new file named boxes.js. Start by importing the following:

import * as React from 'react';
import { Text, View, StyleSheet} from 'react-native';

Next, create a Boxes function and return the markup for the boxes:

export default function Boxes() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <View style={styles.inner}>
          <Text>Box 1</Text>
        </View>                      
      </View>
      <View style={styles.box}>
        <View style={styles.inner}>
          <Text>Box 2</Text>
        </View>                      
      </View>
    </View>
  );
}

Here we have two boxes placed inside the container. Inside both is a View element containing the text label for each box.

Next, define the styling for the component. We'll create three sets of styles, one for the box container, one for the inner wrapper and the last for the boxes themselves.

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "85%",
    alignItems: "center",
    flexDirection: 'row',
    flexWrap: 'wrap'    
  },
  box: {
    width: "50%",
    height: "50%",
    padding: 5
  },
  inner: {
    flex: 1,
    backgroundColor: "#D3D3D3",
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Recall that the header takes up 15% of the screen's height. Therefore, with the above CSS, we specify that the box container should take up the remaining 85%.

We align the boxes to the center and place them in a row arrangement. Each box takes up 50% of the total height and width, and we apply padding of 5 to space them a bit.

Now that we have both the responsive Header and Boxes ready, let's import them to App.js and see the results.

How to Import <Header /> and <Boxes />

Inside App.js, at the top of the file, import both <Header /> and <Boxes /> like so:

import Header from "./components/Header"
import Boxes from "./components/Boxes"

Once the app compiles, you should see your responsive layout on the right side of your window looking like this:

Final look of responsive layout

This arrangement will be consistent across all screen sizes because we used percentages to set the height and width instead of fixed width values.

Conclusion

I hope this tutorial helped you understand React Native positioning better. You should now be able to create responsive layouts in your React Native app using the techniques we covered in this post.

Grab my FREE freelance writing checklist here. Have a great week!

A calculator application is a simple application that is always available on every Android, iOS, and desktop device.

In this article, we will build a calculator application using React Native and Expo. So why are we using these tools?

React Native is a JavaScript-based framework you can use to develop mobile applications on two operating systems at the same time – Android and iOS. React Native was first launched in 2015 by Facebook, and is open source.

You can find out more information about React Native here.

Expo is a set of tools, libraries, and services that you can use to simplify your React Native code. So you can run React Native apps on the Expo emulator.

You can find out more information about Expo here.

Before we start making a calculator application, you'll first need to install Node.js, React Native, and Expo on your computer.

Prerequisites

1. Install Node.js – you can see how to install it here.
2. Install React Native – you can see the installation documentation here.
3. Install Expo – you can see the installation documentation here.

Step 1: Create a New Project

The first step is to create a new project. Use the Expo CLI to create the React Native code base with the following command:

$ expo init calculator-app

Then you'll have the choice of starting the project you want. Here we choose the blank option and use JavaScript as below:

choose template expo project

After that, the process will continue by downloading all the dependencies.

Step 2: Create the Button Component

When you're developing applications using React Native, make sure you break down UI components into smaller components so that the code you create can be reusable.

First, create a new folder called “components” to store your component code. The first component we will create is a Button, so create a new file called Button.js. Here is the source code for the Button component:

import { Dimensions, StyleSheet, Text, TouchableOpacity } from "react-native";

export default ({ onPress, text, size, theme }) => {
  const buttonStyles = [styles.button];
  const textStyles = [styles.text];

  if (size === "double") {
    buttonStyles.push(styles.buttonDouble);
  }

  if (theme === "secondary") {
    buttonStyles.push(styles.buttonSecondary);
    textStyles.push(styles.textSecondary);
  } else if (theme === "accent") {
    buttonStyles.push(styles.buttonAccent);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>{text}</Text>
    </TouchableOpacity>
  );
};

Code explanation:

• In line 3, there are four props that we need in order to make this Button component: onPress, text, size and theme.
• Each of the props has a function like onPress for handling actions on buttons.
• The button component that we created has 2 types of themes, secondary and accent, and 1 size, double.
• The button component uses the default React Native component, TouchableOpacity.

After we make the code from the component, don’t forget to add the styling for this button component. Here is the code for the component's styling:

// set dimmenstion
const screen = Dimensions.get("window");
const buttonWidth = screen.width / 4;

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#333333",
    flex: 1,
    height: Math.floor(buttonWidth - 10),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Math.floor(buttonWidth),
    margin: 5,
  },
  text: {
    color: "#fff",
    fontSize: 24,
  },
  textSecondary: {
    color: "#060606",
  },
  buttonDouble: {
    width: screen.width / 2 - 10,
    flex: 0,
    alignItems: "flex-start",
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#a6a6a6",
  },
  buttonAccent: {
    backgroundColor: "#ffc107",
  },
});

So the complete code of our button component is as follows:

import { Dimensions, StyleSheet, Text, TouchableOpacity } from "react-native";

export default ({ onPress, text, size, theme }) => {
  const buttonStyles = [styles.button];
  const textStyles = [styles.text];

  if (size === "double") {
    buttonStyles.push(styles.buttonDouble);
  }

  if (theme === "secondary") {
    buttonStyles.push(styles.buttonSecondary);
    textStyles.push(styles.textSecondary);
  } else if (theme === "accent") {
    buttonStyles.push(styles.buttonAccent);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>{text}</Text>
    </TouchableOpacity>
  );
};

// set dimmenstion
const screen = Dimensions.get("window");
const buttonWidth = screen.width / 4;

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#333333",
    flex: 1,
    height: Math.floor(buttonWidth - 10),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Math.floor(buttonWidth),
    margin: 5,
  },
  text: {
    color: "#fff",
    fontSize: 24,
  },
  textSecondary: {
    color: "#060606",
  },
  buttonDouble: {
    width: screen.width / 2 - 10,
    flex: 0,
    alignItems: "flex-start",
    paddingLeft: 40,
  },
  buttonSecondary: {
    backgroundColor: "#a6a6a6",
  },
  buttonAccent: {
    backgroundColor: "#ffc107",
  },
});

Step 3: Create the Row Component

The next component that we will create is a Row component. This component is useful for creating rows when we want to process layouts.

Here is the code for the Row component and its styling code:

import { StyleSheet, View } from "react-native";

const Row = ({ children }) => {
  return <View style={styles.container}>{children}</View>;
};

// create styles of Row
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
  },
});

export default Row;

Here's what's going on:

• In the row component, there is 1 prop that we need: children.
• The row component uses the default View component from React Native.
• flexDirection: “row” in this styling is used to make the layout a row.

Step 4: Create the Calculator Logic

Create a new folder called util and a new file calculator.js. Here we will create function logic in the calculator application which we will implement later in the App.js file. Here is the complete code:

export const initialState = {
  currentValue: "0",
  operator: null,
  previousValue: null,
};

export const handleNumber = (value, state) => {
  if (state.currentValue === "0") {
    return { currentValue: `${value}` };
  }

  return {
    currentValue: `${state.currentValue}${value}`,
  };
};

const handleEqual = (state) => {
  const { currentValue, previousValue, operator } = state;

  const current = parseFloat(currentValue);
  const previous = parseFloat(previousValue);
  const resetState = { operator: null, previousValue: null };

  switch (operator) {
    case "+":
      return {
        currentValue: `${previous + current}`,
        ...resetState,
      };
    case "-":
      return {
        currentValue: `${previous - current}`,
        ...resetState,
      };
    case "*":
      return {
        currentValue: `${previous * current}`,
        ...resetState,
      };
    case "/":
      return {
        currentValue: `${previous / current}`,
        ...resetState,
      };

    default:
      return state;
  }
};

// calculator function
const calculator = (type, value, state) => {
  switch (type) {
    case "number":
      return handleNumber(value, state);
    case "clear":
      return initialState;
    case "posneg":
      return {
        currentValue: `${parseFloat(state.currentValue) * -1}`,
      };
    case "percentage":
      return {
        currentValue: `${parseFloat(state.currentValue) * 0.01}`,
      };
    case "operator":
      return {
        operator: value,
        previousValue: state.currentValue,
        currentValue: "0",
      };
    case "equal":
      return handleEqual(state);
    default:
      return state;
  }
};

export default calculator;

And here's what's going on:

• initialState is used to give the default value to our calculator app.
• The function handleNumber serves to return the value of the calculator, and has 2 props – value and state.
• The function handle Equal serves to process the set value of each mathematical operator and returns its value.
• The function calculator validates every given operator. For example, if the number calls the handleNumber function, if it is clear it will return the default state value from initiaState, and so on.

Step 5: Refactor the App.js File

After we have created all the components and the logic process, the next step is to make adjustments to the code in the App.js file. Here is the full code:

import React, { Component } from "react";
import { SafeAreaView, StyleSheet, Text, View } from "react-native";
import Button from "./components/Button";
import Row from "./components/Row";
import calculator, { initialState } from "./util/calculator";

// create class component of App
export default class App extends Component {
  state = initialState;

  // handle tap method
  HandleTap = (type, value) => {
    this.setState((state) => calculator(type, value, state));
  };

  // render method
  render() {
    return (
      <View style={styles.container}>
        {/* Status bae here */}
        <SafeAreaView>
          <Text style={styles.value}>
            {parseFloat(this.state.currentValue).toLocaleString()}
          </Text>

          {/* Do create componentRow */}
          <Row>
            <Button
              text="C"
              theme="secondary"
              onPress={() => this.HandleTap("clear")}
            />

            <Button
              text="+/-"
              theme="secondary"
              onPress={() => this.HandleTap("posneg")}
            />

            <Button
              text="%"
              theme="secondary"
              onPress={() => this.HandleTap("percentage")}
            />

            <Button
              text="/"
              theme="accent"
              onPress={() => this.HandleTap("operator", "/")}
            />
          </Row>

          {/* Number */}
          <Row>
            <Button text="7" onPress={() => this.HandleTap("number", 7)} />
            <Button text="8" onPress={() => this.HandleTap("number", 8)} />
            <Button text="9" onPress={() => this.HandleTap("number", 9)} />
            <Button
              text="X"
              theme="accent"
              onPress={() => this.HandleTap("operator", "*")}
            />
          </Row>

          <Row>
            <Button text="5" onPress={() => this.HandleTap("number", 5)} />
            <Button text="6" onPress={() => this.HandleTap("number", 6)} />
            <Button text="7" onPress={() => this.HandleTap("number", 7)} />
            <Button
              text="-"
              theme="accent"
              onPress={() => this.HandleTap("operator", "-")}
            />
          </Row>

          <Row>
            <Button text="1" onPress={() => this.HandleTap("number", 1)} />
            <Button text="2" onPress={() => this.HandleTap("number", 2)} />
            <Button text="3" onPress={() => this.HandleTap("number", 3)} />
            <Button
              text="+"
              theme="accent"
              onPress={() => this.HandleTap("operator", "+")}
            />
          </Row>

          <Row>
            <Button text="0" onPress={() => this.HandleTap("number", 0)} />
            <Button text="." onPress={() => this.HandleTap("number", ".")} />
            <Button
              text="="
              theme="primary"
              onPress={() => this.HandleTap("equal", "=")}
            />
          </Row>
        </SafeAreaView>
      </View>
    );
  }
}

// create styles of app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#202020",
    justifyContent: "flex-end",
  },
  value: {
    color: "#fff",
    fontSize: 42,
    textAlign: "right",
    marginRight: 20,
    marginBottom: 10,
  },
});

A few quick notes:

• handleTap is a function that we created which aims to provide state values and call utils/calculator.
• Here we call two components, Button and Row, to design the appearance of the calculator such as its numbers, mathematical operations, and the calculation process.

Step 6: Run the App

In this step we will try to run the calculator application on the device or we can use an emulator. Here I use the iPhone simulator from MacOS. Run the command below to run the program:

$ yarn ios

The running process here uses Expo as shown below:

If the compiling process is complete, then the display of the calculator application that we programmed will be like this:

Conclusion

That’s enough for this article. You learned about styling, components, props, and states in React Native and built a functional calculator app.

If you need the full source code, you can visit my GitHub repository here: https://github.com/bangadam/calculator-app

Thanks For Reading!

Available for a new project! Let’s have a talk.
Email: bangadam.dev@gmail.com
Linkedin: https://www.linkedin.com/in/bangadam

If you're new to the world of web and mobile development, you might be wondering the same thing.

As a newbie, it's easy to assume that React.js are React Native are the same. After all, they both have "React" as part of their name.

Though React.js and React Native share a lot in common, they're different from each other. In this article, I'll explain both React.js and React Native, then I'll list out their similarities and differences. By the end of this article, you'll have a clear knowledge of both tools and what kind of app they're used to build.

In order to have a clear understanding of the difference between React.js and React Native, we have to first dive into how a website is rendered on a web browser.

How Websites Get Rendered: HTML, CSS, and JavaScript

When you type the URL of a website into your browser's address bar and click enter, the browser requests the website, and the web server sends an HTML file to the browser.

The HTML file contains the content of the webpage and the linked files such as images, videos, and stylesheets. The web browser parses the HTML file and builds a Document Object Model (DOM) which is a tree-like structure containing the elements of the page (for example, buttons, paragraphs, links, and so on).

The browser initiates requests for the linked files and downloads them to the computer. It then parses the linked files, such as CSS and JavaScript, and applies the styling to the content, making it more presentable to the user. After all the files are downloaded, the browser renders the content on the screen.

The browser also runs any JavaScript code to make the page interactive. So, for example, if the user fills the wrong information in a form, JavaScript can be used to insert a <div> element into the page showing an error message to the user.

However, one of the biggest problems of inserting elements into the DOM with JavaScript is that the code is not reusable. For example, if you want to insert the same button into the page, but with different background colors, you have to create the element twice in JavaScript:

let blueBtn = document.createElement("button").style.backgroundColor("blue")
let redBtn = document.createElement("button").style.backgroundColor("red")

// Insert blue and red button into the page

This is just a simple example. With complex user interfaces, you can imagine how long and confusing things can become. React was developed to solve this problem by making the process of creating web apps much more organized and intuitive.

What is React.js?

Technically speaking, ReactJS is an open-source, front-end JavaScript library for building user interfaces or UI components. In simple terms, this means that you can use React to build all the parts of a website that the user can see and interact with on their browser window.

So what's the difference between using plain JavaScript and React? Well, React makes the process of designing the user interface much easier. It allows you to create elements that you can easily re-use in other parts of the website or app.

With JavaScript, I previously mentioned how you'll need to write the same code twice to create the same button with different colors, which could lead to complexity in large projects.

React's component architecture solves this problem brilliantly. With React, you define a single piece of the UI, say a button, as a component.

const Button (props) => {
    return (
        <div>
            <button style={props.color}>Submit</button>
        </div>
    )
}

The component in this case is a function that returns HTML-like syntax called JSX, which defines the presentation and look of the component on the web browser.

Now, say you want to use the same button (but with different colors) in multiple places on your website. Instead of creating each button from scratch with different color properties (as you would with JavaScript), with React, you simple use the same <Button> element and pass a different color to each of them as props, creating variations of the same button.

<Button color="red" />
<Button color="blue" />
<Button color="green" />

This method keeps everything simple and organized, which is the whole essence of the React.js library.

Another benefit of using React for UI development is separation of concerns. This means that the data used in a component exists separately from the logic, which exists separately from the view layer.

Here's an example:

const Button (props) => {
    // component data
    const [btnText, setBtnText] = useState("Submit")

    // component logic
    function onClick() {
        setBtnText("Submitted!")
    }

    return (
        // component view
        <div>
            <button style={props.color}>{btnText}</button>
        </div>
    )
}

As you can see here, the state, logic and presentation of a component are all separate from each other, making React UI components easier to understand and compose.

To conclude, React is a JavaScript library designed to simplify the process to building the frontend of web applications.

What is React Native?

Here's the main difference between ReactJS and React Native:

• React JS is used to build the user interface of web applications (that is, apps that run on a web browser)

• React Native is used to build applications that run on both iOS and Android devices (that is, cross-platform mobile applications)

• React uses HTML, CSS and JavaScript to create interactive user interfaces. React Native, on the other hand, uses native UI components and APIs to create mobile apps.

Both React JS and React Native share the same syntax. React Native was created as a way for developers to build cross-platform mobile applications using their existing knowledge of web development tools like HTML, CSS, JavaScript and the React core library.

In fact, some of the libraries commonly used together with React to develop web applications also have a mobile version for building apps in React Native – for example, Axios, Bootstrap CSS, and Tailwind CSS.

Here are the things React DOM and React Native have in common:

1. They both use the same core React library.

2. They both use the same component-based architecture, which means that developers can break down their applications into smaller, more manageable pieces.

3. They both use JavaScript as their programming language, and JSX as their templating language.

4. Both React DOM and React Native use virtual DOMs to render their applications.

5. Both React DOM and React Native also use the same styling techniques and components, through React Native's is a bit different.

6. They both utilize Chrome DevTools for debugging applications.

7. They use the same JavaScript APIs.

8. Both were developed in Meta. React was developed by a software engineer named Jordan Walke while React Native was born from a hackathon.

Conclusion

This article explored the differences between React DOM and React Native, two popular JavaScript tools. React DOM is primarily used for web development, while React Native is used for mobile development.

React DOM uses HTML, CSS, and JavaScript for layout and styling, and allows developers to create interactive user interfaces. React Native, on the other hand, uses native UI components and APIs to create cross-platform mobile applications.

Thanks for reading. Grab my FREE freelance writing checklist here.