✅ 🇬🇧 Mobile Development with React Native

✅ What you need

• Node.js and npm
  • Install Node.js via nvm or official Node.js.
  • Verify the installation with:

node -v
npm -v

C:\\Users\\your_name\\AppData\\Local\\Android\\Sdk

C:\\Users\\your_name\\AppData\\Local\\Android\\Sdk\\platform-tools
C:\\Users\\your_name\\AppData\\Local\\Android\\Sdk\\emulator

• package.json "main": "expo-router/entry" property :
  • For the property main, use the expo-router/entry as its value in the package.json. The initial client file will be the app/_layout.tsx file.
  • Root _layout.tsx : Learn how to use the root _layout.tsx to add global providers to your app when using Expo Router.
    • Traditional React Native projects are structured with a single root component that is often defined in App.tsx or index.tsx. This pattern is often used to inject global providers such as Redux, Themes, Styles, and so on, into the app, and to delay rendering until assets and fonts are loaded.
    • In Expo Router, you can use the Root Layout (app/_layout.tsx) to add providers which can be accessed by any route in the app.
  • If you want to change the entry point, see the Expo documentation : https://docs.expo.dev/router/installation/#quick-start

• babel.config.js for the expo-router/babel plugin
  • Ensure you use babel-preset-expo as the preset, in the babel.config.js file :

  module.exports = function (api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo']
    };
  };

• Expo-router based the navigation on the project's file structure. When a file is created in the app directory, it automatically becomes a route in the app.
  • For example, app/settings/index.tsx matches /settings in the app.

  

• STACK : _layout.tsx
  •  A main navigation with Stack

    import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
    import { useFonts } from 'expo-font';
    import { Stack } from 'expo-router';
    import * as SplashScreen from 'expo-splash-screen';
    import { StatusBar } from 'expo-status-bar';
    import { useEffect } from 'react';
    import 'react-native-reanimated';
    
    import { useColorScheme } from '@/hooks/useColorScheme';
    
    // Prevent the splash screen from auto-hiding before asset loading is complete.
    SplashScreen.preventAutoHideAsync();
    
    export default function RootLayout() {
      const colorScheme = useColorScheme();
      const [loaded] = useFonts({
        SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
      });
    
      useEffect(() => {
        if (loaded) {
          SplashScreen.hideAsync();
        }
      }, [loaded]);
    
      if (!loaded) {
        return null;
      }
    
      return (
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
          <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen name="+not-found" />
          </Stack>
          <StatusBar style="auto" />
        </ThemeProvider>
      );
    }
    

  • You van have multiple <Stack.Screen /> to customize the screen by groups
  • Expo Router uses a stack-based navigation model, where each new route you navigate to is added to a stack.

    

  • La navigation Stack sert à redirigé vers un écran en fonction d’un soumission ou d’action, de validation
    • un historique de navigation se créé comme une pile dans le stack
    • les empilements (la pile = le “stack”) servent à gérer l’historique de navigation dans une application mobile
    • Pourquoi utiliser une pile (stack) ?
      • Parce que dans une application mobile :
        • Tu navigues vers un nouvel écran
        • Puis tu veux pouvoir revenir en arrière
        • Puis parfois, tu veux remonter à un écran précis
        • Et parfois, tu veux remplacer l’écran courant sans garder celui d’avant

        👉 La pile de navigation te permet de conserver la mémoire de ton parcours dans l’app, et de mieux contrôler le comportement du bouton “Retour” ou les transitions naturelles.

        ---

        🔁 Un exemple réel :

        Imaginons un parcours classique dans une app :

        /home → /products → /product/42 → /checkout → /confirmation

        Ce que le système garde en mémoire :

        ['/home', '/products', '/product/42', '/checkout', '/confirmation']

        Quand tu cliques sur “Retour”, tu ne retournes pas à /home directement, tu reviens étape par étape dans l’ordre inverse (comme une pile qu’on dépile).

        Action souhaitée	Utilise	Pourquoi
        Aller à une nouvelle page, pouvoir revenir	router.push()	Empile un écran
        Aller à une page et effacer l’écran précédent	router.replace()	Nettoie la pile
        Revenir d’un écran	router.back()	Dépile
        Revenir à une étape plus ancienne du parcours	router.dismissTo('/route')	Supprime les écrans du dessus
        Afficher un lien dans l’UI	<Link href="/route" />	Navigation déclarative

  • Stack navigation is used to redirect to a screen based on a submission, action, or validation
    • A navigation history is created like a stack
    • Stacks (the “stack”) are used to manage navigation history in a mobile app
    • Why use a stack?
      • Because in a mobile app:
        • You navigate to a new screen
        • Then you want to go back
        • Sometimes, you want to jump back to a specific screen
        • And sometimes, you want to replace the current screen without keeping the previous one

      The navigation stack allows you to keep track of your journey in the app and better control the behavior of the “Back” button or natural transitions.

    ---

    A real example:
    Let’s imagine a typical journey in an app:
    

    /home → /products → /product/42 → /checkout → /confirmation

    What the system remembers:

    ['/home', '/products', '/product/42', '/checkout', '/confirmation']

    When you click “Back”, you don’t go straight back to /home — you return step by step in reverse order (like a stack being popped).

    Desired Action	Use	Why
    Go to a new page, with the ability to go back	router.push()	Pushes a screen onto the stack
    Go to a page and remove the previous one	router.replace()	Cleans the stack
    Go back one screen	router.back()	Pops the stack
    Jump back to a specific earlier screen	router.dismissTo('/route')	Removes screens above it
    Display a link in the UI	<Link href="/route" />	Declarative navigation

