Function OtherGridComponent

OtherGridComponent - Secondary video grid with meeting timer

OtherGridComponent is a React Native component that provides a secondary grid container for additional video participants (typically used when the main grid is full). It includes bordered styling and an optional meeting progress timer overlay.

Key Features:

• Fixed-dimension bordered grid container
• Meeting progress timer overlay
• Visibility controls for grid and timer
• Custom background colors
• Flexible width/height (numeric or string values)
• Advanced render override hooks

UI Customization: This component can be replaced via uiOverrides.otherGridComponent to provide a completely custom secondary grid layout.

// Basic usage - Secondary video grid with timer
import React from 'react';
import { OtherGridComponent } from 'mediasfu-reactnative-expo';

function SecondaryVideoGrid() {
  return (
    <OtherGridComponent
      backgroundColor="#2c2c2c"
      width={300}
      height={400}
      showAspect={true}
      showTimer={true}
      meetingProgressTime="00:15:32"
      timeBackgroundColor="rgba(0, 0, 0, 0.6)"
    >
      <FlexibleGrid componentsToRender={overflowParticipants} />
    </OtherGridComponent>
  );
}
Copy

// Without timer overlay and custom styling
<OtherGridComponent
  backgroundColor="#1a1a1a"
  width="80%"
  height={500}
  showTimer={false}
  meetingProgressTime=""
  style={{ borderRadius: 8, borderWidth: 2, borderColor: '#007bff' }}
>
  <SecondaryParticipantGrid />
</OtherGridComponent>
Copy

// With custom content renderer (add participant count)
<OtherGridComponent
  backgroundColor="black"
  width={350}
  height={450}
  showTimer={true}
  meetingProgressTime="01:23:45"
  renderContent={({ defaultContent, dimensions }) => (
    <>
      <View style={{ 
        position: 'absolute', 
        top: 10, 
        right: 10, 
        zIndex: 100,
        backgroundColor: 'rgba(0,0,0,0.7)',
        padding: 5,
        borderRadius: 4,
      }}>
        <Text style={{ color: 'white', fontSize: 12 }}>
          {overflowCount} more participants
        </Text>
      </View>
      {defaultContent}
    </>
  )}
>
  <OverflowGrid />
</OtherGridComponent>
Copy

// Using uiOverrides for complete grid replacement
import { MyCustomOtherGrid } from './MyCustomOtherGrid';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    otherGridComponent: {
      component: MyCustomOtherGrid,
      injectedProps: {
        showBorder: true,
        borderStyle: 'dashed',
      },
    },
  },
};

// MyCustomOtherGrid.tsx
export const MyCustomOtherGrid = (props: OtherGridComponentOptions & { showBorder: boolean; borderStyle: string }) => {
  return (
    <View style={{ 
      width: typeof props.width === 'number' ? props.width : undefined,
      height: typeof props.height === 'number' ? props.height : undefined,
      backgroundColor: props.backgroundColor,
      borderWidth: props.showBorder ? 2 : 0,
      borderStyle: props.borderStyle as any,
      borderColor: '#007bff',
      position: 'relative',
    }}>
      {props.children}
      {props.showTimer && (
        <View style={{ 
          position: 'absolute', 
          top: 5, 
          left: 5,
          backgroundColor: props.timeBackgroundColor || 'rgba(0,0,0,0.5)',
          padding: 4,
          borderRadius: 4,
        }}>
          <Text style={{ color: 'white', fontSize: 10 }}>
            {props.meetingProgressTime}
          </Text>
        </View>
      )}
    </View>
  );
};
Copy