Commencer un nouveau projet

créer répertoire (2):

1. sudo npx create-expo-app@latest --template

• choisi "Blank"

2. supprimer deux fichers:

• change ownership sudo chown -R nick:staff /path/to/your/folder
• /node_modules (à cause de il est npm e non yarn)
• package-lock.json

3. sudo yarn install

lancer application: yarn start

Rename a clone or existing project

1. app.json

{
  "expo": {
    "name": "NewAppName",
    "slug": "new-app-name",
    ...
  }
}

2. package.json

{
  "name": "new-app-name",
  ...
}

3. yarn install

update expo / react packages

npx expo install --fix

you might get a message like this:

The following packages should be updated for best compatibility with the installed expo version:
  @react-native-async-storage/async-storage@2.2.0 - expected version: 2.1.2
  expo-screen-orientation@8.1.6 - expected version: ~8.1.7
  expo-updates@0.28.13 - expected version: ~0.28.17
  react-native@0.79.2 - expected version: 0.79.5
  react-native-gesture-handler@2.25.0 - expected version: ~2.24.0
  react-native-screens@4.10.0 - expected version: ~4.11.1
Your project may not work correctly until you install the expected versions of the packages.

Redux

1. Install yarn add react-redux @reduxjs/toolkit

2. If a reducer state is updated, the entire component importing the state will update.

App.js

//... other imports

import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import user from "./reducers/user";

const store = configureStore({
    reducer: { user }, //<--- ici il est necessaire avoir une reducer>
});

export default function App() {
    return (
        <Provider store={store}>
            <NavigationContainer>
                <Stack.Navigator screenOptions={{ headerShown: false }}>
                    <Stack.Screen name="Home" component={HomeScreen} />
                    <Stack.Screen name="TabNavigator" component={TabNavigator} />
                </Stack.Navigator>
            </NavigationContainer>
        </Provider>
    );
}

reducers/user.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    value: [],
};

export const userSlice = createSlice({
    name: "user",
    initialState,
    reducers: {
        verifieQuiUsersReducerMarcheBien: (state, action) => {
            console.log(`- on est dedans user redux 👀`);
        },
    },
});

export const { verifieQuiUsersReducerMarcheBien } = userSlice.actions;
export default userSlice.reducer;

Use the redux functions

screens/HomeScreen.js

import { useDispatch, useSelector } from "react-redux";
import { verifieQuiUsersReducerMarcheBien } from "../reducers/user";

export default function HomeScreen({ navigation }) {
    const dispatch = useDispatch();

    const handlePress = () => {
        console.log(`cliqué 📣`);
        dispatch(verifieQuiUsersReducerMarcheBien());
        navigation.navigate("TabNavigator");
    };
    return (
        <KeyboardAvoidingView
            style={styles.container}
            behavior={Platform.OS === "ios" ? "padding" : "height"}
        >
            // ... other code
        </KeyboardAvoidingView>
    );
}

utilzer le properté de reducs

• useSelector() la méthode chargée de lire les informations du store
• reducer ici est "friends"

cousin composant qui:

• lui doit lire les informations du store pour pouvoir les afficher components/FriendsDisplay.js

import { useSelector } from "react-redux";

function FriendsDisplay() {
    const friends = useSelector((state) => state.friends.value); //<--- le reducer est "friends"

    return <h1>Friends : {friends.join(" - ")}</h1>;
}

export default FriendsDisplay;

FontAwesome

1. install

yarn add @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg
yarn add @fortawesome/free-solid-svg-icons // <-- for solid
yarn add @fortawesome/free-regular-svg-icons // <-- for regular

2. implementation

import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
export default function Scripting() {
    return <FontAwesomeIcon icon={faCircleXmark} size={32} color="#ff0000" />;
}

.env

• use .env.local
• each variable should have the EXPO_PUBLIC prefix
• example:

EXPO_PUBLIC_API_URL=http://192.168.1.193:3000
EXPO_PUBLIC_EMAIL=nrodrig1@gmail.com
EXPO_PUBLIC_PASSWORD=test

OLD .env

https://github.com/goatandsheep/react-native-dotenv

$ yarn add -D react-native-dotenv

babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            [
                "module:react-native-dotenv",
                {
                    envName: "APP_ENV",
                    moduleName: "@env",
                    path: ".env",
                    safe: false,
                    allowUndefined: true,
                    verbose: false,
                },
            ],
        ],
    };
};

utiliser les variables .env

process.env.API_KEY

Police

• Type: Caveat

1. Telecharger police Google Font Family Caveat
2. (peut-etre pas necessaire)npx react-native-asset
3. App.js - ajouter une useState et useEffect pour charger le police.

import React, { useState, useEffect } from "react";
import * as Font from "expo-font";

export default function App() {
    const [fontsLoaded, setFontsLoaded] = useState(false);
    useEffect(() => {
        async function loadFonts() {
            await Font.loadAsync({
                Caveat: require("./assets/fonts/Caveat-VariableFont_wght.ttf"),
            });
            setFontsLoaded(true);
        }
        loadFonts();
    }, []);

    if (!fontsLoaded) {
        console.log("--- font NOT loaded");
    } else {
        console.log("--- font loaded");
    }

    return <NavigationContainer></NavigationContainer>;
}

4. Pour l'utiliser:

const styles = StyleSheet.create({
    btnText: {
        fontFamily: "Caveat",
        fontSize: 30,
    },
});

Code Structure

import React, { useState, useEffect } from "react";
// import --> Formal Term: Imports

export default function App() {
// logic --> Formal Terms: Component Logic, Component Logic, Hooks and State Management

  return (
    // view --> Formal Terms: JSX Template, UI Rendering
  );
}


const styles = StyleSheet.create({
// Formal Terms: Styles, Styling Definition, StyleSheet
// Styles here a static, defined when component is rendered
  })

SVG

install

yarn add react-native-svg
yarn add --dev react-native-svg-transformer

Create a file called metro.config.js in the root of your project and add the following code:

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

const config = getDefaultConfig(__dirname);

config.transformer = {
    ...config.transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
};

config.resolver = {
    ...config.resolver,
    assetExts: config.resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...config.resolver.sourceExts, "svg"],
};

module.exports = config;

Simulators

iOS

Add video to the active simulator's library

1. determine which devices is running search for "(Booted)" xcrun simctl list devices
2. add the media by running: xcrun simctl addmedia booted /path/to/your/video.mp4