• Expo Router is based on the presence of a folder named app. When a file is created in the application's app directory, it automatically becomes an access path.
  • app/index.js corresponds to /
  • app/accueil.js corresponds to /accueil
  • app/preferences/index.js corresponds to /preferences
  • app/[utilisateur].js corresponds to dynamic paths such as /expo or /antoine
  • home page app/index.js

    import { Text } from 'react-native';
    
    export default function Page() {
      return <Text>Home</Text>;
    }

• The first startup file of the project is "index.tsx" and is located in the "app" folder

• In an Expo Router project, the app/index.js file is considered the main page (/).

• In an Expo Router project, .js or .tsx files located in the app/ folder are automatically detected as screens of the application.

• Used with expo-router, which is a navigation solution based on a file-based routing system for React Native applications. (similar to Next.js for the web)

• _layout.tsx encompasses all elements or pages of the application, it serves as a global layout. It encompasses all pages and allows adding common navigation.

• You can have _layout.tsx files in subdirectories to create a structure and hierarchy.

• This name, _layout.tsx, is specific to installation with Expo. In a manual installation, you can use any file names you want.

• In an Expo Router project, the app/index.js file is considered as the main page (/).

• By typing /profile in the Expo browser, you will see the profile page.

app/
 ├── _layout.tsx  <-- This file manages navigation for the entire `app/` folder
 ├── index.tsx    <-- Home page
 ├── profile.tsx  <-- Profile page
 ├── settings.tsx <-- Settings page
 └── about/
       ├── **_layout.tsx** <-- A layout specific to the `about` folder
       ├── index.tsx
       ├── team.tsx

• Here the Layout() function encompasses all pages of the application

• <Stack /> could allow us to give options to a pool of pages and we could have multiple <Stack /> with different options.

import { Stack } from "expo-router";

export default function Layout() {
  return <Stack
    screenOptions={{
      headerShown: false
    }}
  />;
}

• In the "app" folder, you can create a page with a file named "about.tsx", it will be automatically recognized as a page with the /about navigation

In an Expo Router project, each .tsx file in app/ represents a route.

• To navigate between screens, you can use the Link component provided by expo-router.

📂 Expected file structure:

app/
 ├── index.tsx      <-- Route "/"
 ├── about.tsx      <-- Route "/about"
 ├── _layout.tsx    <-- Global layout (optional but recommended)

1. import the class/function “Link” import { Link } from "expo-router";

2. use it : <Link href="/about">About</Link>

// index.tsx

import { Text, View, StyleSheet, TextStyle, ImageStyle } from "react-native";
import { Link } from "expo-router";

export default function Index() {
  return (
    <View style={styles.container}>
      <Text>Edit app/index.tsx to edit this screen.</Text>
      <Link href="/about">About</Link>
      <Text>Application created by Julie.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center" as const, // Adding "as const" to avoid type error
    alignItems: "center" as const,
    backgroundColor: "#cddc39",
  },
});

If you want an about/ subdirectory

If you want /about to be a page in a folder, you need to create a subdirectory about/ with index.tsx inside.

📂 File structure:

app/
 ├── index.tsx        <-- Route "/"
 ├── about/
 │    ├── index.tsx   <-- Route "/about"
 ├── _layout.tsx      <-- Global layout

