Forem: Angel Umeh

Responsive Space Tourism App with React Native: What I Built & What I Learned

Angel Umeh — Fri, 22 Aug 2025 15:29:50 +0000

Overview
About the Project
- Goals
- Tools & Stack
- Features
- Links & Demo
What I learned
- More React Native Components
- State Management with useRef
- Data Persistence with AsyncStorage
- Improved Animations & Gestures
- Challenges
Final Thoughts

Overview

For my second swim in React Native development, I tackled a Frontend Mentor challenge to build a space tourism app.

This was my second project built with React Native & Expo, and is the second project in my 60-day React Native challenge.

About the Project

Goals

Build my second React Native cross-platform app
Build on and advance in styling in React Native & writing CSS-in-JS
Implement improved interactivity in my app
Learn about & implement data persistence with AsyncStorage

Tools & Stack

React Native + Expo
React Native Animated API
TypeScript
AsyncStorage
Route management with Expo Router

I primarily used Expo Router for navigation, though React Navigation could also have been a fit. I chose Expo Router for its file-based simplicity.

Features

This is an interactive space tourism introduction. Users can:

View each page
Toggle between the tabs to see new information
View the optimal layout for each of the website's pages depending on their device's screen size
See hover states for all interactive elements on the page. On native devices, “hover states” translate to touch feedback rather than mouse hover.
[Extra] Come back to their last viewed sections on each page

Links & Demo

You can find the app here:

This live link is the web export of the React Native app via Expo, deployed on Netlify.

Some snippets:

Mobile Screenshots:

Desktop Screenshots:

What I learned

More React Native Components

I discovered more React Native components in this project, a little further removed from web development this time.

<ImageBackground source={getBg()} style={styles.bg} resizeMode="cover">
    <ScrollView contentContainerStyle={styles.content}>
        // Your content here
    </ScrollView>
</ImageBackground>

I learned to use ImageBackground for full-screen background images that adapt to different screen sizes, and ScrollView with contentContainerStyle attribute for better content layout control within scrollable areas.

State Management with React `useRef`

useState remained an important part of my toolbox, managing the animation states, but useRef allowed me to maintain animation values that would update frequently but that don't trigger re-renders.

const slideAnim = useRef(new Animated.Value(50)).current;
const scaleAnim = useRef(new Animated.Value(0.95)).current;

Data Persistence with AsyncStorage

Just like JS localStorage, AsyncStorage allowed me to store and persist user choices like the selected destination or the last viewed crew member.

// Save user selection
await AsyncStorage.setItem('lastDestination', destination.name);

// Load on app startup
const lastDestination = await AsyncStorage.getItem('lastDestination');

Improved Animations & Gestures

I got a much clearer understanding of the anatomy of a typical gesture, thanks to @eveningkid's YouTube tutorials. I was able to progress from single animations to coordinated animation systems. On re-reading the React Native Animated docs, I found methods like sequence(), parallel(), stagger(), and loop(). I mostly used parallel():

Animated.parallel([
    Animated.timing(slideAnim, { toValue: 0, duration: 400 }),
    Animated.timing(scaleAnim, { toValue: 1, duration: 400 })
]).start();

Distinct Responsive Layouts based on screen size

Rather than just scaling elements, I learned to create fundamentally different layouts, where mobile stacks all the page content vertically, while desktop uses a two-column layout, each optimized for their respective interaction patterns.

Challenges Faced

Platform differences: \ I realized that many functions, effects or other behaviors that seem normal on web may not apply on real devices.

menu: {
    backgroundColor: 'rgba(11, 13, 23, 0.15)',
    backdropFilter: 'blur(40px)', // Works in browser, not iOS
}

Gestures: \ Making a functional multi-part gesture required me to properly understand the anatomy of a gesture. @eveningkid's tutorials helped me get that gestures are comprised of a start, a behavior, and a release.

Final Thoughts

I enjoyed building this app. It was quite the challenge, but it helped me flex my layouts muscle.

