<h2>Diving into a Modern React Native Boilerplate with Supabase, React Query, and Emotion Native</h2>
Building mobile applications can often involve a lot of repetitive setup. Boilerplates help alleviate this by providing a pre-configured foundation. This article explores a particularly well-structured React Native boilerplate that leverages some powerful and modern tools: Supabase, React Query, and Emotion Native. It’s built using Expo, making cross-platform development (iOS, Android, and web) a streamlined experience.
Code for this boilerplate
<a href="https://github.com/kleviss/rn-supabase-react-query-emotion-native-boilerplate" target="_blank" rel="noopener nofollow">Link ::: Github - kleviss --&gt;
rn-supabase-react-query-emotion-native-boilerplate</a>
<img src="https://media.daily.dev/image/upload/s--QMKN-s5---/f_auto/v1739121771/ugc/content_46b05157-12af-4536-88f8-8873a77ca945" alt="Screenshot 2025-02-09 at 6.22.45 p.m.">
A Look Under the Hood
This isn’t your average “Hello World” starter kit. It’s designed for real-world applications, with features like:
<ul>
<li>Authentication: Integrated Supabase authentication handles user sign-up, sign-in, and session management.</li>
</ul>
<ul>
<li>
Data Fetching: React Query is used for efficient data fetching, caching, and state management, reducing boilerplate code for API interactions.
</li>
<li>
Styling: Emotion Native provides a flexible and performant way to style components, offering a CSS-in-JS approach.
</li>
<li>
Navigation: Expo Router is used for file-based routing, making navigation intuitive and maintainable.
</li>
<li>
Dark/Light Mode: Built-in support for both dark and light themes, catering to user preferences.
</li>
<li>
TypeScript: The project is built with TypeScript, providing type safety and improved developer experience.
</li>
</ul>
Key Technologies Explained
Let’s break down some of the core technologies:
<ul>
<li>Supabase: This is an open-source Firebase alternative. It provides a Postgres database, authentication, real-time subscriptions, and storage, all accessible through a clean API. The <code>supabase.ts</code> file sets up the Supabase client, configuring it for authentication with AsyncStorage for persistent sessions.</li>
</ul>
<pre><code class="language-1:29:config/supabase.ts">import 'react-native-url-polyfill/auto';

import { AppState } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_APP_URL as string;
const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_API_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseKey, {
 auth: {
 storage: AsyncStorage,
 autoRefreshToken: true,
 persistSession: true,
 detectSessionInUrl: false,
 },
});

if (!supabaseUrl || !supabaseKey) {
 throw new Error('Missing Supabase URL or Supabase Anon Key');
}

AppState.addEventListener('change', (state) =&gt; {
 if (state === 'active') {
 supabase.auth.startAutoRefresh();
 } else {
 supabase.auth.stopAutoRefresh();
 }
});
</code></pre>
<img src="https://media.daily.dev/image/upload/s--Th725ldA--/f_auto/v1739121748/ugc/content_ce651ab5-69ad-4a65-aacb-66b8b5882bf7" alt="Screenshot 2025-02-09 at 6.22.25 p.m.">
<ul>
<li>React Query: This library takes the pain out of data fetching. It handles caching, background updates, and optimistic updates, making your application feel faster and more responsive. The <code>useVehicles</code> hook in <code>supabase.api.ts</code> demonstrates how to fetch data using React Query.</li>
</ul>
<pre><code class="language-10:17:config/supabase.ts">import 'react-native-url-polyfill/auto';

import { AppState } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_APP_URL as string;
const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_API_KEY as string;

export const supabase = createClient(supabaseUrl, supabaseKey, {
 auth: {
 storage: AsyncStorage,
 autoRefreshToken: true,
 persistSession: true,
 detectSessionInUrl: false,
 },
});

if (!supabaseUrl || !supabaseKey) {
 throw new Error('Missing Supabase URL or Supabase Anon Key');
}

AppState.addEventListener('change', (state) =&gt; {
 if (state === 'active') {
 supabase.auth.startAutoRefresh();
 } else {
 supabase.auth.stopAutoRefresh();
 }
});
</code></pre>
<pre><code class="language-10:17:services/supabase.api.ts">import { supabase } from '@/config/supabase';
import { useQuery } from '@tanstack/react-query';

export async function getVehicles() {
 const { data, error } = await supabase.from('Vehicles').select('*');
 if (error) {
 throw error;
 }
 return data;
}

export const useVehicles = () =&gt; {
 return useQuery({
 queryKey: ['vehicles'],
 queryFn: getVehicles,
 });
};
</code></pre>
<ul>
<li>Emotion Native: This styling library allows you to write CSS-in-JS, making styles scoped to your components and dynamic. You can see Emotion in action in many components, such as <code>CarDetailsScreen</code>.</li>
</ul>
<pre><code class="language-69:187:app/(protected)/(screens)/car/[id].tsx">const Content = styled.View({
 padding: 16,
});

