native-spark/lib/button.js

A React Native component for Spark UI

import React, { memo, useState } from "react";
import { Platform, TouchableOpacity, View, StyleSheet, Pressable } from "react-native";
const SparkButton = ({ children, activeOpacity = 0.8, rippleColor = 'lightgray', style, hoverStyle, defaultEffect = true, onPress }) => {
    const [isHovered, setIsHovered] = useState(false);
    // Platform-specific Touchable components
    const TouchableComponent = defaultEffect
        ? Platform.OS === 'web'
            ? Pressable
            : Platform.OS === 'ios'
                ? TouchableOpacity
                : Pressable
        : Pressable;
    // Default button style
    const btnStyle = [styles.button, style, isHovered && hoverStyle];
    return (<View style={{ borderRadius: isHovered && (hoverStyle === null || hoverStyle === void 0 ? void 0 : hoverStyle.borderRadius) || (style === null || style === void 0 ? void 0 : style.borderRadius) || 0, overflow: 'hidden' }}>
        <TouchableComponent style={btnStyle} onHoverIn={() => setIsHovered(true)} onHoverOut={() => setIsHovered(false)} activeOpacity={activeOpacity} android_ripple={{ color: rippleColor, borderless: false }} onPress={onPress}>
          {children}
        </TouchableComponent>
      </View>);
};
// Default button style
const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer',
        userSelect: 'none',
    },
});
export default memo(SparkButton);