layout.jsx

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { Provider as PaperProvider } from 'react-native-paper';
import axios from 'axios';
import nodemailer from 'nodemailer';

const Tab = createBottomTabNavigator();

function HomeScreen() {
  return (
    <View>
      <Text>Welcome to the Zamara Mobile App!</Text>
    </View>
  );
}

function StaffScreen() {
  return (
    <View>
      <Text>Staff Screen</Text>
    </View>
  );
}

function ContinentsScreen() {
  return (
    <View>
      <Text>Continents Screen</Text>
    </View>
  );
}

function DashboardScreen() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const response = await axios.get('https://api.zamara.com/user');
      setUser(response.data);
    }

    fetchUser();
  }, []);

  return (
    <View>
      <Text style={{ fontWeight: 'bold', fontSize: 20 }}>
        Welcome {user && `${user.firstName} ${user.lastName}`}!
      </Text>
      <Text style={{ marginBottom: 10 }}>Your profile details is as below:</Text>
      <Text>Age: {user && user.age}</Text>
      <Text>Gender: {user && user.gender}</Text>
      <Text>Email: {user && user.email}</Text>
      <Text>Phone: {user && user.phone}</Text>
      <Text>Birth Date: {user && user.birthDate}</Text>
      <Text>Blood Group: {user && user.bloodGroup}</Text>
      <Text>Height: {user && user.height}</Text>
      <Text>Weight: {user && user.weight}</Text>
      <Text>Eye Color: {user && user.eyeColor}</Text>
    </View>
  );
}

function EmailScreen() {
  const [recipient, setRecipient] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');

  const sendEmail = async () => {
    const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: '[email protected]',
        pass: 'your-password'
      }
    });

    const mailOptions = {
      from: '[email protected]',
      to: recipient,
      subject: subject,
      text: body
    };

    const info = await transporter.sendMail(mailOptions);
    console.log(info);
  };

  return (
    <View>
      <TextInput
        value={recipient}
        onChangeText={setRecipient}
        placeholder="Recipient"
        style={{ marginBottom: 10 }}
      />
      <TextInput
        value={subject}
        onChangeText={setSubject}
        placeholder="Subject"
        style={{ marginBottom: 10 }}
      />
      <TextInput
        value={body}
        onChangeText={setBody}
        placeholder="Body"
        multiline
        style={{ marginBottom: 10 }}
      />
      <Button title="Send Email" onPress={sendEmail} />
    </View>
  );
}
function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ color, size }) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = 'home-outline';
              } else if (route.name === 'Staff') {
                iconName = 'people-outline';
              } else if (route.name === 'Continents') {
                iconName = 'globe-outline';
              } else if (route.name === 'Email') {
                iconName = 'mail-outline';
              }

              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: 'blue',
            inactiveTintColor: 'gray',
          }}>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Staff" component={StaffScreen} />
          <Tab.Screen name="Continents" component={ContinentsScreen} />
          <Tab.Screen name="Email" component={EmailScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}

smtp.jsx

function App() {
  const [staffList, setStaffList] = useState([]);

  const handleAddStaff = async (staffData) => {
    try {
      const response = await axios.post(API_URL, staffData);
      setStaffList([...staffList, response.data]);

      // send email notification
      sendEmail(
        staffData.staffEmail,
        'Profile Notification #Created',
        `Greeting ${staffData.staffName}, we are glad to inform you that your staff profile has been created.`
      );

      alert('Staff member added successfully!');
    } catch (error) {
      console.log(error);
      alert('Error adding staff member');
    }
  };

  const handleUpdateStaff = async (staffData) => {
    try {
      await axios.put(`${API_URL}/${staffData.staffNumber}`, staffData);
      setStaffList(
        staffList.map((item) =>
          item.staffNumber === staffData.staffNumber ? staffData : item
        )
      );

      // send email notification
      sendEmail(
        staffData.staffEmail,
        'Profile Notification #Edited',
        `Greeting ${staffData.staffName}, we are glad to inform you that your staff profile has been updated.`
      );

      alert('Staff member updated successfully!');
    } catch (error) {
      console.log(error);
      alert('Error updating staff member');
    }
  };

  const handleDeleteStaff = async (staffNumber, staffEmail, staffName) => {
    try {
      await axios.delete(`${API_URL}/${staffNumber}`);
      setStaffList(staffList.filter((item) => item.staffNumber !== staffNumber));

      // send email notification
      sendEmail(
        staffEmail,
        'Profile Notification #Deleted',
        `Greeting ${staffName}, we are sad to inform you that your staff profile has been deleted.`
      );

      alert('Staff member deleted successfully!');
    } catch (error) {
      console.log(error);
      alert('Error deleting staff member');
    }
  };

  const sendEmail = async (to, subject, body) => {
    const data = {
      to: to,
      subject: subject,
      body: body,
    };

    try {
      await axios.post('https://api.smtpbucket.com/send', data);
      console.log('Email sent successfully!');
    } catch (error) {
      console.log(error);
      alert('Error sending email notification');
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <StaffForm onSubmit={handleAddStaff} />
      <StaffList staffList={staffList} onUpdate={handleUpdateStaff} onDelete={handleDeleteStaff} />
    </View>
  );
}

wsdl.jsx

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
import { parseString } from 'react-native-xml2js';

const WSDL_URL = 'http://webservices.oorsprong.org/websamples.countryinfo/CountryInfoService.wso?WSDL';

function Continents() {
  const [continentList, setContinentList] = useState([]);

  useEffect(() => {
    async function fetchContinentList() {
      const response = await axios.post(WSDL_URL, buildSoapRequest());
      const xml = response.data;

      parseString(xml, (err, result) => {
        if (err) {
          console.log(err);
          alert('Error fetching continent list');
        } else {
          const continents = result['soap:Envelope']['soap:Body'][0]['m:ListOfContinentsByNameResult'][0]['m:Continent'];

          setContinentList(
            continents.map((continent) => ({
              code: continent['m:SCode'][0],
              name: continent['m:SName'][0],
            }))
          );
        }
      });
    }

    fetchContinentList();
  }, []);

  const buildSoapRequest = () => {
    const xml = `
      <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://www.oorsprong.org/websamples.countryinfo">
        <soap:Header/>
        <soap:Body>
          <web:ListOfContinentsByName/>
        </soap:Body>
      </soap:Envelope>
    `;

    return xml;
  };

  return (
    <View>
      <Text style={{ fontWeight: 'bold', fontSize: 20 }}>Continents</Text>
      {continentList.map((continent) => (
        <View key={continent.code} style={{ marginBottom: 10 }}>
          <Text>{continent.code}</Text>
          <Text>{continent.name}</Text>
        </View>
      ))}
    </View>
  );
}

function App() {
  return (
    <View style={{ padding: 20 }}>
      <Continents />
    </View>
  );
}