@iterable/react-native-sdk
Version:
Iterable SDK for React Native.
56 lines (54 loc) • 1.59 kB
JavaScript
"use strict";
import { StyleSheet, Text, View } from 'react-native';
import { ITERABLE_INBOX_COLORS } from "../constants/index.js";
/**
* Props for the IterableInboxEmptyState component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* A functional component that renders an empty state for the inbox when there are no messages.
*/
export const IterableInboxEmptyState = ({
customizations,
tabBarHeight,
tabBarPadding,
navTitleHeight,
height,
isPortrait
}) => {
const defaultTitle = 'No saved messages';
const defaultBody = 'Check again later!';
const emptyStateTitle = customizations.noMessagesTitle;
const emptyStateBody = customizations.noMessagesBody;
return /*#__PURE__*/_jsxs(View, {
style: [styles.container, {
height: isPortrait ? height - navTitleHeight - tabBarHeight - tabBarPadding : height - navTitleHeight
}],
children: [/*#__PURE__*/_jsx(Text, {
style: styles.title,
children: emptyStateTitle ? emptyStateTitle : defaultTitle
}), /*#__PURE__*/_jsx(Text, {
style: styles.body,
children: emptyStateBody ? emptyStateBody : defaultBody
})]
});
};
const styles = StyleSheet.create({
body: {
color: ITERABLE_INBOX_COLORS.TEXT,
fontSize: 15
},
container: {
alignItems: 'center',
backgroundColor: ITERABLE_INBOX_COLORS.CONTAINER_BACKGROUND,
flexDirection: 'column',
height: 0,
justifyContent: 'center'
},
title: {
fontSize: 20,
fontWeight: 'bold',
paddingBottom: 25
}
});
//# sourceMappingURL=IterableInboxEmptyState.js.map