const Title = styled.Text(({ theme }) =&gt; ({
 fontSize: 24,
 fontWeight: 'bold',
 marginBottom: 8,
 color: theme.colors.text,
 lineHeight: 32,
}));

const SpecItem = styled.View({
 flex: 1,
 minWidth: '45%',
});
</code></pre>
<ul>
<li>Expo Router: Expo Router brings file-based routing to React Native, similar to Next.js. This means your file structure defines your app’s navigation, making it easy to understand and manage routes. The <code>app</code> directory contains the route structure, with <code>(auth)</code> for protected routes and <code>(public)</code> for unauthenticated routes.</li>
</ul>
<pre><code class="language-73:83:README.md">├── app/ # App directory (Expo Router)
│ ├── (auth)/ # Protected routes
│ ├── (public)/ # Public routes
│ └── _layout.tsx # Root layout
├── assets/ # Static assets
├── components/ # Reusable components
├── hooks/ # Custom hooks
├── services/ # API services
├── styles/ # Global styles
└── types/ # TypeScript types
</code></pre>
Project Structure and Conventions
The project follows a well-defined structure, promoting maintainability:
<ul>
<li>
<code>app/</code>: Contains the application’s routes, organized using Expo Router’s conventions.
</li>
<li>
<code>components/</code>: Reusable components that can be used across the app.
</li>
<li>
<code>hooks/</code>: Custom hooks for common functionality.
</li>
<li>
<code>services/</code>: API services for data fetching.
</li>
<li>
<code>constants/</code>: Stores constants like theme colors and mock data.
</li>
<li>
<code>styles/</code>: Global styles for the app.
</li>
<li>
<code>types/</code>: TypeScript type definitions.
</li>
</ul>
Getting Started
The <code>README.md</code> file provides clear instructions for setting up the project. It highlights the prerequisites (Node.js, yarn/npm, Expo CLI) and the steps to clone the repository, install dependencies, and set up environment variables for Supabase.
Follow the instructions in the <a href="README.md" target="_blank" rel="noopener nofollow">README.md</a> file to get the project running.
Example: Authentication Flow
The <code>sign-in.tsx</code> and <code>sign-up.tsx</code> files showcase the authentication flow using Supabase. The <code>signIn</code> function in <code>sign-in.tsx</code> demonstrates how to authenticate a user with email and password.
<pre><code class="language-1:29:app/(public)/(screens)/sign-in.tsx">async function signIn() {

 setLoading(true);
 setError(null);

 const { error } = await supabase.auth.signInWithPassword({ email, password });
 console.log('error', error);
 if (error) {
 setError(error.message);
 }

 setLoading(false);

}
</code></pre>
The <code>AuthProvider</code> in <code>context/auth.tsx</code> manages the authentication state and makes it available throughout the application.
<pre><code class="language-1:29:app/(public)/(screens)/sign-in.tsx">import { createContext, useContext, useEffect, useState } from 'react';

import { Session } from '@supabase/supabase-js';
import { supabase } from '@/config/supabase';

type AuthContextType = {
 session: Session | null;
 initialized: boolean;
};

const AuthContext = createContext&lt;AuthContextType&gt;({
 session: null,
 initialized: false,
});

export function AuthProvider({ children }: { children: React.ReactNode }) {
 const [session, setSession] = useState&lt;Session | null&gt;(null);
 const [initialized, setInitialized] = useState(false);

 useEffect(() =&gt; {
 // Get initial session
 supabase.auth.getSession().then(({ data: { session } }) =&gt; {
 setSession(session);
 setInitialized(true);
 });

 // debugger;
 // Listen for auth changes
 const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) =&gt; {
 setSession(session);
 });

 return () =&gt; subscription.unsubscribe();
 }, []);

 return (
 &lt;AuthContext.Provider value={{ session, initialized }}&gt;
 {children}
 &lt;/AuthContext.Provider&gt;
 );
}

export const useAuth = () =&gt; {
 const context = useContext(AuthContext);
 if (!context) {
 throw new Error('useAuth must be used within an AuthProvider');
 }
 return context;
};

</code></pre>
Conclusion
This boilerplate provides a robust and modern starting point for React Native development. By combining Supabase, React Query, Emotion Native, and Expo Router, it offers a powerful and efficient development experience. The clear project structure and comprehensive <code>README.md</code> make it easy to get started and build upon. It’s a great example of how to leverage these technologies to create scalable and maintainable mobile applications.

A Modern React Native Boilerplate with Supabase, React Query, and Emotion Native