I also learned to create animation systems for smooth effects, and implement slightly more complicated gestures. Thanks to this project, I learned the anatomy of a gesture, and this will serve as a building block for more complicated ones in the future.

This project is part of my summer side quest.
You can follow me on X & GitHub to keep up with the full challenge.

To-do App with React Native: What I Built & What I Learned

Angel Umeh — Sun, 10 Aug 2025 22:33:46 +0000

What Happens When A Web Developer Discovers Mobile Development?

Let’s see!

Overview

For my first dive into React Native development, I tackled a Frontend Mentor challenge to build a fully-featured to-do app.

This project was my first foray into the world of React Native & Expo, and is the first project in my React Native learning journey.

About the Project

Goals

Build my first React Native cross-platform mobile app
Learn styling in React Native & writing CSS-in-JS
Master fundamentals of mobile UI patterns
Implement animations and interactive gestures

Tools & Stack

React Native + Expo
React Native Animated API
React Native Reanimated library
TypeScript

Features

This is a simple to-do app with all the basic functionality, as well as a few advanced interactions. Users can:

Add tasks
Mark tasks as complete
Delete tasks
Filter tasks: view all, active or completed tasks
Clear all completed tasks in one click
Switch app between light & dark themes
Drag & drop to reorder items

Links & Demo

You can find the app here:

Some snippets:

What I learned

React Native Components

Components are the essential building blocks of React Native apps.
They are analogous to other common elements used in web, Android and iOS app development.

In this project I dealt directly with the following:

View
Text
Button
Image
TextInput
TouchableOpacity
ScrollView
FlatList

Coming from a web development background, it was very interesting to draw the following parallels:

React Native Component	Web Equivalent	Description
`<View>`	non-scrollable `<div>`	A simple box that accepts layout, styling, user controls and accessibility controls, representing its children (however, does not scroll)
`<Text>`	`<p>`, `<span>`	Used for displaying strings of text
`<Button>`	`<button>`	A basic button with native styling (hence it looks different on web vs iOS)
`<Image>`	`<img>`	An element that displays most types of pictures / images
`<TextInput>`	`<input type="text">`	An input item that takes text
`<TouchableOpacity>`	`<button>`	A more customizable button with native touch feedback & accessibility that can nest other content like images
`<ScrollView>`	`<div>`	A simple scrollable box that accepts layout, styling, user controls and accessibility controls, representing its children and rendering all its items at once
`<FlatList>`	`<li>`	A list, with lazy rendering for large datasets.

Styling in React Native - `Stylesheet.create()`

React Native styling felt familiar. Here, CSS must be written in a JavaScript Object that is then passed into the Stylesheet.create() function. Then when any new element is created, the specific style(s) that apply are called in its style attribute. For example:

const styles = Stylesheet.create({
    container1: {
        backgroundColor: #d34a76,
        width: 100,
    },
    container2: {
        backgroundColor: #c23ad4,
        width: 200,
        fontSize: 20,
        color: #38005d,
    }
});

const TestApp = () => {
    return (
        <View style={styles.container1}>
            Hi, I am Container 1.
        </View>
        <View style={styles.container2}>
            Hi, I am Container 2.
        </View>
    );
}

export default TestApp;

Some key differences from web CSS:

Flexbox by default: Every View uses flexbox layout
Column-first: Default flexDirection is column, this makes sense for mobile apps.
No cascading: Styles are scoped to components

State Management with React `useState`

State Management is used to handle data within a component that is expected to change over time - it is like storage, but for React components.

Managing many parts of my todo list required careful consideration and handling of data flow. useState was used to manage the app theme and filter the todo list, while useMemo minimized unnecessary rerenders when filtering large lists.

Using custom fonts

In an Expo project, there are two ways to import and use custom fonts other than the native font or Expo-provided fonts:

Add the font assets to your project and import them, or
Use the expo-google-fonts library - for example, my app uses Josefin Sans, so I installed expo-google-fonts/josefin-sans.
Using linear gradients in Expo
Creating animations in React Native

Animations & Gestures

I implemented two animation systems:

React Native Animated API for simple animations:

