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.
Change node first:
nvm alias default 16using npm:
npm install @mindinventory/react-native-bus-seat-layout
using yarn:
yarn add @mindinventory/react-native-bus-seat-layout
Simulator Screen Recording - iPhone 11 - 2022年11月08日 at 18 39 33 Simulator Screen Recording - iPhone 11 - 2022年11月08日 at 18 40 42
- Android
- Ios
import SeatsLayout from '@mindinventory/react-native-bus-seat-layout';
<SeatsLayout row={10} layout={{ columnOne: 2, columnTwo: 2 }} isSleeperLayout={true} seatImage={{ image: SleeperSeatIcon, tintColor: 'gray' }} selectedSeats={[ { seatNumber: 1, seatType: 'booked' }, // Booked seat { seatNumber: 2, seatType: 'blocked' }, // Blocked Seat data { seatNumber: 5, seatType: 'door' }, // Show Door { seatNumber: 6, seatType: 'emptySpace' }, // Empty space { seatNumber: 11, seatType: 'women' }, { seatNumber: 12, seatType: 'women' }, // Women seat { seatNumber: 16, seatType: 'booked' }, { seatNumber: 17, seatType: 'door' }, // Show Door { seatNumber: 18, seatType: 'emptySpace' }, // Empty space { seatNumber: 29, seatType: 'door' }, // Show Door { seatNumber: 30, seatType: 'emptySpace' }, ]} numberTextStyle={styles.numberStyle} getBookedSeats={(seats) => { console.log('getBookedSeats :: ', seats); }} />
| Parameter | Type | Description |
|---|---|---|
| row | number | Set number of rows to draw seat layout. |
| layout | Layout (Optional) | Default value columnOne: 2 & columnTwo: 2. |
| driverPosition | string (Optional) | Accepts string args among left or right. Default is right. |
| isSleeperLayout | boolean (Optional) | Accepts boolean value either true or false. Default is false. |
| maxSeatToSelect | number (Optional) | Allow uset to select maximum number of seats to book in one go. Default value 7. |
| selectedSeats | Array (Optional) | Accepts value seatNumber number and seatType number which accepts value from (booked or women or blocked). Default its set to blank array. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
@mindinventory/react-native-bus-seat-layout MIT-licensed.
If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com