{"id":18949472,"url":"https://github.com/nhost/nhost-react-native-example-app","last_synced_at":"2025-04-15T23:31:20.129Z","repository":{"id":38872881,"uuid":"265169039","full_name":"nhost/nhost-react-native-example-app","owner":"nhost","description":"A Nhost Starter Project Using React Native","archived":false,"fork":false,"pushed_at":"2023-01-26T21:49:50.000Z","size":2920,"stargazers_count":10,"open_issues_count":20,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-05T19:52:48.040Z","etag":null,"topics":["graphql","hasura","nhost","react-native","storage"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nhost.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-19T06:53:40.000Z","updated_at":"2023-02-28T02:15:06.000Z","dependencies_parsed_at":"2023-02-15T01:01:26.101Z","dependency_job_id":null,"html_url":"https://github.com/nhost/nhost-react-native-example-app","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhost%2Fnhost-react-native-example-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhost%2Fnhost-react-native-example-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhost%2Fnhost-react-native-example-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhost%2Fnhost-react-native-example-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nhost","download_url":"https://codeload.github.com/nhost/nhost-react-native-example-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223688610,"owners_count":17186299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","hasura","nhost","react-native","storage"],"created_at":"2024-11-08T13:17:09.624Z","updated_at":"2024-11-08T13:17:10.275Z","avatar_url":"https://github.com/nhost.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Nhost React Native Example App\n\n[Nhost](https://nhost.io) example app in React Native using [Hasura](https://hasura.io).\n\n## Get started\n\n1. Create a project on [Nhost](https://nhost.io/register).\n2. Clone this repo.\n3. Copy `config-example.yaml` to `config.yaml` in `hasura/`.\n4. Update `config.yaml` with `endpoint` and `admin_secret` in `hasura/`.\n5. Apply migrations and metadata: `cd hasura; hasura migrate apply; hasura metadata apply;`.\n6. Copy `config-example.ts` to `config.ts` in `src/`.\n7. Update `config.ts` with the details from you project at Nhost.\n8. `yarn install`.\n9. `yarn start`.\n\n\n## Creating React Native Project\n\n```javascript\nnpx react-native init \u003cProject Name\u003e\n```\n\n---------------------------------------------------------------------------------------------------------------------------\n## Adding the apis\nCreating a file `src/helpers/api.js`\n\n```\nexport const GRAPHQL_ENDPOINT = 'https://hasura-[id].nhost.app/v1/graphql';\nexport const BACKEND_ENDPOINT = 'https://backend-[id].nhost.app';\n\nexport const X_HASURA_ADMIN_SECRET = '\u003cYour_Secret\u003e';\n```\n\n---------------------------------------------------------------------------------------------------------------------------\n\n## Adding nhost-js-sdk \n\n##### Installation\n\n`npm install --save nhost-js-sdk`\n\n\n##### Initialising Nhost Auth \u0026 Storage\nCreating a file `src/helpers/nhostSdk/index.js`\n\n```\nimport nhost from 'nhost-js-sdk';\nimport { BACKEND_ENDPOINT } from '../api';\n\nconst config = {\n  endpoint: BACKEND_ENDPOINT,\n};\n\nnhost.initializeApp(config);\n\nconst auth = nhost.auth();\nconst storage = nhost.storage();\n\nexport { auth, storage };\n\n```\n\n##### Checkout the full usage of Auth and Storage [here](https://github.com/nhost/nhost-js-sdk).\n\n## A Simple Working Auth can be found in this repo.\n\n##### Working GIF\n\n| iOS                                          | Android                                      |\n|----------------------------------------------|----------------------------------------------|\n| ![](nhostExample.gif)                        |                                              |\n\n---------------------------------------------------------------------------------------------------------------------------\n\n## Working with GraphQL\n\nLook at the file in  `src/helepers/getRequestObject.js`\n\n```\nimport { GRAPHQL_ENDPOINT, X_HASURA_ADMIN_SECRET } from \"./api\";\n\nexport const getRequestObject = ({ data, token }) =\u003e ({\n  method: 'POST',\n  url: GRAPHQL_ENDPOINT,\n  data,\n  headers: {\n    Authorization: `Bearer=\"${token}\"`,\n    'x-hasura-admin-secret': X_HASURA_ADMIN_SECRET\n  },\n})\n\n// A Sample GraphQL Query\nexport const getSkills = () =\u003e {\n  return {\n    query: `query getSkills {\n      tags {\n        tag\n      }\n    }`\n  }\n}\n\n// A function which returns a response to the axios request, wrapping the graphQL Function \nconst fetchSkills = async (_, token) =\u003e {\n  const response = await axios(\n    getRequestObject({\n      data: getSkills(),\n      token\n    })\n  );\n  return response;\n}\n\n```\n\nEvery `query` or `mutation` can be composed as shown above to work with Hasura GraphQL. \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhost%2Fnhost-react-native-example-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnhost%2Fnhost-react-native-example-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhost%2Fnhost-react-native-example-app/lists"}