const fadeAnim = useRef(new Animated.Value(0)).current;

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

React Native Reanimated library for hold-drag-and-drop gestures

Challenges Faced

Integrating SVG Assets:
All of my icon assets were in SVG format, but React Native doesn't support SVGs out of the box. I had to:

Install react-native-svg and react-native-svg-transformer
Configure Metro bundler to handle SVG files:

config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer');
config.resolver.assetExts = config.resolver.assetExts.filter(ext => ext !== 'svg');
config.resolver.sourceExts.push('svg');

Import SVGs as React components:

import CrossIcon from '../assets/images/icon-cross.svg';

iOS compatibility issues:

I learned to always specify flex or height properties for consistent cross-platform rendering.
Animations:
Making an intuitive drag & drop gesture required that I do:
- Gesture detection: I had to use a long-press to activate it to avoid interfering with the scrolling behavior.
- Position calculations: I had to detect where exactly the dragged item was being placed and do a little math to make sure that it was dropped at the right position.
- Spring motion: I included a small spring motion in order to make it more intuitive - something being picked up should appear to lift up and away from the list (closer to the user).

Final Thoughts

It was fun to experience building mobile apps for the first time.

React Native is very similar to React. The component-based architecture, hooks, and state management patterns all translate directly from my web development experience to mobile development.

Flexbox-by-default and the component system make building responsive mobile UIs more straightforward than I expected.

The animation APIs also opened my eyes to new possibilities for creating engaging, visually appealing and intuitive UXs that improve the "mobile app" feel. There's definitely more to learn before I move on to more complex gestures.

I look forward to more complex projects and making future apps more accessible.

This project is part of my summer side quest. You can follow me on X & GitHub to keep up with the full challenge.

[Boost]

Angel Umeh — Tue, 05 Aug 2025 15:51:48 +0000

Benjamin Daniel

Aug 2 '25

How to Test Your Node.js & Postgres App Using Drizzle & PGlite

#pglite #drizzle #node #vitest

Comments

2 min read

#30DaysofCode September: My journey to DSA Mastery

Angel Umeh — Mon, 30 Sep 2024 20:05:20 +0000

This September, I embarked on a self-imposed 30 Days of Code challenge, a commitment to solve at least two Data Structures and Algorithms (DSA) problems every single day. My goal was to push myself out of my comfort zone, build consistency, and improve my problem-solving skills and programming logic.

I didn’t just stick to one platform — I completed HackerRank’s 30 Days of Code challenge, LeetCode’s 30 Days of JavaScript plan, and also tackled LeetCode’s Top Interview 150 track, a collection of 150 typical interview problems for anyone prepping for a coding interview. Additionally, I took a few lessons on Structy to further strengthen my grasp of DSA concepts.

I solved most problems using JavaScript (except for a few HackerRank problems where JavaScript wasn’t supported, so I used Python instead). To help keep myself accountable, as well as share my progress, I posted the challenges I solved each day on Twitter. You can find them in this quote trail: // Detect dark theme var iframe = document.getElementById('tweet-1840720685099864068-139'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1840720685099864068&theme=dark" }

Data Types, Basic to Advanced

Each day exposed me to different types of data structures and algorithms. I learned to handle

arrays
strings
objects
maps
sets
numbers
booleans, and more.

Some problems involved more complex structures like linked lists and binary trees, while others threw matrices / n-D arrays into the mix, letting me deal in multidimensional spaces.

The diversity of the problems kept me on my toes. The problems on LeetCode’s 30 Days of JavaScript track introduced me to fundamentals like

array transformations
function transformations
closures
classes
JSONs
Promises & time.

LeetCode’s Top Interview 150 track took things a step further, tossing me between problems of varying difficulty and approach. Solving at least one of these each day was invaluable. These problems also challenged me to think more often about optimization and how different approaches could drastically affect runtime and memory efficiency.

