Function Pagination

Pagination - Multi-page navigation with breakout room support

Pagination is a React Native component for navigating between multiple pages of content (typically participant grids). It includes special logic for breakout room scenarios where access to certain pages is restricted based on user role.

Key Features:

  • Multi-page navigation with numbered buttons
  • Breakout room access control
  • Flexible layout positioning (top/middle/bottom, left/middle/right)
  • Horizontal or vertical button arrangement
  • Active page highlighting
  • Host-specific room switching capabilities
  • Customizable button styling

UI Customization: This component can be replaced via uiOverrides.paginationComponent to provide a completely custom pagination implementation.

Component

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}
    />
  );
}

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
  }}
/>

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;

Properties

propTypes? contextTypes? defaultProps? displayName?

Properties

OptionalpropTypes

propTypes?: WeakValidationMap<PaginationOptions>

Used to declare the types of the props accepted by the component. These types will be checked during rendering and in development only.

We recommend using TypeScript instead of checking prop types at runtime.

See

React Docs

OptionalcontextTypes

contextTypes?: ValidationMap<any>

Deprecated

Lets you specify which legacy context is consumed by this component.

See

Legacy React Docs

OptionaldefaultProps

defaultProps?: Partial<PaginationOptions>

Used to define default values for the props accepted by the component.

See

React Docs

Example

type Props = { name?: string }

const MyComponent: FC<Props> = (props) => {
  return <div>{props.name}</div>
}

MyComponent.defaultProps = {
  name: 'John Doe'
}

Deprecated

Use values for destructuring assignments instead.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties