{"id":18127194,"url":"https://github.com/mindinventory/react-native-bus-seat-layout","last_synced_at":"2025-07-17T07:04:49.220Z","repository":{"id":62974217,"uuid":"486445486","full_name":"Mindinventory/react-native-bus-seat-layout","owner":"Mindinventory","description":"A @mindinventory/react-native-bus-seat-layout library provides seats layout for bus booking, you can give custom styles of seat numbers. also can give images for seat. you have to provide number of rows that you need to draw layout, you will get selected seats from props.","archived":false,"fork":false,"pushed_at":"2024-09-23T09:44:56.000Z","size":903,"stargazers_count":22,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-19T19:46:42.773Z","etag":null,"topics":["bus-seat-booking","bus-seat-layout","custom-component","custom-layout","custom-view","custom-views","react","react-native"],"latest_commit_sha":null,"homepage":"https://www.mindinventory.com/react-native-app-development.php","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mindinventory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-28T04:28:57.000Z","updated_at":"2024-09-23T09:45:01.000Z","dependencies_parsed_at":"2025-04-15T06:47:43.332Z","dependency_job_id":"54a39d83-f96d-48c9-a6dc-44531303b77f","html_url":"https://github.com/Mindinventory/react-native-bus-seat-layout","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Mindinventory/react-native-bus-seat-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-bus-seat-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-bus-seat-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-bus-seat-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-bus-seat-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mindinventory","download_url":"https://codeload.github.com/Mindinventory/react-native-bus-seat-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2Freact-native-bus-seat-layout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265575481,"owners_count":23790776,"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":["bus-seat-booking","bus-seat-layout","custom-component","custom-layout","custom-view","custom-views","react","react-native"],"created_at":"2024-11-01T09:15:39.862Z","updated_at":"2025-07-17T07:04:49.169Z","avatar_url":"https://github.com/Mindinventory.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @mindinventory/react-native-bus-seat-layout [![](https://img.shields.io/npm/v/@mindinventory/react-native-tab-bar-interaction.svg)](https://www.npmjs.com/package/@mindinventory/react-native-tab-bar-interaction)\n\nA \u003ci\u003e@mindinventory/react-native-bus-seat-layout\u003c/i\u003e library provides seats layout for bus booking, you can give custom styles of seat numbers. also can give images for seat. you have to provide number of rows that you need to draw layout, you will get selected seats from props.\n\nChange node first:\n\n```sh\nnvm alias default 16\n```\n\n## Installation\n\nusing npm:\n\n```sh\nnpm install @mindinventory/react-native-bus-seat-layout\n```\n\nusing yarn:\n\n```sh\nyarn add @mindinventory/react-native-bus-seat-layout\n```\n\n## Preview\n\n![Simulator Screen Recording - iPhone 11 - 2022-11-08 at 18 39 33](https://user-images.githubusercontent.com/82019401/200575512-eb7f94ed-43cf-4461-b209-836d3374fa6f.gif)\n![Simulator Screen Recording - iPhone 11 - 2022-11-08 at 18 40 42](https://user-images.githubusercontent.com/82019401/200575530-1d4c6bf1-8d97-4cf6-8060-b640cc9486a7.gif)\n\n### Supported platform\n\n- Android\n- Ios\n\n## Usage\n\n```js\nimport SeatsLayout from '@mindinventory/react-native-bus-seat-layout';\n```\n\n```js\n\u003cSeatsLayout\n  row={10}\n  layout={{ columnOne: 2, columnTwo: 2 }}\n  isSleeperLayout={true}\n  seatImage={{ image: SleeperSeatIcon, tintColor: 'gray' }}\n  selectedSeats={[\n    { seatNumber: 1, seatType: 'booked' }, // Booked seat\n    { seatNumber: 2, seatType: 'blocked' }, // Blocked Seat data\n    { seatNumber: 5, seatType: 'door' }, // Show Door\n    { seatNumber: 6, seatType: 'emptySpace' }, // Empty space\n    { seatNumber: 11, seatType: 'women' },\n    { seatNumber: 12, seatType: 'women' }, // Women seat\n    { seatNumber: 16, seatType: 'booked' },\n    { seatNumber: 17, seatType: 'door' }, // Show Door\n    { seatNumber: 18, seatType: 'emptySpace' }, // Empty space\n    { seatNumber: 29, seatType: 'door' }, // Show Door\n    { seatNumber: 30, seatType: 'emptySpace' },\n  ]}\n  numberTextStyle={styles.numberStyle}\n  getBookedSeats={(seats) =\u003e {\n    console.log('getBookedSeats :: ', seats);\n  }}\n/\u003e\n```\n\n# Props to use\n\n| Parameter       | Type                              | Description                                                                                                                                          |\n| --------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n| row             | _number_                          | Set number of rows to draw seat layout.                                                                                                              |\n| layout          | _Layout (Optional)_               | Default value `columnOne: 2` \u0026 `columnTwo: 2`.                                                                                                       |\n| driverPosition  | _string (Optional)_               | Accepts string args among `left` or `right`. Default is `right`.                                                                                     |\n| isSleeperLayout | _boolean (Optional)_              | Accepts boolean value either `true` or `false`. Default is `false`.                                                                                  |\n| maxSeatToSelect | _number (Optional)_               | Allow uset to select maximum number of seats to book in one go. Default value `7`.                                                                   |\n| selectedSeats   | _Array\u003cSelectedSeats\u003e (Optional)_ | Accepts value seatNumber `number` and seatType `number` which accepts value from (`booked` or `women` or `blocked`). Default its set to blank array. |\n\n## Contributing!\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License!\n\n@mindinventory/react-native-bus-seat-layout [MIT-licensed](https://github.com/Mindinventory/react-native-bus-seat-layout/blob/main/LICENSE).\n\n# Let us know!\n\nIf you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com\n\n\u003cp\u003e\u003ch4\u003ePlease feel free to use this component and Let us know if you are interested to building Apps or Designing Products.\u003c/h4\u003e\n\u003ca href=\"https://www.mindinventory.com/contact-us.php?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=react-native-bus-seat-layout\" target=\"__blank\"\u003e\n\u003cimg src=\"https://github.com/Sammindinventory/MindInventory/blob/main/hirebutton.png\" width=\"203\" height=\"43\"  alt=\"app development\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freact-native-bus-seat-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindinventory%2Freact-native-bus-seat-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freact-native-bus-seat-layout/lists"}