[MOB-12260] create-embedded-tab-in-example-app

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

@@ -14,6 +14,7 @@ export const mailIcon =
 
 export const routeIcon = {
   [Route.Commerce]: cashIcon,
+  [Route.Embedded]: 'chatbubble-outline',
   [Route.Inbox]: mailIcon,
   [Route.User]: personIcon,
 };

example/src/components/App/App.tsx

@@ -1,16 +1,59 @@
+/* eslint-disable react-native/split-platform-components */
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useEffect } from 'react';
+import { PermissionsAndroid, Platform } from 'react-native';
 
 import { Route } from '../../constants/routes';
 import { useIterableApp } from '../../hooks/useIterableApp';
+import type { RootStackParamList } from '../../types';
 import { Login } from '../Login';
 import { Main } from './Main';
-import type { RootStackParamList } from '../../types';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
+const requestNotificationPermission = async () => {
+  if (Platform.OS === 'android') {
+    const apiLevel = Platform.Version; // Get the Android API level
+
+    if (apiLevel >= 33) {
+      // Check if Android 13 or higher
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
+          {
+            title: 'Notification Permission',
+            message:
+              'This app needs access to your notifications for push, in-app messages, embedded messages and more.',
+            buttonNeutral: 'Ask Me Later',
+            buttonNegative: 'Cancel',
+            buttonPositive: 'OK',
+          }
+        );
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          console.log('Notification permission granted');
+        } else {
+          console.log('Notification permission denied');
+        }
+      } catch (err) {
+        console.warn(err);
+      }
+    } else {
+      // For Android versions below 13, notification permission is generally not required
+      // or is automatically granted upon app installation.
+      console.log(
+        'Notification permission not required for this Android version.'
+      );
+    }
+  }
+};
+
 export const App = () => {
   const { isLoggedIn } = useIterableApp();
 
+  useEffect(() => {
+    requestNotificationPermission();
+  }, []);
+
   return (
     <Stack.Navigator>
       {isLoggedIn ? (

example/src/components/App/Main.tsx

@@ -8,6 +8,7 @@ import { User } from '../User';
 import { Inbox } from '../Inbox';
 import { useIterableApp } from '../../hooks';
 import { Commerce } from '../Commerce';
+import { Embedded } from '../Embedded';
 
 const Tab = createBottomTabNavigator<MainScreenParamList>();
 
@@ -44,6 +45,13 @@ export const Main = () => {
             },
           })}
         />
+        <Tab.Screen
+          name={Route.Embedded}
+          component={Embedded}
+          listeners={() => ({
+            tabPress: () => setIsInboxTab(false),
+          })}
+        />
         <Tab.Screen
           name={Route.Commerce}
           component={Commerce}

example/src/components/Embedded/Embedded.styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { button, buttonText, container, hr } from '../../constants';
+
+const styles = StyleSheet.create({
+  button,
+  buttonText,
+  container: { ...container, paddingHorizontal: 0 },
+  embeddedSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    paddingHorizontal: 16,
+  },
+  hr,
+  text: { textAlign: 'center' },
+  utilitySection: {
+    paddingHorizontal: 16,
+  },
+});
+
+export default styles;

example/src/components/Embedded/Embedded.tsx

@@ -0,0 +1,13 @@
+import { Text, View } from 'react-native';
+
+import styles from './Embedded.styles';
+
+export const Embedded = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>EMBEDDED</Text>
+    </View>
+  );
+};
+
+export default Embedded;

example/src/components/Embedded/index.ts

@@ -0,0 +1 @@
+export * from './Embedded';

example/src/constants/routes.ts

@@ -1,5 +1,6 @@
 export enum Route {
   Commerce = 'Commerce',
+  Embedded = 'Embedded',
   Inbox = 'Inbox',
   Login = 'Login',
   Main = 'Main',

example/src/constants/styles/index.ts

@@ -1,5 +1,6 @@
 export * from './colors';
 export * from './containers';
 export * from './formElements';
+export * from './miscElements';
 export * from './shadows';
 export * from './typography';

example/src/constants/styles/miscElements.ts

@@ -0,0 +1,9 @@
+import { type ViewStyle } from 'react-native';
+import { colors } from './colors';
+
+export const hr: ViewStyle = {
+  backgroundColor: colors.borderPrimary,
+  height: 1,
+  marginVertical: 20,
+  marginHorizontal: 0,
+};

example/src/types/navigation.ts

@@ -10,6 +10,7 @@ import { Route } from '../constants/routes';
 export type MainScreenParamList = {
   [Route.Commerce]: undefined;
   [Route.Inbox]: undefined;
+  [Route.Embedded]: undefined;
   [Route.User]: undefined;
 };