Forem: Sachin Rupani

Designing a Scalable React Native + Expo Router Folder Structure

Sachin Rupani — Sun, 08 Feb 2026 11:03:21 +0000

Over the years, one lesson has repeated itself across teams and products:

Your folder structure is not about aesthetics — it’s about decision-making at scale.

Recently, I’ve been working on a React Native app using Expo + Expo Router, and I want to share a structure that has worked exceptionally well for large, long-lived apps.

This post is meant to share insights with the dev community, especially folks building apps that go beyond MVPs.

Note: All the below folders will reside in src/ folder at the highest level.

src/

└── 📁src
    └── 📁app
    └── 📁components
    └── 📁config
    └── 📁hooks
    └── 📁lib
    └── 📁providers
    └── 📁screens  
    └── 📁utils

🧭 app/ — Routing as a First-Class Citizen

Expo Router shines when routes reflect user flow, not technical shortcuts.

└── 📁app
    └── 📁(authenticated)
    └── 📁(home-tabs)
    └── 📁(unauthenticated)
    ├── _layout.tsx
    └── index.tsx

Why this works so well:

(unauthenticated)

Login, OTP, onboarding
No tabs, no distractions
Clear boundary for auth guards

(authenticated)

Entry point after login
Handles app-level layouts, redirects, and global state

(home-tabs)

Only the screens that truly belong to bottom tabs
Everything else (modals, flows, detail screens) lives outside tabs

This makes the flow crystal clear:
Unauthenticated → Authenticated → Tab-based home → Non-tab flows
No guessing. No accidental tab nesting. No router spaghetti.

🧱 components/ — Design System, Not Random Reuse

The structure follows Atomic Design, but applied pragmatically:

components/
 ├── atoms
 ├── molecules
 ├── organisms
 └── templates

Key principles:

Atoms → Pure, reusable, testable UI primitives

Molecules → Small compositions with intent

Organisms → Feature-aware UI blocks

Templates → Layout patterns, not screens

This ensures:

UI consistency across the app
Easy refactors when design systems evolve

Components stay reusable without becoming generic junk drawers.

🧠 lib/ — The App’s Brain (Not a Dumping Ground)

Here, lib/ is intentionally structured:

lib/
 ├── auth
 ├── backend
 ├── implementation
 ├── interface
 └── vector-icon

backend/

API clients (Axios / fetch wrappers)
TanStack Query client setup
Server-state hooks
Backend data models
interface / implementation
Clear contracts
Platform-agnostic abstractions
Easy to mock, test, or replace later

Eg.

└── 📁backend
    └── 📁_models
    └── 📁server-state
        └── 📁queries
            ├── useGetThoughtOfDayApi.ts
        ├── query-client.ts
    └── 📁supabase
        ├── supabase-client.ts
        ├── supabase-safe-call.ts
    └── 📁supabase-db
        └── fetch-though-of-day.ts

auth/

Auth state, providers, and boundaries live together
No auth logic leaking into UI

This separation pays off when:

APIs change
You swap backend providers
You test without the network

📱 screens/ — Screens Are Not Routes
A subtle but important distinction.

screens/
 ├── authenticated
 └── unauthenticated

Screens contain UI + screen-level state
Routes (app/) only decide when a screen is shown
This keeps navigation thin and screens testable

Result:

Screens are portable. Routes are declarative.

🧰 utils/, hooks/, providers/ — Supporting the Scale

utils/

Pure logic, zero React dependency
Easy to test, easy to trust

hooks/

App-specific behavior
Not generic utilities disguised as hooks

providers/

Theme, query client, safe area, global app context
Single source of truth for app-wide concerns

🏗️ Why This Structure Scales

Scales across multiple teams
Encourages clear ownership
Reduces cognitive load for new engineers
Supports feature-based growth without rewrites
Works equally well for React Native + Web (Expo)

Most importantly, it reflects how users move through the app, not how the framework works internally.

💡 Final Thought

Frameworks evolve.
Product requirements change.
Teams grow.

A good folder structure doesn’t fight that — it absorbs it. Hope this helps someone designing their next large-scale React Native app. Would love to hear how others are structuring their Expo Router projects 👋

☑️ Pro tip:
Keep screen components lean. Let screens focus on composition and navigation, while individual section components own their state, custom hooks and API or TanStack Query logic close to where it’s used.

Hope this helps anyone designing a production-grade Expo Router app.
Would love to hear how others are structuring their apps 👇

Simple remove transition animation in react native

Sachin Rupani — Sat, 04 Jan 2025 12:37:24 +0000

Hello Devs

Today I would like to share a bit of item remove animation code (translate / scale animation) in react native.

Here's a glimpse of what I've prepared.

Suppose, you have a list of items in your project (very common example, which most of us deal with in our day to day projects).

export interface ItemEntity {
  id: number;
  taskTitle: string;
}

export const sampleItems: Array<ItemEntity> = [
  {
    id: 1,
    taskTitle: "Breakfast",
  },
  {
    id: 2,
    taskTitle: "Lunch",
  },
  {
    id: 3,
    taskTitle: "Sports",
  },
  {
    id: 4,
    taskTitle: "Dinner",
  },
];

And these items populated into a flat list for displaying inside a react native application

// state data items to be populated in flat list
 const [dataItems, setDataItems] = useState<Array<ItemEntity>>(sampleItems);

