med-220a13b0d628-app.tsx

import React, {useEffect, useState} from 'react';
import awsConfig from './aws-exports';
import * as eva from '@eva-design/eva';
import {
  SafeAreaView,
  View,
} from 'react-native';
import {Amplify, Auth} from 'aws-amplify';
import {Authenticator} from 'aws-amplify-react-native';
import {ApplicationProvider, Text, Button} from '@ui-kitten/components';
import SignInModal from './auth-components/SignInModal';
import SignUpModal from './auth-components/SignUpModal';
import ConfirmSignupModal from './auth-components/ConfirmSignupModal';

Amplify.configure(awsConfig);

const App = () => {
  const [showSignInModal, setShowSignInModal] = useState(false);
  const [showSignUpModal, setShowSignUpModal] = useState(false);
  const [showConfirmSignupModal, setShowConfirmSignupModal] = useState(false);
  const [authState, setAuthState] = useState('');

  const onShowSignUp = () => {
    setShowSignInModal(false);
    setShowConfirmSignupModal(false);
    setShowSignUpModal(true);
  };

  const onShowSignIn = () => {
    setShowSignUpModal(false);
    setShowConfirmSignupModal(false);
    setShowSignInModal(true);
  };

  const onShowConfirmSignup = () => {
    setShowSignUpModal(false);
    setShowSignInModal(false);
    setShowConfirmSignupModal(true);
  };

  useEffect(() => {
    if (authState === 'signIn') {
      setShowSignInModal(true);
    }
  }, [authState]);

  return (
    <ApplicationProvider {...eva} theme={eva.light}>
      <Authenticator hideDefault={true} onStateChange={setAuthState}>
        <SignInModal
          override={'SignIn'}
          visible={showSignInModal}
          onHide={() => setShowSignInModal(false)}
          onShowSignUp={onShowSignUp}
        />
        <SignUpModal
          override={'SignUp'}
          visible={showSignUpModal}
          onHide={() => setShowSignUpModal(false)}
          onShowSignIn={onShowSignIn}
          onShowConfirmSignup={onShowConfirmSignup}
        />
        <ConfirmSignupModal
          override={'ConfirmSignUp'}
          visible={showConfirmSignupModal}
          onHide={() => setShowConfirmSignupModal(false)}
          onShowSignIn={onShowSignIn}
        />
        <SafeAreaView style={{padding: 10, flex: 1}}>
          {authState === 'signIn' ? (
            <View style={{padding: 10}}>
              <Text category="h1" style={{marginBottom: 15}}>
                Free Content
              </Text>
              <Text style={{marginBottom: 15}}>
                You're seeing the free version of this app. Please sign in to
                use the premium features!
              </Text>
              <Button onPress={onShowSignIn}>Sign in</Button>
            </View>
          ) : null}
          {authState === 'signedIn' ? (
            <View style={{padding: 10}}>
              <Text category="h1" style={{marginBottom: 15}}>
                Premium Content
              </Text>
              <Text style={{marginBottom: 15}}>
                Thanks for signing in! Please enjoy our premium content.
              </Text>
              <Button onPress={() => Auth.signOut()}>Sign out</Button>
            </View>
          ) : null}
        </SafeAreaView>
      </Authenticator>
    </ApplicationProvider>
  );
};

export default App;