React Native

React Native c’est quoi ?

Organisation de l’app

Export Default Function

terminer.tsx

export default function Terminer() {
    return <WithSmallHeader title="Terminer">
        <ThemedText>Terminer la visite !</ThemedText>
    </WithSmallHeader>
}

Typescript

Pourquoi typescript ?

message.toLowerCase();
message();

Est ce que message a une propriété toLowerCase ?
Est ce que message est appellable ?

Types

const bonjour: string = 'Hello World'

type Texte = string
const bonjour: Texte = 'Hello World'

type Constante = 'Hello World'

type Value = number | string

type Status = 'loading' | 'ready' | 'error'

Plus de types

type User = {
    nom: string,
    prenom: string,
    age: number
}

type UserLong = User & {
    dateNaissance: Date,
    villeNaissance: string
}

Cas pratique

type Status = 'loading' | 'ready' | 'error'

type Result = {
    status: Status,
    data: string
}

const result: Result = {
    status: 'ready',
    data: 'This is data'
}

Problème

type Status = 'loading' | 'ready' | 'error'

type Result = {
    statut: Status,
    data?: string
}

// (property) data?: string | undefined

MAIS !

Types Génériques

type Result<T> = {
    status: Status,
    data: T
}
const resultString: Result<string> = {
    status: 'ready',
    data: 'Bonjour'
}
const resultNumber: Result<number> = {
    status: 'ready',
    data: 20
}

Solution

type Status = 'loading' | 'ready' | 'error'

export type Result<T> = {
    status: 'loading'
} | {
    status: 'ready'
    data: T
} | {
    status: 'error'
    error?: Error
}

React

Composants: JSX

<View>
    <Text>Bonjour</Text>
</View>

Code JS

return <View>
    const name = 'toto'
    <Text>Bonjour, name.toUpperCase() !</Text>
</View>

const name = 'toto'
return <View>
    <Text>Bonjour, {name.toUpperCase()} !</Text>
</View>

Styles

const style = {
    backgroundColor: 'red',
    marginBottom: 20
}

<View style={style}>
</View>

import { StyleSheet } from 'react-native'; // important

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'red',
        marginBottom: 20
    },
    text: {
        color: 'blue'
    }
})

<View style={styles.container}>
    <Text style={styles.text}>Ce texte est bleu sur fond rouge !</Text>
</View>

Hooks

export default function Terminer() {
    return <WithSmallHeader title="Terminer">
        <ThemedText>Terminer visite N° : {params.numVisite}</ThemedText>
    </WithSmallHeader>
}

useLocalSearchParam

import { useLocalSearchParams } from "expo-router"

import { useLocalSearchParams } from "expo-router"

type Params = {
    numVisite: string
}

export default function Terminer() {
    const params = useLocalSearchParams() as Params
    return <WithSmallHeader title="Terminer">
        <ThemedText>Terminer ! numVisite : {params.numVisite}</ThemedText>
    </WithSmallHeader>
}

useState

Comment conserver et faire évoluer l’état de mes données ?
Test-It

import {useState} from 'react'; import {Text, View, Button} from 'react-native';

export default function PressApp() { const [numberPressed, setNumberPressed] = useState(0) return ( <View> <Text>Clicked {numberPressed} times !</Text> <Button title='Press Me !' onPress={() ⇒ setNumberPressed(numberPressed + 1)}/> </View> ); }

Context

Provider

export default function RootLayout() {
  return <SQLite.SQLiteProvider databaseName="its.db">
    <App/>
  </SQLite.SQLiteProvider>
}

Consumer

const db = useSQLiteContext()
await db.runAsync(req)

React Rendering

useEffect

useEffect(() => {
  doSomething(value)
})

useEffect(() => {
  doSomething()
}, [])

useEffect(() => {
  doSomething(value)
}, [value])