@cometchat/chat-uikit-react-native/lib/CometChatMessageComposer/styles.js

Ready-to-use Chat UI Components for React Native

import { StyleSheet, } from "react-native";
export const Style = StyleSheet.create({
    container: {
        paddingVertical: 8,
    },
    padding: {
        paddingStart: 8,
        paddingEnd: 8,
    },
    buttonContainerStyle: {
        justifyContent: "space-between",
    },
    rowDirection: {
        flexDirection: "row",
    },
    imageStyle: {},
});
const getAttachmentOptionsStyle = (color, spacing, typography) => {
    return {
        optionsItemStyle: {
            containerStyle: {
                paddingVertical: spacing.padding.p3,
                paddingHorizontal: spacing.padding.p4,
                backgroundColor: color.background1,
                flexDirection: "row",
                alignItems: "center",
                gap: 5,
            },
            titleStyle: {
                ...typography.body.regular,
                color: color.textPrimary,
                paddingLeft: spacing.padding.p1,
            },
            iconStyle: {
                height: 24,
                width: 24,
            },
            iconContainerStyle: {},
        },
    };
};
export const getComposerStyle = (color, spacing, typography) => {
    return {
        containerStyle: {
            backgroundColor: color.background1,
            width: "100%",
        },
        messageInputStyles: {
            containerStyle: {
                borderRadius: spacing.radius.r2,
                borderWidth: spacing.spacing.s0_5 / 2,
                borderColor: color.borderDefault,
                backgroundColor: color.background1,
            },
            textStyle: {
                padding: spacing.padding.p3,
                paddingBottom: spacing.padding.p2,
                color: color.textPrimary,
                maxHeight: spacing.spacing.s20,
                ...typography.body.regular,
            },
            placeHolderTextColor: color.textTertiary,
            dividerStyle: {
                height: 1,
                backgroundColor: color.borderLight,
                marginVertical: spacing.margin.m1,
            },
        },
        attachmentIconStyle: {
            tintColor: color.iconSecondary,
            height: spacing.spacing.s6,
            width: spacing.spacing.s6,
        },
        voiceRecordingIconStyle: {
            tintColor: color.iconSecondary,
            height: spacing.spacing.s6,
            width: spacing.spacing.s6,
        },
        mentionsStyle: {
            textStyle: {
                ...typography.body.regular,
                color: color.textHighlight,
                // backgroundColor: '#6852D633',
                // paddingHorizontal: spacing.padding.p0_5
            },
            selfTextStyle: {
                ...typography.body.regular,
                color: color.warning,
                // backgroundColor: '#FFAB0033',
                // paddingHorizontal: spacing.padding.p0_5
            },
        },
        stickerIconStyle: {
            inactive: {
                tintColor: color.iconSecondary,
            },
            active: {
                tintColor: color.primary,
            },
        },
        attachmentOptionsStyles: getAttachmentOptionsStyle(color, spacing, typography)
    };
};
//# sourceMappingURL=styles.js.map