```import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text, TouchableOpacity, StyleSheet, TextInput, Switch, Alert } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  button: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#f0a500',
    borderRadius: 10,
  },
  buttonText: {
    color: 'white',
  },
  headerText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginVertical: 10,
    width: '100%',
    borderRadius: 5,
  },
  label: {
    fontSize: 16,
    fontWeight: 'bold',
    marginTop: 10,
  },
});

const HomeScreen = () => (
  <View style={styles.container}>
    <Text style={styles.headerText}>Welcome to Japan Travel App</Text>
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>Start Planning</Text>
    </TouchableOpacity>
  </View>
);

const ItineraryScreen = () => (
  <View style={styles.container}>
    <Text>Itinerary Planner</Text>
  </View>
);

const DiscoverScreen = () => (
  <View style={styles.container}>
    <Text>Local Recommendations</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text>Profile & Settings</Text>
  </View>
);

const PaymentScreen = () => {
  const [cardNumber, setCardNumber] = useState('');
  const [expiry, setExpiry] = useState('');
  const [cvc, setCvc] = useState('');
  const [installment, setInstallment] = useState(false);

  const handlePayment = () => {
    Alert.alert('Payment Successful', `Paid with ${installment ? 'Installment Plan' : 'Full Payment'}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.headerText}>Payment</Text>
      <TextInput
        style={styles.input}
        placeholder="Card Number"
        keyboardType="numeric"
        value={cardNumber}
        onChangeText={setCardNumber}
      />
      <TextInput
        style={styles.input}
        placeholder="Expiry Date (MM/YY)"
        keyboardType="numeric"
        value={expiry}
        onChangeText={setExpiry}
      />
      <TextInput
        style={styles.input}
        placeholder="CVC"
        keyboardType="numeric"
        secureTextEntry
        value={cvc}
        onChangeText={setCvc}
      />
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
        <Text style={styles.label}>Installment Plan</Text>
        <Switch
          value={installment}
          onValueChange={setInstallment}
          style={{ marginLeft: 10 }}
        />
      </View>
      <TouchableOpacity style={styles.button} onPress={handlePayment}>
        <Text style={styles.buttonText}>Pay Now</Text>
      </TouchableOpacity>
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => {
          const icons = {
            Home: 'home-outline',
            Itinerary: 'calendar-outline',
            Discover: 'compass-outline',
            Profile: 'person-outline',
            Payment: 'card-outline',
          };

          return {
            tabBarIcon: ({ color, size }) => (
              <Ionicons name={icons[route.name]} size={size} color={color} />
            ),
            tabBarActiveTintColor: '#f0a500',
            tabBarInactiveTintColor: 'gray',
          };
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Itinerary" component={ItineraryScreen} />
        <Tab.Screen name="Discover" component={DiscoverScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Payment" component={PaymentScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}



### Information

- Device OS: MacOS
- Browser & Version: Chrome 103

- Your location usa, florida


### Requisites

- [x] I performed a [cursory search of the issue tracker](https://github.com/jsdelivr/jsdelivr/issues?q=is%3Aissue) to avoid opening a duplicate issue.
- [x] I checked the [documentation](https://github.com/jsdelivr/jsdelivr) to understand that the issue I am reporting is not normal behavior.
- [x] I understand that not filling out this template correctly will lead to the issue being closed.

### Additional content

_No response_