[MOB-10032] Example App: Login page

example/index.js

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native';
-import App from './src/App';
+import App from './src';
 import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

example/src/components/App/App.constants.ts

@@ -0,0 +1,5 @@
+import { Route } from '../../constants';
+
+export const routeIcon = {
+  [Route.User]: 'person-outline',
+};

example/src/components/App/App.tsx

@@ -0,0 +1,33 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { Route } from '../../constants/routes';
+import { useIterableApp } from '../../hooks/useIterableApp';
+import { Login } from '../Login';
+import { Main } from './Main';
+import type { RootStackParamList } from '../../types';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export const App = () => {
+  const { isLoggedIn } = useIterableApp();
+
+  return (
+    <Stack.Navigator>
+      {isLoggedIn ? (
+        <Stack.Screen
+          name={Route.Main}
+          component={Main}
+          options={{ headerShown: false }}
+        />
+      ) : (
+        <Stack.Screen
+          name={Route.Login}
+          component={Login}
+          options={{ headerShown: false }}
+        />
+      )}
+    </Stack.Navigator>
+  );
+};
+
+export default App;

example/src/components/App/App.utils.tsx

@@ -0,0 +1,5 @@
+import Icon from 'react-native-vector-icons/Ionicons';
+
+export const getIcon = (name: string, props: Record<string, any>) => (
+  <Icon name={name} {...props} />
+);

example/src/components/App/Main.tsx

@@ -0,0 +1,31 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+import { colors, Route } from '../../constants';
+import type { MainScreenParamList } from '../../types';
+import { routeIcon } from './App.constants';
+import { getIcon } from './App.utils';
+import { User } from '../User';
+
+const Tab = createBottomTabNavigator<MainScreenParamList>();
+
+export const Main = () => {
+  return (
+    <>
+      <Tab.Navigator
+        screenOptions={({ route }) => {
+          const iconName = routeIcon[route.name as keyof typeof routeIcon];
+          return {
+            tabBarIcon: (props) => getIcon(iconName as string, props),
+            tabBarActiveTintColor: colors.brandPurple,
+            tabBarInactiveTintColor: colors.textSecondary,
+            headerShown: false,
+          };
+        }}
+      >
+        <Tab.Screen name={Route.User} component={User} />
+      </Tab.Navigator>
+    </>
+  );
+};
+
+export default Main;

example/src/components/App/index.ts

@@ -0,0 +1,2 @@
+export * from './App';
+export { default } from './App';

example/src/components/Login/Login.styles.ts

@@ -0,0 +1,40 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+import {
+  appName,
+  buttonBlock,
+  buttonDisabled,
+  buttonText,
+  buttonTextDisabled,
+  container,
+  input,
+  label,
+  subtitle,
+  title,
+} from '../../constants';
+
+const setButton = (buttonToSet: ViewStyle = {}) => ({
+  ...buttonBlock,
+  ...buttonToSet,
+  marginTop: 32,
+});
+
+export const styles = StyleSheet.create({
+  loginScreenContainer: {
+    ...container,
+    backgroundColor: 'white',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  formContainer: { marginTop: 24 },
+  appName,
+  title,
+  subtitle,
+  input: { ...input, marginBottom: 15 },
+  button: setButton(),
+  buttonDisabled: setButton(buttonDisabled),
+  buttonText,
+  buttonTextDisabled,
+  label,
+});

example/src/components/Login/Login.tsx

@@ -0,0 +1,73 @@
+import {
+  ActivityIndicator,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { useMemo } from 'react';
+
+import { colors, type Route } from '../../constants';
+import { useIterableApp } from '../../hooks';
+import type { RootStackScreenProps } from '../../types';
+import { styles } from './Login.styles';
+
+export const Login = ({ navigation }: RootStackScreenProps<Route.Login>) => {
+  const { apiKey, setApiKey, userId, setUserId, initialize, loginInProgress } =
+    useIterableApp();
+  const loginIsEnabled = useMemo(() => apiKey && userId, [apiKey, userId]);
+
+  return (
+    <View style={styles.loginScreenContainer}>
+      {loginInProgress ? (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={colors.brandPurple} />
+        </View>
+      ) : (
+        <>
+          <Text style={styles.appName}>Iterable</Text>
+          <Text style={styles.title}>Sign in to continue</Text>
+          <Text style={styles.subtitle}>
+            Example app for React Native developers
+          </Text>
+          <View style={styles.formContainer}>
+            <Text style={styles.label}>API key</Text>
+            <TextInput
+              style={styles.input}
+              onChangeText={setApiKey}
+              value={apiKey}
+              placeholder="eg: 1234567890abcdefg1234567890hijkl"
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+            <Text style={styles.label}>Email address or User Id</Text>
+            <TextInput
+              style={styles.input}
+              onChangeText={setUserId}
+              value={userId}
+              placeholder="eg: [email protected] or 1234567890"
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoComplete="email"
+            />
+            <Pressable
+              style={loginIsEnabled ? styles.button : styles.buttonDisabled}
+              disabled={!loginIsEnabled}
+              onPressOut={() => initialize(navigation)}
+            >
+              <Text
+                style={
+                  loginIsEnabled ? styles.buttonText : styles.buttonTextDisabled
+                }
+              >
+                Login
+              </Text>
+            </Pressable>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+export default Login;

example/src/components/Login/index.ts

@@ -0,0 +1,2 @@
+export * from './Login';
+export { default } from './Login';

example/src/components/User/User.styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet, type TextStyle } from 'react-native';
+import { appNameSmall, button, buttonText, container } from '../../constants';
+
+const text: TextStyle = {
+  textAlign: 'center',
+  marginBottom: 20,
+};
+
+const styles = StyleSheet.create({
+  container,
+  appName: appNameSmall,
+  button,
+  buttonText,
+  secondaryButton: {
+    ...button,
+    backgroundColor: 'gray',
+  },
+  text,
+});
+
+export default styles;

example/src/components/User/User.tsx

@@ -0,0 +1,31 @@
+import { Iterable } from '@iterable/react-native-sdk';
+import { useEffect, useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { useIterableApp } from '../../hooks';
+import styles from './User.styles';
+
+export const User = () => {
+  const { logout, isLoggedIn } = useIterableApp();
+  const [loggedInAs, setLoggedInAs] = useState<string>('');
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      Iterable.getEmail().then((email) => setLoggedInAs(email || ''));
+    } else {
+      setLoggedInAs('');
+    }
+  }, [isLoggedIn]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.appName}>Welcome Iterator</Text>
+      <Text style={styles.text}>Logged in as {loggedInAs}</Text>
+      <TouchableOpacity style={styles.secondaryButton} onPress={logout}>
+        <Text style={styles.buttonText}>Logout</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default User;

example/src/components/User/index.ts

@@ -0,0 +1,2 @@
+export * from './User';
+export { default } from './User';

example/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './routes';
+export * from './styles';

example/src/constants/routes.ts

@@ -0,0 +1,5 @@
+export enum Route {
+  Login = 'Login',
+  Main = 'Main',
+  User = 'User',
+}