{"id":22165647,"url":"https://github.com/textileio/advanced-react-native-boilerplate","last_synced_at":"2025-07-26T11:32:21.355Z","repository":{"id":34249483,"uuid":"173095562","full_name":"textileio/advanced-react-native-boilerplate","owner":"textileio","description":"[DEPRECATED] React Native boilerplate including react-navigation, redux, and sagas with example Textile management.","archived":false,"fork":false,"pushed_at":"2023-01-03T17:01:13.000Z","size":6698,"stargazers_count":20,"open_issues_count":19,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-02T13:32:46.323Z","etag":null,"topics":["android","decentralized","ios","ipfs","react-native","textile"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/textileio.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":"2019-02-28T10:57:17.000Z","updated_at":"2021-08-07T13:32:50.000Z","dependencies_parsed_at":"2023-01-15T05:40:03.306Z","dependency_job_id":null,"html_url":"https://github.com/textileio/advanced-react-native-boilerplate","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/textileio%2Fadvanced-react-native-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textileio%2Fadvanced-react-native-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textileio%2Fadvanced-react-native-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/textileio%2Fadvanced-react-native-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/textileio","download_url":"https://codeload.github.com/textileio/advanced-react-native-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227673971,"owners_count":17802303,"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":["android","decentralized","ios","ipfs","react-native","textile"],"created_at":"2024-12-02T05:15:51.758Z","updated_at":"2024-12-02T05:15:52.517Z","avatar_url":"https://github.com/textileio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @textile/advanced-react-native-boilerplate\n\nReact Native boilerplate including react-navigation, redux, and sagas with example [Textile](https://github.com/textileio/go-textile/wiki) management. Built using the [Textile React Native SDK](https://github.com/textileio/react-native-sdk) and runs an [IPFS](https://ipfs.io) node directly in your app.\n\nThis project uses [Typescript](https://www.typescriptlang.org/).\n\nThe project setup was inspired by [Textile Photos](https://github.com/textileio/textile-mobile/) and was used in [AirSecure](http://github.com/airsecure/airsecure).\n\n## How to use.\n\n##### Clone this repo\n\n\n```\ngit clone git@github.com:textileio/advanced-react-native-boilerplate.git\ncd advanced-react-native-boilerplate\n```\n\n#### Install dependencies\n\nWe use Yarn for development and recommend [installing it](https://yarnpkg.com/lang/en/docs/install/), however, `npm` alone _might_ work.\n\n```bash\nyarn install\n(cd ios/; pod install)\n```\n\n#### Run the app\n\n```bash\nreact-native run-ios\n```\n\n#### Issues\n\nPlease add any issues to the [react-native-sdk repo](https://github.com/textileio/react-native-sdk).\n\n\n## Adding new screens\n\nYou can add new views as React Native components in `src/Containers`. Take a look at the [Home.tsx](https://github.com/textileio/advanced-react-native-boilerplate/blob/master/src/Containers/Home.tsx) for how we've structured a basic screen, reading Textile node state information from our Redux state data.\n\nAfter adding a new view, you'll want to include it in your Navigation object found at [src/Navigation/index.ts](https://github.com/textileio/advanced-react-native-boilerplate/blob/master/src/Navigation/index.ts). \n\nImport your new view,\n\n```javascript\nimport \u003cYourView\u003e from '../Containers/\u003cYourViewFile\u003e'\n```\n\nAnd add it to the Navigator,\n\n\n```javascript\nconst nav = createSwitchNavigator(\n  {\n    Home,\n    \u003cYourView\u003e\n  },\n  {\n    initialRouteName: 'Home'\n  }\n)\n```\n\n### Adding new state information to Redux\n\nWe've included one Redux file here, [MainRedux](https://github.com/textileio/advanced-react-native-boilerplate/blob/master/src/Redux/MainRedux.ts), but you can look at the source code for [Textile Photos](https://github.com/textileio/textile-mobile/) for more advanced Redux handling.\n\nYou can trigger a new Redux action with no state changes simply by updating MainRedux, for example,\n\n```javascript\nconst actions = {\n  nodeStarted: createAction('NODE_STARTED'),\n  newNodeState: createAction('NEW_NODE_STATE', (resolve) =\u003e {\n    return (nodeState: NodeState) =\u003e resolve({ nodeState })\n  }),\n  yourNewEvent: createAction('NEW_EVENT_HAPPENED')\n}\n```\n\nOr, you can create an event's payload to update the Redux state with,\n\n```javascript\nconst actions = {\n  nodeStarted: createAction('NODE_STARTED'),\n  newNodeState: createAction('NEW_NODE_STATE', (resolve) =\u003e {\n    return (nodeState: NodeState) =\u003e resolve({ nodeState })\n  }),\n  yourNewEvent: createAction('NEW_EVENT_HAPPENED', (resolve) =\u003e {\n    return (message: String) =\u003e resolve({ message })\n  })\n}\n...\n// update the redux state to store the latest message from yourNewEvent\nexport interface MainState {\n  started: boolean\n  nodeState: NodeState\n  latestMessage?: string\n}\n// we don't need to include it in the initialState since latestMessage is an optional\n\n...\n// Add a new switch case to process the payload (message string in this case)\n    ...\n    case getType(actions.yourNewEvent): {\n      return { ...state, latestMessage: action.payload.message }\n    }\n    ...\n```\n\n### Use Sagas to trigger other processes from Redux actions\n\nYou can use [MainSagas](https://github.com/textileio/advanced-react-native-boilerplate/blob/master/src/Sagas/MainSagas.ts) to attach advanced processing to new Redux actions.\n\nAgain, MainSagas is a simple example for taking each new event and passing it to a function, but look at Textile Photos for advanced redux/saga interaction.\n\nTake every time your new event is fired and run a function,\n\n```javascript \n// Add a new takeLatest to our sagaInit\nexport function* mainSagaInit() {\n  yield takeLatest('NODE_STARTED', nodeStarted)\n  yield takeLatest('NEW_NODE_STATE', newNodeState)\n  yield takeLatest('NEW_EVENT_HAPPENED', consoleLogNewEvent)\n}\n...\n// Create a function to execute for NEW_EVENT_HAPPENED\nexport function * consoleLogNewEvent(action: ActionType\u003ctypeof MainActions.yourNewEvent\u003e) {\n  const { message } = action.payload\n  console.info('New event with message: ', message)\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftextileio%2Fadvanced-react-native-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftextileio%2Fadvanced-react-native-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftextileio%2Fadvanced-react-native-boilerplate/lists"}