test connection token on init (#177)

* chore: test connection token on init

* chore: render app conditionally

example/src/Root.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, Alert, StyleSheet } from 'react-native';
 
 import { StripeTerminalProvider } from 'stripe-terminal-react-native';
 import App from './App';
 import { API_URL } from './Config';
 
 export default function Root() {
+  const [initialized, setInitialized] = useState(false);
+
   const fetchTokenProvider = async () => {
     const response = await fetch(`${API_URL}/connection_token`, {
       method: 'POST',
@@ -17,12 +20,30 @@ export default function Root() {
     return secret;
   };
 
+  useEffect(() => {
+    // test connection_token endpoint since native SDK's doesn't fetch it on init
+    async function init() {
+      try {
+        await fetchTokenProvider();
+        setInitialized(true);
+      } catch (error) {
+        console.error(error);
+        Alert.alert("Couldn't fetch connection token!");
+      }
+    }
+    init();
+  }, []);
+
   return (
     <StripeTerminalProvider
       logLevel="verbose"
       tokenProvider={fetchTokenProvider}
     >
-      <App />
+      {initialized ? (
+        <App />
+      ) : (
+        <ActivityIndicator style={StyleSheet.absoluteFillObject} />
+      )}
     </StripeTerminalProvider>
   );
 }