In this quickstart guide, we’ll demonstrate how to build a simple To-Do feature using Nhost and React Native.
Create Nhost Project
Setup Database
todos
.Track this
is enabledConfigure the todos table permissions
todos
table, select the table, click on the ...
to open the actions dialog,
then click on Edit Permissions. Set the following permissions for the user
role:Insert
Row insert permissions
to Without any checks
user_id
on Column insert permissions
Column preset
and set Column Name
to user_id
and Column Value
to X-Hasura-User-Id
Select
Row select permissions
to With custom check
and fill in the following rule:
Where
to todos.user_id
_eq
X-Hasura-User-Id
user_id
on Column select permissions
Update
Row update permissions
to With custom check
and fill in the following rule:
Where
to todos.user_id
_eq
X-Hasura-User-Id
user_id
on Column select permissions
Delete
Row delete permissions
to With custom check
and fill in the following rule:
Where
to todos.user_id
_eq
X-Hasura-User-Id
Configure permissions to enable user file uploads
Insert
permission for the user
role:
Row insert permissions
to Without any checks
Column insert permissions
Select
Row select permissions
to With custom check
and fill in the following rule:
Where
to files.uploaded_by_user_id
_eq
X-Hasura-User-Id
Column select permissions
Bootstrap your React Native app
@nhost/react-native-template
Connect your React Native app to the Nhost project
<subdomain>
and <region>
values available on the dashboard overviewAdd the GraphQL queries
src/graphql/todos.ts
that will expose the graphql queries needed to list
, add
and delete
To-Do’s.Add a form to insert a To-Do
Add the Todo component and the screen to list all the todos
Reference the new Todos components in the Drawer Navigator
Run the app on the emulator
Demo