Segment Tab Control

1import React, { useState, useEffect } from 'react';
2import {
3    StyleSheet,
4    Text,
5    View,
6    Pressable,
7    ViewStyle,
8    LayoutChangeEvent
9} from 'react-native';
10import Animated, {
11    useAnimatedStyle,
12    useSharedValue,
13    withSpring,
14    withTiming,
15    interpolateColor
16} from 'react-native-reanimated';
17import { BlurView } from 'expo-blur';
18import { LinearGradient } from 'expo-linear-gradient';
19
20type TabTheme = 'glass' | 'brutal' | 'gradient' | 'dark' | 'minimal';

import React from 'react';
import { StyleSheet, View, Text, SafeAreaView, StatusBar } from 'react-native';
import SegmentTab from './components/SegmentTabButton';

export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle="dark-content" />
            <View style={styles.content}>
                <Text style={styles.header}>Settings</Text>

                {/* PRODUCTION READY: MINIMAL (The most used version) */}
                <View style={styles.section}>
                    <Text style={styles.label}>Account Type</Text>
                    <SegmentTab
                        options={['Personal', 'Business']}
                        theme="minimal"
                        onTabChange={(i) => console.log(i)}
                    />
                </View>