@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';

function SpeedDialItem(props) {
  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}>
      <View style={[styles.speedDialItemTitle, { ...titleStyle
    }]}>{ChildTitle}</View>

      <TouchableOpacity onPress={() => {
      onPress && onPress();
    }}>
        <View style={[styles.speedDialItemIcon, { ...iconStyle
      }]}>{ChildIcon}</View>
      </TouchableOpacity>
    </View>;
}

const styles = 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: '#b779e2',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center'
  }
});
export default SpeedDialItem;