mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
61 lines • 1.72 kB
JavaScript
// MenuItemComponent.tsx
import React from 'react';
import { Text, Pressable, StyleSheet, } from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
/**
* MenuItemComponent renders a menu item with an optional icon and text.
*
* @component
* @param {MenuItemComponentOptions} props - The properties for the MenuItemComponent.
* @returns {JSX.Element} The rendered MenuItemComponent.
*
* MenuItemComponent renders a menu item with an optional icon and text.
*
* @example
* ```tsx
* import React from 'react';
* import { MenuItemComponent } from 'mediasfu-reactnative';
*
* function App() {
* return (
* <MenuItemComponent
* icon="bars"
* name="Menu"
* onPress={() => console.log('Menu pressed')}
* />
* );
* }
*
* export default App;
* ```
*/
const MenuItemComponent = ({ icon, name, onPress }) => (<Pressable style={styles.listItem} onPress={onPress} accessibilityRole="button" accessibilityLabel={name || 'Menu Item'}>
{icon && <FontAwesome5 name={icon} style={styles.listIcon}/>}
{name && <Text style={styles.listText}>{name}</Text>}
</Pressable>);
export default MenuItemComponent;
/**
* Stylesheet for the MenuItemComponent.
*/
const styles = StyleSheet.create({
listItem: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'transparent',
borderWidth: 0,
fontSize: 16,
paddingLeft: 0,
marginLeft: 0,
marginBottom: 10,
},
listIcon: {
fontSize: 20,
marginRight: 10,
color: '#ffffff',
},
listText: {
color: '#ffffff',
fontSize: 16,
},
});
//# sourceMappingURL=MenuItemComponent.js.map