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
102 lines (101 loc) • 2.67 kB
TypeScript
import React from 'react';
import { StyleProp, TextStyle } from 'react-native';
/**
* Interface defining the structure of each custom button.
*/
export interface CustomButton {
/**
* Function to be called when the button is pressed.
*/
action: () => void;
/**
* Determines if the button should be displayed.
*/
show: boolean;
/**
* The background color of the button.
* @default 'transparent'
*/
backgroundColor?: string;
/**
* Determines if the button should be disabled.
* @default false
*/
disabled?: boolean;
/**
* The name of the FontAwesome5 icon to be displayed on the button.
*/
icon?: string;
/**
* The style to be applied to the icon.
*/
iconStyle?: StyleProp<TextStyle>;
/**
* The text to be displayed on the button.
*/
text?: string;
/**
* The style to be applied to the text.
*/
textStyle?: StyleProp<TextStyle>;
/**
* A custom component to be rendered inside the button instead of icon and text.
*/
customComponent?: React.ReactNode;
}
/**
* Interface defining the props for the CustomButtons component.
*/
export interface CustomButtonsOptions {
/**
* An array of button configurations to be rendered.
*/
buttons: CustomButton[];
isDarkMode?: boolean;
}
export type CustomButtonsType = (options: CustomButtonsOptions) => JSX.Element;
/**
* CustomButtons renders a list of customizable buttons, each with configurable actions, icons, and display options.
*
* @example
* ```tsx
* import React from 'react';
* import { CustomButtons } from 'mediasfu-reactnative-expo';
*
* function App() {
* return (
* <CustomButtons
* buttons={[
* {
* action: () => console.log('Confirm pressed'),
* show: true,
* backgroundColor: '#4CAF50',
* icon: 'check-circle',
* text: 'Confirm',
* textStyle: { color: 'white', fontWeight: 'bold' },
* },
* {
* action: () => console.log('Delete pressed'),
* show: true,
* backgroundColor: '#F44336',
* icon: 'trash',
* text: 'Delete',
* textStyle: { color: 'white' },
* },
* {
* action: () => console.log('Disabled pressed'),
* show: true,
* disabled: true,
* backgroundColor: '#9E9E9E',
* text: 'Disabled',
* },
* ]}
* />
* );
* }
*
* export default App;
* ```
*/
declare const CustomButtons: React.FC<CustomButtonsOptions>;
export default CustomButtons;