I also took Structy lessons alongside these challenges to solidify my understanding of key concepts. I learned more efficient ways to handle some data structures, like the sections on linked lists and binary trees. I came to especially appreciate the platform’s dynamic approach to teaching and breaking down problems in a way that makes them easy to digest. It’s a great platform to learn DSA at a very basic level and then translate this understanding to other coding problems I face.

Approaches and Techniques

As the days progressed, I encountered many kinds of solution approaches, problem-solving techniques such as

recursion
two-pointer
hashmap
hashtable
greedy algorithms
binary search
sliding window
dynamic programming
caching (memoization), and more.

I found the two-pointer approach a straightforward yet powerful way to work through problems involving sequences (primarily arrays and strings), by reducing the search space for more efficient solutions. I also used greedy algorithms where I needed to make locally optimal choices at each step.

Sliding window techniques were another eye-opener— initially challenging, but valuable for problems involving subarrays or substrings; problems that required keeping track of a moving range of elements within a sequence. Hashmaps and hashtables are great for key-value pairs in problems involving frequent lookups.

One of the most complex techniques I worked with was dynamic programming. Early on, I found DP quite intimidating due to the difficulty in recognizing overlapping subproblems, but with repeated exposure memoization became my best friend in optimizing recursive calls.

Function Manipulation (feat. Wrappers & Prototypes)

In addition to core DSA problems, I also got the chance to try out more advanced JavaScript concepts. I wrote wrapper functions, learning how to control the flow of my code and extend functionality for specific requirements. I even learned to set timers on functions which allows me handle time-sensitive operations or limit how often certain functions can execute.

Working with prototypes showed me that data types can be manipulated beyond their inbuilt capabilities by creating custom methods. This allowed me to extend the inbuilt functionality of data types like objects and arrays in new ways. I came to appreciate the importance of writing clean, modular code.

I also learned memoization, a technique where you modify a function such that it stores previously called arguments with their results! This is a kind of caching that helps improve performance in problems where there are multiple calls to the same function. I wrote about my Memoize solution that beat 99% (memory) here: Memoize Intutitive Solution beats 99% Memory.

Testing & Optimization

Another thing I started to pay more attention to during this journey was the optimization of my code. After a proper introduction to big-O notation on Structy, I understood the importance of time and space complexity and I learned the optimal technique for most common problems. Toward the end of the HackerRank challenge track, I also learned to test code using classes and to write generics.

Takeaway

By the time I completed the 30 Days of Code challenge, I felt a profound sense of growth. It improved my ability to handle a wide range of problems and deepened my understanding of JavaScript and DSA. More than just solving problems, this month-long journey was a reminder to myself that I really could put in the effort. Seeing the rewards of consistency and discipline, I have been renewed with the mindset to approach any challenge with confidence and a strong toolkit of techniques.

This experience marks a significant milestone in my programming journey. The skills I’ve sharpened over these 30 days will undoubtedly carry forward into my career as a software engineer.

I am proud of me for having put in the effort, and grateful to my friends who cheered me on and offered their support and wisdom throughout the challenge.

Forem: Angel Umeh

Responsive Space Tourism App with React Native: What I Built & What I Learned

Table of Contents

Overview

About the Project

Goals

Tools & Stack

Features

Links & Demo

What I learned

More React Native Components

State Management with React useRef

Data Persistence with AsyncStorage

Improved Animations & Gestures

Distinct Responsive Layouts based on screen size

Challenges Faced

Final Thoughts

To-do App with React Native: What I Built & What I Learned

Overview

About the Project

Goals

Tools & Stack

Features

Links & Demo

What I learned

React Native Components

Styling in React Native - Stylesheet.create()

State Management with React useState

Using custom fonts

Animations & Gestures

Challenges Faced

Final Thoughts

[Boost]

How to Test Your Node.js & Postgres App Using Drizzle & PGlite

#30DaysofCode September: My journey to DSA Mastery

Data Types, Basic to Advanced

Approaches and Techniques

Function Manipulation (feat. Wrappers & Prototypes)

Testing & Optimization

Takeaway

State Management with React `useRef`

Styling in React Native - `Stylesheet.create()`

State Management with React `useState`