Customize the link

• asChild : asChild tells <Link>: “Let me handle the appearance of the button. You just pass your navigation behavior to my child.” It forwards its props (like onPress, href, etc.) to its first child (in this case, the <Pressable>)

• <Pressable> is a React Native component that lets you create an interactive element, like a button, a clickable card, etc. You can also respond to different interaction states: pressed, hovered, focused, etc.

<Link href="/" style={styles.link} asChild>
  <Pressable>
    <ThemedText type="link">Return to Home page</ThemedText>
  </Pressable>
</Link>

// When you press on it, background color changes
<Pressable
  onPress={() => console.log('Click')}
  style={({ pressed }) => ({
    backgroundColor: pressed ? 'lightgray' : 'white',
    padding: 12,
    borderRadius: 8,
  })}
>
  <Text>Mon bouton</Text>
</Pressable>

• A page with [id] for instance [id].tsx

<Link href={{pathname: '/path/[id]', params:{id: 3}}}>event 3</Link>

app/
│-- _layout.tsx           ← main navigation
│-- index.tsx             ← home screen
│-- about.tsx             ← "About" screen
│-- events/
│   ├─ index.tsx          ← events list screen
│   └─ [event].tsx           ← detailed event card
│-- register/
│   └─ [event].tsx           ← event registration form
│-- clubs.tsx             ← clubs & leagues registration form

• Creation of basic navigation: app/_layout.tsx

import { Stack } from "expo-router";

export default function Layout() {
  return <Stack />;
}

• Create folder app/events
  • In this folder create file: [event].tsx

  import { View, Text, StyleSheet, Button } from 'react-native';
  import { useLocalSearchParams, Link } from 'expo-router';
  
  export default function EventDetailsScreen() {
    const { event } = useLocalSearchParams();
  
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Event details: {event}</Text>
        <Text style={styles.text}>
          This is the detailed page for event "{event}".
        </Text>
  
        <Link
          href={{ pathname: '/register/[event]', params: { event } }}
          asChild
        >
          <Button title="Register for this event" />
        </Link>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
    },
    title: {
      fontSize: 24,
      fontWeight: 'bold',
      marginBottom: 15,
    },
    text: {
      fontSize: 16,
      marginBottom: 25,
      textAlign: 'center',
    },
  });
  

• Create folder app/register
  • In this folder create file: [event].tsx

  import { View, Text, StyleSheet } from 'react-native';
  import { useLocalSearchParams } from 'expo-router';
  
  export default function RegisterScreen() {
    const { event } = useLocalSearchParams();
  
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Registration for: {event}</Text>
        {/* Here, we will add the registration form */}
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
    },
    title: {
      fontSize: 20,
      fontWeight: 'bold',
      textAlign: 'center',
    },
  });
  

• In app/index.tsx

import { View, Text, StyleSheet, Button } from 'react-native';
import { Link } from 'expo-router';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>🏃‍♀️ Next event: Marathon des Sables</Text>

      <Link
        href={{ pathname: '/events/[event]', params: { event: 'marathon-des-sables' } }}
        asChild
      >
        <Button title="View details" />
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
});

• restart the application with npx expo start

• Create a folder to store a page model that will serve as a template for each record.

• Creation of the "events" folder in the /app directory

• Creation of the "[id].tsx" file in the /app/events directory to generate a dynamic page based on the record's ID, which is the targeted row in the database.

• The file will receive the ID as a parameter, in our example, the event ID

Then we use a hook to retrieve the Event ID:

• it's the useLocalSearchParams() hook.
  • This hook, provided by Expo Router, allows accessing the local URL parameters of a page in a React Native application. For example, if you have a route /event?id=0004&name=Charmander, useLocalSearchParams() allows you to access id=0004 and name=Charmander in your code

import { useLocalSearchParams } from "expo-router";
import { Text, View } from "react-native";

export default function Event() {

    const event = useLocalSearchParams();

    return (
    <View style={styles.container}>
        <Text style={styles.text}>event page with ID: {event.id}</Text>
    </View>
    );
}

Then we create a link to this Event as described here:

• The page with the event id is going to be opened [id].tsx” from the folder /app/events

<Link href={{pathname: '/events/[id]', params:{id: 3}}}>Event 3</Link>

useLocalSearchParams() dans Expo Router sert à récupérer les paramètres dynamiques de l’URL, c’est-à-dire tout ce qui est passé dans les segments dynamiques (comme [slug], [id], [...rest], etc.)

