@trycourier/courier-react-native/lib/example/src/Tabs.js

Inbox, Push Notifications, and Preferences for React Native

import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
export const Tab = ({ title, isSelected, onPress }) => (React.createElement(TouchableOpacity, { onPress: onPress, style: [styles.tabButton, isSelected && styles.selectedTabButton] },
    React.createElement(Text, { style: [styles.tabText, isSelected && styles.selectedTabText] }, title)));
export const TabControl = ({ tabs, selectedTab, setSelectedTab }) => (React.createElement(View, { style: styles.segmentedControl }, tabs.map((tab) => (React.createElement(Tab, { key: tab.key, title: tab.title, isSelected: selectedTab === tab.key, onPress: () => setSelectedTab(tab.key) })))));
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    segmentedControl: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        width: '100%',
    },
    content: {
        flex: 1,
        width: '100%',
        height: '100%',
    },
    tabButton: {
        padding: 16,
        flex: 1,
        alignItems: 'center',
        borderBottomWidth: 2,
        borderBottomColor: 'transparent',
    },
    selectedTabButton: {
        borderBottomColor: 'blue',
    },
    tabText: {
        color: 'black',
    },
    selectedTabText: {
        fontWeight: 'bold',
    },
});