// Handler function to remove the item (after animation ends)
  const _handleAfterRemovedAction = (givenEntity: ItemEntity) => {
    setDataItems(
      dataItems.filter(
        (itemIterated: ItemEntity) => itemIterated.id !== givenEntity.id,
      ),
    );
  };

// item in a list
const _renderItem = ({item, index}: {item: ItemEntity; index: number}) => {
    return (
      <ListViewItem
        itemEntity={item}
        onTaskCompletedWithAnimation={_handleAfterRemovedAction}
      />
    );
  };

// Flat List component with some styles
<FlatList
      style={stylesToUse.listViewStyle}
      contentContainerStyle={stylesToUse.listViewContentContainerStyle}
      ListHeaderComponent={_renderHeader()}
      data={dataItems}
      keyExtractor={(item: ItemEntity, index: number) =>
        `${item.id}_${item.taskTitle}_${index}`
      }
      renderItem={_renderItem}
      ItemSeparatorComponent={_renderSeparator}
      showsVerticalScrollIndicator={false}
    />

Now, the animation magic happens in our item component on the click of remove button.

Code Snippet

import {Animated} from 'react-native';

 const _removeItemWithAnimation = () => {
    Animated.parallel([
      Animated.timing(translateAnim, {
        // Negative Value: Translate to left, Positive Value: Translate to right
        toValue: -1000,
        duration: 800,
        useNativeDriver: true,
      }),
    ]).start(() => { /** on end of animation, this block executes, handle your removal logic */});
  };

Full code

ListViewItem.tsx

import {Animated, Text, TouchableOpacity, View} from 'react-native';
import {ItemEntity} from '../../data/ItemEntity';
import {listViewItemStyles} from './styles/ListViewItem.styles';

export type PropsListViewItem = {
  itemEntity: ItemEntity;
  onTaskCompletedWithAnimation?: (givenItem: ItemEntity) => void;
};

export const ListViewItem = ({
  itemEntity,
  onTaskCompletedWithAnimation,
}: PropsListViewItem) => {
  const stylesToUse = listViewItemStyles;

  const translateAnim = new Animated.Value(0); // Initial position

  // trigger remove animation
  const _removeItemWithAnimation = () => {
    Animated.parallel([
      Animated.timing(translateAnim, {
        // Negative Value: Translate to left, Positive Value: Translate to right
        toValue: -1000,
        duration: 800,
        useNativeDriver: true,
      }),
    ]).start(() => onTaskCompletedWithAnimation?.(itemEntity));
  };

  const _renderTitle = () => {
    return (
      <Text style={stylesToUse.titleTextStyle}>{itemEntity.taskTitle}</Text>
    );
  };

  const _renderRemoveAction = () => {
    return (
      <TouchableOpacity
        style={stylesToUse.deleteButtonContainer}
        onPress={() => {
          _removeItemWithAnimation();
        }}>
        <Text style={stylesToUse.deleteButtonTextStyle}>Remove</Text>
      </TouchableOpacity>
    );
  };

  return (
    <Animated.View
      style={[
        stylesToUse.container,
        {
          transform: [{translateX: translateAnim}]
        },
      ]}>
      <View style={stylesToUse.row}>
        {/* Task Title */}
        {_renderTitle()}

        {/* Remove button */}
        {_renderRemoveAction()}
      </View>
    </Animated.View>
  );
};

ListViewItem.styles.ts

import {StyleSheet} from 'react-native';

export const listViewItemStyles = StyleSheet.create({
  container: {
    backgroundColor: '#e1e1e1',
    borderRadius: 8,
    elevation: 1,
  },

  row: {
    padding: 20,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },

  titleTextStyle: {
    flex: 1,
    fontSize: 16,
    fontWeight: '500',
    color: '#212121',
  },

  deleteButtonContainer: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: '#EF5350',
    borderRadius: 24,
  },

  deleteButtonTextStyle: {
    fontSize: 12,
    color: '#ffffff',
  },
});

The translation removal animation can be relevant in following use cases.

Marking a task as done/incomplete.
Remove an item from the list (we just did)
Archiving an item etc.

BONUS

We can also combine the translate animation with scale animation.

const scaleAnim = new Animated.Value(1); // Initial scale value

  const _removeItemWithAnimation = () => {
    Animated.parallel([
      Animated.timing(translateAnim, {
        // Negative Value: Translate to left, Positive Value: Translate to right
        toValue: -1000,
        duration: 800,
        useNativeDriver: true,
      }),
       Animated.timing(scaleAnim, {
        // toValue 0 indicates the item will shrink to size 0
        toValue: 0,
        duration: 800,
        useNativeDriver: true,
      }),
    ]).start(() => onTaskCompletedWithAnimation?.(itemEntity));
  };

And our animated view (in ListViewItem.tsx)

   <Animated.View
      style={[
        stylesToUse.container,
        {
          transform: [{translateX: translateAnim}, {scale: scaleAnim}], 
        },
      ]}> ...

Play around with duration and toValue to experience yourself.

Or you can just use scale animation and omit translate animation based on your requirement.

Quick Bytes:

Translation - Translation refers to moving of an item from one direction to the other or we can say position of an item changes entirely.
Scale - Item's height/width updates. Either it's enlarged or it shrinks.

Happy coding.