Expo supabase example with expo router

Specification

• supabase
• vitest
• react-native
• expo
• expo-router

DEMO

login	create

update & delete	image upload & delete

GUIDE

SETTING

프로젝트 이동시 supabase 에서 프로젝트 생성 후 supabaseUrl.ts 에 supabaseUrl 와 supabaseAnonKey 를 넣어주세요.

const supabaseUrl = 'your supabase url';
const supabaseAnonKey = 'your supabase anon key';

• Table은 자동생성이 안되기 때문에 직접 생성해야합니다. example 에서는 review 이름 테이블을 사용합니다.
• RLS 정책을 disabled 시키거나 policy를 허용해야 정상적으로 사용할 수 있습니다.

export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: AsyncStorage as any,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

TYPE

export interface Database {
    public: {
      Tables: {
        review: {
          Row: {
            id: number;
            created_at: string;
            content:string;
            title:string;
            image?:{
              url:string;
              path:string;
            }
          } // The data expected to be returned from a "select" statement.
          Insert: {
           ...
          } // The data expected passed to an "insert" statement.
          Update: {
          ...
          } // The data expected passed to an "update" statement.
        },
        countries:{

        }
      }
    }
  }

• 테이블 데이터의 타입과 생성, 업데이트, 삭제 시 타입을 지정 할 수 있습니다.

DATABASE

https://supabase.com/docs/reference/javascript/select

Create Data

 const {data, error} = await supabase
      .from('review')
      .insert({
        title,
        content,
      })
      .select('*');
    if (error) {
      Alert.alert('Error', error.message);
      return;
    }

Fetch Data

const {data, error} = await supabase.from('review').select('*');
      if (error) {
        Alert.alert('Error', error.message);
        return;
      }

Update Data

 const {data, error} = await supabase
      .from('review')
      .update({title, content})
      .eq('id', id)
      .select('*');
    if (error) {
      Alert.alert('Error', error.message);
      return;
    }

Delete Data

const {error} = await supabase.from('review').delete().eq('id', id);
    if (error) {
      Alert.alert('Error', error.message);
      return;
    }

STORAGE

https://supabase.com/docs/reference/javascript/storage-createbucket

Create a bucket

const { data, error } = await supabase
  .storage
  .createBucket('avatars')

UPLOAD

const {error} = await supabase.storage
          .from('avatars')
          .upload(filePath, decode(result.assets[0].base64 ?? ''), {
            contentType: result.assets[0].type,
          });
        if (error) {
          throw error;
        }

• React Native의 경우 Blob, File 또는 FormData를 사용하면 Storage에 업로드 할 수 없기때문에 base64 방법을 사용해야합니다. https://supabase.com/docs/reference/javascript/storage-from-upload

DELETE

const {error} = await supabase.storage.from('avatars').remove([path]);