// app/blog/[slug].tsx
import { useLocalSearchParams } from 'expo-router';
import { Text } from 'react-native';

export default function Page() {
  const { slug } = useLocalSearchParams();
  return <Text>{slug}</Text>;
}

@/ corresponds to the project root.

<Image source={require("@/assets/images/pokeball_blanc.png")} width={24} height={24} />

It's configured in tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}

creating a startup screen

Every file and sub-directory inside the app directory is either a _layout file or a route in your app. Other files, such as components, hooks, utilities, and so on, cannot be placed in the app directory because they are neither screens nor layout files.

Expo Router is built on top of React Navigation, which imposes certain restrictions on the naming of screen parameters. As a result, the following words cannot be used as dynamic route parameters in Expo Router:

• screen

• params

• key

• 📁 Create a theme/ folder at the project root. And we create files for styling there.

MARATHON/
		theme/
		│-- foundation/
		│   ├─ colors.ts
		│   ├─ spacing.ts
		│   ├─ typography.ts
		│   └─ foundation.ts   ← single entry point for foundations
		│
		├─ buttons.ts
		├─ form.ts
		├─ text.ts
		└─ index.ts       ← global export of the design system

• colors.ts

export const colors = {
    primary: '#0077cc',
    secondary: '#ff9900',
    background: '#f5f5f5',
    text: '#222222',
    border: '#cccccc',
    white: '#ffffff',
  };

• spacing.ts

export const spacing = {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  };

• typography.ts

import type { TextStyle } from 'react-native';

export const typography = {
    title: {
      fontSize: 22,
      fontWeight: 'bold' as TextStyle['fontWeight'], // as TextStyle['fontWeight'] is used to properly type the expected string style for ts
    },
    subtitle: {
      fontSize: 18,
      fontWeight: '600' as TextStyle['fontWeight'],
    },
    body: {
      fontSize: 16,
    },
  };

• foundation.ts

// theme/foundation.ts
import { colors } from './colors';
import { spacing } from './spacing';
import { typography } from './typography';

export const theme = {
  colors,
  spacing,
  typography,
};

• buttons.ts

import { StyleSheet } from 'react-native';
import { theme } from './foundation/foundation';

export const buttonStyles = StyleSheet.create({
    primary: {
      backgroundColor: theme.colors.primary,
      padding: theme.spacing.md,
      borderRadius: 8,
      alignItems: 'center',
    },
    primaryText: {
      color: theme.colors.white,
      fontSize: theme.typography.body.fontSize,
      fontWeight: 'bold',
    },
  });

• form.ts

import { StyleSheet } from 'react-native';
import { theme } from './foundation/foundation';

export const formStyles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: 8,
    padding: theme.spacing.md,
    fontSize: theme.typography.body.fontSize,
    backgroundColor: theme.colors.white,
    marginBottom: theme.spacing.md,
  },
});

• text.ts

import { StyleSheet } from 'react-native';
import { theme } from './foundation/foundation';

export const textStyles = StyleSheet.create({
  title: {
    ...theme.typography.title,
    color: theme.colors.text,
    marginBottom: theme.spacing.lg,
    textAlign: 'center',
  },
});

• index.ts

export * from './foundation/foundation';
export * from './buttons';
export * from './form';
export * from './text';
export * from './layout';

Updating the use of these styles in screens

app/
│-- _layout.tsx           ← main navigation
│-- index.tsx             ← home screen
│-- about.tsx             ← "About" screen
│-- events/
│   ├─ index.tsx          ← events list screen
│   └─ [event].tsx           ← detailed event card
│-- register/
│   └─ [event].tsx           ← event registration form
│-- clubs.tsx             ← clubs & leagues registration form

• index.tsx

import { View, Text, Button } from 'react-native';
import { Link } from 'expo-router';
import { layoutStyles, textStyles } from '../theme';

export default function HomeScreen() {
  return (
    <View style={layoutStyles.container}>
      <Text style={textStyles.title}>🏃‍♀️ Next event: Marathon des Sables</Text>

      <Link
        href={{ pathname: '/events/[event]', params: { event: 'marathon-des-sables' } }}
        asChild
      >
        <Button title="View details" />
      </Link>
    </View>
  );
}

• events/[event].tsx

import { View, Text, Button, ScrollView, Pressable } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { textStyles, layoutStyles, buttonStyles, theme } from '../../theme';
import { Link } from 'expo-router';

