OptionalcustomizationsCustomization for the look and feel of the inbox.
OptionalmessageFunction to specify a layout for the message row.
Is this the last message in the list?
The view model for the inbox row.
A tuple containing a React node and a number, or undefined/null.
To specify a custom layout for your inbox rows, when you instantiate your
IterableInbox, assign a function to its messageListItemLayout prop. The
inbox will call this function for each of its rows, and it should return:
const ROW_HEIGHT = 100;
// Custom layout for the message row
const renderCustomLayout = (
isLast: boolean,
rowViewModel: IterableInboxRowViewModel,
) => {
return [
// Component shown in the message row
<View>
<Text>Title: {rowViewModel.inAppMessage.inboxMetadata?.title}</Text>
<Text>Body: {rowViewModel.inAppMessage.inboxMetadata?.subtitle}</Text>
<Text>Date: {rowViewModel.createdAt}</Text>
<Text>Has been read: {rowViewModel.read === true}</Text>
</View>,
// Height of the row
ROW_HEIGHT,
];
}
<IterableInbox messageListItemLayout={renderCustomLayout} />
OptionalreturnFlag which, when switched, returns a user to their inbox from within the inbox component (from the details of the particular message to the message list) if the inbox is already in view.
Let's say you have bottom tabs in your app, and one of them is the inbox. If you click on a message, you may want to be able to return to the inbox by clicking on the bottom tab inbox icon.
If this prop is included and correctly set up, clicking on the bottom inbox tab when a message is in focus will return the user to the inbox.
If this prop is NOT included, clicking on the bottom inbox tab when a message is in focus will have no effect.
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { IterableInbox} from '@iterable/react-native-sdk/js/Iterable';
const Tab = createBottomTabNavigator();
const MyNavigation = () => {
const [isInbox, setIsInbox] = useState<boolean>(false);
const [returnToInboxTrigger, setReturnToInboxTrigger] = useState<boolean>(false);
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
listeners={{tabPress: () => setIsInbox(false)}}
/>
<Tab.Screen
name="Inbox"
listeners={{
tabPress: () => {
// if this is true, then the inbox is already displayed, so
// go back to the message list if it is not already in view
if (isInbox) {
setReturnToInboxTrigger(!returnToInboxTrigger);
}
setIsInbox(true);
}
}}
>
{() => (
<IterableInbox
returnToInboxTrigger={returnToInboxTrigger}
/>
)}
</Tab.Screen>
<Tab.Screen
name="Settings"
component={Settings}
listeners={{tabPress: () => setIsInbox(false)}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
OptionalsafeIs safe area mode enabled?
This indicates whether or not the inbox should be displayed inside a React
Native SafeAreaView.
If the parent of the inbox component is already inside a SafeAreaView, set
this to false as another SafeAreaView is not needed.
// Safe area mode should be `true` as it is NOT already inside a `SafeAreaView`
const MyInbox = () => <IterableInbox safeAreaMode={true} />;
// Safe area mode should be `false` as it is already inside a `SafeAreaView`
const MyInbox = () => (
<SafeAreaView>
<IterableInbox safeAreaMode={false} />
</SafeAreaView>
);
OptionalshowShould the navigation title be shown?
OptionaltabThe height of the tab bar.
If your app uses custom tab bar dimensions, provide this value to make sure that the inbox component lays out as expected.
OptionaltabThe padding of the tab bar.
If your app uses custom tab bar dimensions, provide this value to make sure that the inbox component lays out as expected.
Props for the IterableInbox component.