mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
58 lines • 2.26 kB
JavaScript
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import ParticipantListOthersItem from './ParticipantListOthersItem';
/**
* ParticipantListOthers is a React Native component that renders a list of participants, with options
* for displaying co-host and member status. Each participant is rendered using the `ParticipantListOthersItem` component.
* A separator line appears between each participant except the last one.
*
* @component
* @param {ParticipantListOthersOptions} props - The properties for the ParticipantListOthers component.
* @param {Array<Participant>} props.participants - An array of participant objects to display.
* @param {string} props.coHost - Indicates the co-host status for displaying participants.
* @param {string} props.member - Indicates the member status for displaying participants.
* @returns {JSX.Element} The rendered ParticipantListOthers component.
*
* @example
* ```tsx
* import React from 'react';
* import { ParticipantListOthers } from 'mediasfu-reactnative-expo';
*
* function App() {
* const participants = [
* { id: '1', name: 'Alice' },
* { id: '2', name: 'Bob' },
* ];
*
* return (
* <ParticipantListOthers
* participants={participants}
* coHost="JohnDoe"
* member="JaneDoe"
* />
* );
* }
*
* export default App;
* ```
*/
const ParticipantListOthers = ({ participants, coHost, member, isDarkMode, }) => (<ScrollView>
{participants.map((participant, index) => (<React.Fragment key={participant.name}>
<ParticipantListOthersItem participant={participant} coHost={coHost} member={member} isDarkMode={isDarkMode}/>
{index < participants.length - 1 && (<View style={[
styles.separator,
typeof isDarkMode === 'boolean'
? { backgroundColor: isDarkMode ? 'rgba(226, 232, 240, 0.18)' : 'rgba(71, 85, 105, 0.22)' }
: null,
]}/>)}
</React.Fragment>))}
</ScrollView>);
const styles = StyleSheet.create({
separator: {
height: 1,
backgroundColor: 'gray',
marginVertical: 1,
},
});
export default ParticipantListOthers;
//# sourceMappingURL=ParticipantListOthers.js.map