@uiw/react-native/lib/SpeedDial/SpeedDialItem.js

UIW for React Native

import React, { useMemo } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import Icon from '../Icon';
import { useTheme } from '@shopify/restyle';
function SpeedDialItem(props) {
    const theme = useTheme();
    const styles = createStyles({
        bgColor: theme.colors.primary_background || '#3578e5',
    });
    const { title, icon, titleStyle, iconStyle, onPress } = props;
    const ChildTitle = useMemo(() => {
        if (typeof title === 'string' || typeof title === 'number') {
            return <Text>{title}</Text>;
        }
        else if (title instanceof Object) {
            return <React.Fragment>{title}</React.Fragment>;
        }
    }, [title]);
    const ChildIcon = useMemo(() => {
        if (icon instanceof Object) {
            return <React.Fragment>{icon}</React.Fragment>;
        }
        else {
            return <Icon name={icon} color="#fff" size={18}/>;
        }
    }, [icon]);
    return (<View style={styles.speedDialItemContainer} {...props.move}>
      <View style={[styles.speedDialItemTitle, { ...titleStyle }]}>{ChildTitle}</View>
      <TouchableOpacity onPress={() => {
            onPress && onPress();
        }}>
        <View style={[styles.speedDialItemIcon, { ...iconStyle }]}>{ChildIcon}</View>
      </TouchableOpacity>
    </View>);
}
function createStyles({ bgColor }) {
    return StyleSheet.create({
        speedDialItemContainer: {
            flexDirection: 'row',
            alignItems: 'center',
            marginBottom: 20,
            marginRight: 10,
        },
        speedDialItemTitle: {
            backgroundColor: '#fff',
            paddingHorizontal: 10,
            height: 30,
            borderRadius: 5,
            justifyContent: 'center',
            marginRight: 20,
        },
        speedDialItemIcon: {
            width: 40,
            height: 40,
            backgroundColor: bgColor,
            borderRadius: 20,
            justifyContent: 'center',
            alignItems: 'center',
        },
    });
}
export default SpeedDialItem;