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.

using npm:

npm install @mindinventory/react-native-bus-seat-layout

using yarn:

yarn add @mindinventory/react-native-bus-seat-layout

• Android
• Ios

import SeatsLayout from '@mindinventory/react-native-bus-seat-layout';

<SeatsLayout
  row={14}
  layout={{ columnOne: 3, columnTwo: 2 }}
  selectedSeats={[
    { seatNumber: 1, seatType: 'booked' },
    { seatNumber: 11, seatType: 'women' },
    { seatNumber: 17, seatType: 'women' },
    { seatNumber: 43, seatType: 'blocked' },
  ]}
  numberTextStyle={{ fontSize: 12 }}
  seatImage={{ image: SleeperSeatIcon, tintColor: '#B2B2B2' }}
  getBookedSeats={(seats) => {
    console.log('getBookedSeats :: ', seats);
  }}
/>

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