DEV Community

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on

Comment connecter mon appli Expo (React Native) à mon projet Supabase

Mon premier projet Supabase

Je me rends sur le site de Supabase

Image description

Le reste est easy, y'a qu'à créer un compte...etc... avec Github ca va vite en plus.

Une fois le compte créé, je peux créer un nouveau projet grace au bouton "New project" (quelle surprise! 🫢)

Image description

Moi je l'ai remplis comme ca vu que j'habite en France, si t'habite en Inde tu peux essayer de prendre une région plus proche sinon.

Une fois que le projet est setup, je peux revenir vers mon application Expo (React Native) pour me connecter à Supabase.

Installation de ce qu'il faut coté Expo (React Native)

Dans mon terminal:

npm i @supabase/supabase-js react-native-url-polyfill @react-native-async-storage/async-storage
Enter fullscreen mode Exit fullscreen mode

Dans mon projet Expo(React Native), je créer un fichier supabase.ts:

// supabase.ts
import "react-native-url-polyfill/auto"
import AsyncStorage from "@react-native-async-storage/async-storage"

import { createClient } from "@supabase/supabase-js"

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

export default supabase
Enter fullscreen mode Exit fullscreen mode

Pas de panique, je vais te montrer où se trouvent l'URL et la KEY:

Image description

Juste pour etre sur que tout fonctionne, on va se créer une table factice dans la BDD (base de donnée):

Image description

J'y ajoute un plat (j'ai faim)

Image description

Voyons voir si ton fonctionne, direct dans TabOneScreen.tsx:


export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  async function load_plats() {
    let { data: plats, error } = await supabase.from("plats").select("*")
    console.log(plats, error)
  }

  useEffect(() => {
    load_plats()
  }, [])
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h1">Connexion</Text>
      <Button
        accessoryLeft={FacebookIcon}
        onPress={() => alert("Mais qui utilise encore Fessebook!")}
      >
        Me connecter avec Fessebook
      </Button>
    </Layout>
  )
}
Enter fullscreen mode Exit fullscreen mode

Puis lorsque je refresh, j'ai...

Image description

Que dalle, eh oui, lorsque j'ai créé ma table, j'ai oublié (quel accident!) un petit truc:

Image description

Et normalement c'est good:
Image description

Voici le code du composant, rien de fifou:

export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  const [dishes, setDishes] = useState<any>([])
  async function load_plats() {
    let { data: plats, error } = await supabase.from("plats").select("*")
    console.log(plats, error)
    setDishes(plats)
  }

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

  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h3">{JSON.stringify(dishes)}</Text>
    </Layout>
  )
}
Enter fullscreen mode Exit fullscreen mode

PS : Si vous êtes intéressé par la secu et le time management, go check @boutvalentin et ses articles / formations faits avec ❤️ (et passion) sur tous ses sujets.
PSS : Si vous êtes intéressé par la Cybersécurité, go check @emiliebout et ses articles / formations faits avec passion (et ❤️) sur tous ses sujets.

Top comments (0)