Variable PaginationConst

Example

// Basic usage - Simple page navigation
import React from 'react';
import { Pagination } from 'mediasfu-reactnative-expo';

function VideoGridWithPagination() {
  const [currentPage, setCurrentPage] = React.useState(1);
  
  const paginationParams = {
    mainRoomsLength: 3,
    memberRoom: 1,
    breakOutRoomStarted: false,
    breakOutRoomEnded: false,
    member: 'user123',
    breakoutRooms: [],
    hostNewRoom: 0,
    roomName: 'MainRoom',
    islevel: '1',
    socket: socketInstance,
    getUpdatedAllParams: () => paginationParams,
  };

  return (
    <Pagination
      totalPages={5}
      currentUserPage={currentPage}
      position="middle"
      location="bottom"
      direction="horizontal"
      backgroundColor="#ffffff"
      paginationHeight={40}
      parameters={paginationParams}
    />
  );
}
Copy

Example

// With custom styling and breakout rooms
<Pagination
  totalPages={10}
  currentUserPage={3}
  handlePageChange={async (options) => {
    console.log('Changing to page:', options.page);
    await generatePageContent(options);
  }}
  position="right"
  location="top"
  direction="vertical"
  buttonsContainerStyle={{ gap: 8 }}
  activePageStyle={{ backgroundColor: '#007bff', borderRadius: 8 }}
  inactivePageStyle={{ backgroundColor: '#e0e0e0', borderRadius: 8 }}
  backgroundColor="#f5f5f5"
  paginationHeight={50}
  showAspect={true}
  parameters={{
    ...paginationParams,
    breakOutRoomStarted: true,
    breakoutRooms: breakoutParticipantGroups,
    islevel: '2', // Host level
  }}
/>
Copy

Example

// Using uiOverrides for complete pagination replacement
import { MyCustomPagination } from './MyCustomPagination';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    paginationComponent: {
      component: MyCustomPagination,
      injectedProps: {
        theme: 'minimal',
        showPageNumbers: true,
      },
    },
  },
};

// MyCustomPagination.tsx
export const MyCustomPagination = (props: PaginationOptions & { theme: string; showPageNumbers: boolean }) => {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
      <Button title="Prev" onPress={() => props.handlePageChange?.({ page: props.currentUserPage - 1, parameters: props.parameters })} />
      {props.showPageNumbers && <Text>{props.currentUserPage} / {props.totalPages}</Text>}
      <Button title="Next" onPress={() => props.handlePageChange?.({ page: props.currentUserPage + 1, parameters: props.parameters })} />
    </View>
  );
};
    hostNewRoom: 2,
    roomName: 'Room A',
    islevel: '2',
    showAlert: (alert) => console.log(alert.message),
    socket: /* Socket connection * /,
    getUpdatedAllParams: () => parameters,
  };

  return (
    <Pagination
      totalPages={10}
      currentUserPage={1}
      parameters={parameters}
      backgroundColor="lightgray"
      paginationHeight={50}
      direction="horizontal"
      position="middle"
      location="bottom"
    />
  );
}

export default App;
Copy

Copy