export default function EventDetailsScreen() {
  const { event } = useLocalSearchParams();

  return (
    <ScrollView contentContainerStyle={layoutStyles.scrollContainer}>
      <Text style={textStyles.title}>Event details: {event}</Text>
      <Text style={{ fontSize: theme.typography.body.fontSize, color: theme.colors.text }}>
        Event description coming soon.
      </Text>

      <Link
        href={{ pathname: '/register/[event]', params: { event: 'marathon-des-sables' } }}
        asChild
      >
        <Pressable style={buttonStyles.primary}>
          <Text style={buttonStyles.primaryText}>Register</Text>
        </Pressable>
      </Link>
    </ScrollView>
  );
}

• register/[event].tsx

import { View, Text, TextInput, Button, ScrollView, Alert } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { useState } from 'react';
import { formStyles } from '../../theme/form';
import { textStyles } from '../../theme/text';
import { theme } from '../../theme';

export default function RegisterScreen() {
  const { event } = useLocalSearchParams();

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  const handleSubmit = () => {
    Alert.alert(
      'Registration sent',
      `Thank you ${firstName} ${lastName} for registering for ${event}.`
    );
    setFirstName('');
    setLastName('');
    setEmail('');
    setPhone('');
  };

  return (
    <ScrollView contentContainerStyle={{ padding: theme.spacing.lg }}>
      <Text style={textStyles.title}>Registration for: {event}</Text>

      <TextInput
        style={formStyles.input}
        placeholder="First Name"
        value={firstName}
        onChangeText={setFirstName}
      />
      <TextInput
        style={formStyles.input}
        placeholder="Last Name"
        value={lastName}
        onChangeText={setLastName}
      />
      <TextInput
        style={formStyles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <TextInput
        style={formStyles.input}
        placeholder="Phone"
        value={phone}
        onChangeText={setPhone}
        keyboardType="phone-pad"
      />

      <Button title="Submit registration" onPress={handleSubmit} />
    </ScrollView>
  );
}

import { View, Text, Button, ScrollView, Pressable } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { textStyles, layoutStyles, buttonStyles, theme } from '../../theme';
import { Link } from 'expo-router';

export default function EventDetailsScreen() {
  const { event } = useLocalSearchParams();

  return (
    <ScrollView contentContainerStyle={layoutStyles.scrollContainer}>
      <Text style={textStyles.title}>Event details: {event}</Text>
      <Text style={{ fontSize: theme.typography.body.fontSize, color: theme.colors.text }}>
        Event description coming soon.
      </Text>

      <Link
        href={{ pathname: '/register/[event]', params: { event: 'marathon-des-sables' } }}
        asChild
      >
        <Pressable style={buttonStyles.primary}>
          <Text style={buttonStyles.primaryText}>Register</Text>
        </Pressable>
      </Link>
    </ScrollView>
  );
}

• Creation of the app/about.tsx file

import { View, Text, ScrollView } from 'react-native';
import { layoutStyles, textStyles } from '../theme';

export default function AboutScreen() {
  return (
    <ScrollView contentContainerStyle={layoutStyles.scrollContainer}>
      <Text style={textStyles.title}>À propos de l'organisation</Text>
      <Text style={{ fontSize: 16 }}>
        Nous organisons des marathons et événements sportifs dans différents environnements.
        Le Marathon des Sables est notre événement phare, une course unique sur la côte bordelaise.
      </Text>
    </ScrollView>
  );
}

• Creation of the app/events/index.tsx file

import { View, Text, ScrollView } from 'react-native';
import { layoutStyles, textStyles } from '../../theme';
import { Link } from 'expo-router';

export default function EventsScreen() {
  return (
    <ScrollView contentContainerStyle={layoutStyles.scrollContainer}>
      <Text style={textStyles.title}>Événements à venir</Text>

      <Link href={{ pathname: '/events/[event]', params: { event: 'marathon-des-sables' } }}>
        <Text style={{ fontSize: 16, color: 'blue', textDecorationLine: 'underline' }}>
          Marathon des Sables
        </Text>
      </Link>

      <Text style={textStyles.title}>Événements passés</Text>
      <Text style={{ fontSize: 16 }}>Trail de la Forêt - 2024</Text>
      <Text style={{ fontSize: 16 }}>Course de la Plage - 2023</Text>
    </ScrollView>
  );
}