- Notifications
You must be signed in to change notification settings - Fork5
A Supabase starter kit for React Native (TS) with authentication ready. Add your env variables and your ready. (note: /src can be use without Expo, just one line to change in i18next)
License
luca-montaigut/expo-supabase-starter-kit
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Easy, just click on "use this template" and follow the github process 😎
Once this is done,git clone your newly created repository, go into it with your favorite terminal and runyarn
src├── assets├── components│ ├── atoms│ │ ├── Input.tsx│ │ ├── Layout.tsx│ │ ├── Link.tsx│ │ ├── Spinner.tsx│ │ ├── Switch.tsx│ │ ├── Text.tsx│ │ └── Title.tsx│ ├── folder-rules.txt│ └── index.ts├── contexts│ └── AuthProvider.tsx├── hooks│ └── use-supabase.tsx├── navigators│ ├── AppNavigator.tsx│ └── AuthNavigator.tsx├── queries│ └── users.ts├── screens│ ├── app│ │ └── ProfileScreen.tsx│ ├── auth│ │ └── LoginScreen.tsx│ └── folder-rules.txt├── services│ └── supabaseClient.ts├── themes│ ├── ThemeContext.tsx│ ├── index.ts│ ├── navigatorTheme.ts│ └── themes.ts├── translations│ ├── en│ │ ├── common.json│ │ └── index.ts│ ├── fr│ │ ├── common.json│ │ └── index.ts│ ├── i18n.js│ └── resources.ts├── types│ └── env.d.ts└── utilities ├── constants.ts └── helpers.tsref: generated using tree src.
- typescript
- @typescript-eslint
- eslint-react-hook
- @react-native-community/eslint-config
- prettier
- husky (pre-commit)
- i18next
- react-native-dotenv
- @react-navigation
- @supabase/supabase-js
- @react-native-async-storage
- react-hook-form
-> get it in /supabase/migration
-> use it in the SQL editor in your supabase interface (aka studio)
👍 Good job now you have a "profiles" table and a new row will be created every time a new user will signup with supabase.auth.
id andemail between an auth.user and his "profiles" row will match. Columnscreated_at andupdated_at field will be automatically updated.
No need to write loading and error state again and again, juste use this.
Example for queries :
const{ data, loading, error}=useSupabaseQuery(supabase.from('profiles').select('*').eq('id',yourUserId),);
Example for mutations (insert / update / delete) :
const{ execute, data, loading, error}=useSupabaseMutation();// DO SOMETHING...// ... and use the execute when neededconstupdateProfile=async({ fieldToUpdate}:{fieldToUpdate:string})=>{awaitexecute(supabase.from('profiles').update({ fieldToUpdate}).eq('id',yourUserId),);};
Styling was handle with a Context provider and a custom hook (useTheme) to use it.The theme provider detect the color scheme of the device (light or dark) and use it by default or when it change,but you can also switch the theme manually.
You can use your the custom hook "useTheme" like this :
// Component.jsxconst Component = props => { const { theme, isDarkMode, setDarkMode } = useTheme(); return ( <View style={styles(theme).container}> <Switch onValueChange={switchState => setDarkMode(switchState)} value={isDarkMode} /> </View> );};const styles = theme => StyleSheet.create({ container: { backgroundColor: theme.colors.mainBackground, }, });You can access to your current user everywhere in authenticated screen by using the useCurrentUser hook like this:
constuser=useCurrentUser();
- Conventionnal Commits (https://www.conventionalcommits.org/en/v1.0.0/)
- Changelog (https://keepachangelog.com/en/1.0.0/)
- Semantic Versioning (https://semver.org/)
About
A Supabase starter kit for React Native (TS) with authentication ready. Add your env variables and your ready. (note: /src can be use without Expo, just one line to change in i18next)
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.