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
122 lines • 4.01 kB
JavaScript
// CustomButtons.tsx
import React from 'react';
import { View, Text, Pressable, StyleSheet, } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
/**
* 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;
* ```
*/
const CustomButtons = ({ buttons, isDarkMode }) => {
const themed = typeof isDarkMode === 'boolean';
const textColor = themed ? (isDarkMode ? '#f8fafc' : '#0f172a') : '#000000';
const defaultBackgroundColor = themed
? isDarkMode
? 'rgba(255,255,255,0.06)'
: 'rgba(15,23,42,0.04)'
: 'transparent';
const borderColor = themed
? isDarkMode
? 'rgba(226,232,240,0.14)'
: 'rgba(71,85,105,0.16)'
: 'transparent';
return (<View style={styles.customButtonsContainer}>
{buttons.filter((button) => button.show !== false).map((button, index) => (<Pressable key={index} onPress={button.action} style={[
styles.customButton,
{
backgroundColor: button.backgroundColor || defaultBackgroundColor,
borderColor,
opacity: button.disabled ? 0.6 : 1,
},
]} disabled={button.disabled} accessibilityRole="button" accessibilityLabel={button.text || 'Custom Button'}>
<View style={styles.buttonContent}>
{button.icon ? (<>
<FontAwesome5 name={button.icon} style={[styles.customButtonIcon, { color: textColor }, button.iconStyle]}/>
{button.text && (<Text style={[styles.customButtonText, { color: textColor }, button.textStyle]}>
{button.text}
</Text>)}
</>) : button.customComponent ? (button.customComponent) : null}
</View>
</Pressable>))}
</View>);
};
export default CustomButtons;
/**
* Stylesheet for the CustomButtons component.
*/
const styles = StyleSheet.create({
customButtonsContainer: {
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'space-between',
alignItems: 'flex-start',
},
customButton: {
width: '100%',
marginVertical: 6,
padding: 12,
borderRadius: 6,
borderWidth: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
// Shadow for iOS
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Elevation for Android
elevation: 5,
},
buttonContent: {
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
customButtonIcon: {
fontSize: 20,
color: '#000000', // Default color for the button icon
marginRight: 4,
},
customButtonText: {
color: '#000000', // Default color for the button text
},
});
//# sourceMappingURL=CustomButtons.js.map