Ootb views demo omni

SampleApp/javascript/js/App.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import Icon from 'react-native-vector-icons/Ionicons';
-import HomeTab from './HomeTab';
-import SettingsTab from './SettingsTab';
 import { coffees } from './Data';
+import { createStackNavigator } from '@react-navigation/stack';
+import HomeScreen from './HomeScreen';
+import CardViewScreen from './CardViewScreen';
+import BannerViewScreen from './BannerViewScreen';
+import NotificationViewScreen from './NotificationViewScreen';
+
+const Stack = createStackNavigator();
 
 // Step 1: 
 // Import the Iterable and IterableConfig class. 
@@ -26,7 +29,7 @@ export default class App extends React.Component {
         super(props);
 
         this.homeTabRef = React.createRef();
-        
+
         // Step 3: Initialize the React Native SDK here.
         // Create an IterableConfig object with various properties set.
         // The config object is used to customize various features of the SDK such as the URL handler and custom action handler.
@@ -37,37 +40,25 @@ export default class App extends React.Component {
         // (https://support.iterable.com/hc/en-us/articles/360045714132-Installing-Iterable-s-React-Native-SDK-#step-6-initialize-iterable-s-react-native-sdk)
 
         // Below is a sample implementation of the config object where we set the urlHAndler and inAppDisplayInterval
-        
+
         const config = new IterableConfig();
-        
+
         // inAppDisplayInterval sets the number of seconds to wait between displaying multiple in-app messages in sequence
         config.inAppDisplayInterval = 1.0;
-        
+
         // urlHandler is set up here to handle deep link URLs and in-app message buttons and link URLs
         config.urlHandler = this.urlHandler;
-        
+
         // Initialize by calling the Iterable.initialize method passing in your API key and the optional config object.
         Iterable.initialize(iterableAPIKey, config);
     }
     render() {
-        const Tab = createBottomTabNavigator();
-        return (React.createElement(NavigationContainer, null,
-            React.createElement(Tab.Navigator, { screenOptions: ({ route }) => ({
-                    tabBarIcon: ({ focused, color, size }) => {
-                        if (route.name == 'Home') {
-                            return React.createElement(Icon, { name: "ios-home", size: size, color: color });
-                        }
-                        else {
-                            return React.createElement(Icon, { name: "ios-settings", size: size, color: color });
-                        }
-                    },
-                }), tabBarOptions: {
-                    activeTintColor: 'tomato',
-                    inactiveTintColor: 'gray',
-                    showIcon: true,
-                } },
-                React.createElement(Tab.Screen, { name: "Home", options: { title: "Coffees" } }, props => React.createElement(HomeTab, Object.assign({ ref: this.homeTabRef }, props))),
-                React.createElement(Tab.Screen, { name: "Settings", component: SettingsTab }))));
+        return (<NavigationContainer>
+            <Stack.Navigator>
+                <Stack.Screen name="Home" component={HomeScreen} />
+                <Stack.Screen name="CardView" component={CardViewScreen} />
+            </Stack.Navigator>
+        </NavigationContainer>)
     }
 
     navigate(coffee) {

SampleApp/javascript/js/BannerViewScreen.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import { RouteProp } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+declare type BannerViewScreenProps = {
+    route: RouteProp<any, 'BannerView'>;
+    navigation: StackNavigationProp<any>;
+};
+export default class BannerViewScreen extends Component<BannerViewScreenProps> {
+    constructor(props: BannerViewScreenProps);
+    render(): JSX.Element;
+}
+export {};

SampleApp/javascript/js/BannerViewScreen.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import IterableBannerView from './components/IterableBannerView';
+
+export default class BannerViewScreen extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <View style={{ flex: 1, padding: 10 }}>
+            <IterableBannerView
+                titleText='Banner View 1'
+                subTitleText='Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum'
+                imgSrc='https://codesymphony.in/assets/technology/home-page/Serverless.png'
+                btnPrimaryText={'Try Premium'}
+            />
+            <IterableBannerView
+                titleText='Banner View 2'
+                subTitleText='Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 2233'
+                imgSrc='https://codesymphony.in/assets/technology/home-page/Selenium.png'
+                isShowbtnSecondary={true}
+            />
+        </View>
+    }
+}

SampleApp/javascript/js/CardViewScreen.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import { RouteProp } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+declare type CardViewScreenProps = {
+    route: RouteProp<any>;
+    navigation: StackNavigationProp<any>;
+};
+export default class CardViewScreen extends Component<CardViewScreenProps> {
+    constructor(props: CardViewScreenProps);
+    render(): JSX.Element;
+}
+export {};

SampleApp/javascript/js/CardViewScreen.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import IterableCardView from './components/IterableCardView';
+
+export default class CardViewScreen extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <View style={{ flex: 1, padding: 10 }}>
+            <IterableCardView
+                titleText='Card View 1'
+                subTitleText='Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum'
+                isShowbtnSecondary={true}
+            />
+            <IterableCardView
+                titleText='Card View 2'
+                subTitleText='Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 2233'
+                imgSrc='https://codesymphony.in/assets/projects/sonetel/Sonetel%205.png'
+                isShowbtnSecondary={true}
+            />
+        </View>
+    }
+}

SampleApp/javascript/js/HomeScreen.d.ts

@@ -2,14 +2,14 @@ import { Component } from 'react';
 import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Screens } from './HomeTab';
-import { Coffee } from './Data';
+
 declare type HomeScreenProps = {
     route: RouteProp<Screens, 'Home'>;
     navigation: StackNavigationProp<Screens>;
 };
 export default class HomeScreen extends Component<HomeScreenProps> {
     constructor(props: HomeScreenProps);
-    navigate(coffee: Coffee): void;
+    navigate(): void;
     render(): JSX.Element;
 }
 export {};

SampleApp/javascript/js/HomeScreen.js

@@ -1,17 +1,38 @@
 import React, { Component } from 'react';
-import { View, } from 'react-native';
-import { ListItem } from 'react-native-elements';
-import { coffees } from './Data';
+import { TouchableOpacity, View, Text } from 'react-native';
+
 export default class HomeScreen extends Component {
     constructor(props) {
         super(props);
     }
-    navigate(coffee) {
-        this.props.navigation.navigate('Detail', { coffee: coffee });
+    navigateToCardView() {
+        console.log("Card View");
+        this.props.navigation.navigate('CardView');
     }
+
+    navigateToBannerView() {
+      console.log("Banner View");
+      this.props.navigation.navigate('BannerView');
+    }
+
+    navigateToNotificationView() {
+        console.log("Notification View");
+        this.props.navigation.navigate('NotificationView');
+    }
+
     render() {
-        return (React.createElement(View, null, coffees.map((coffee, i) => (React.createElement(ListItem, { onPress: () => {
-                this.props.navigation.navigate('Detail', { coffee: coffee });
-            }, key: i, leftAvatar: { source: coffee.icon }, title: coffee.name, subtitle: coffee.subtitle, bottomDivider: true, chevron: true })))));
+        return <View style={{ flex: 1, padding: 10 }}>
+            <TouchableOpacity style={{ padding: 10, width: '100%', justifyContent: 'center' }} onPress={() => this.navigateToCardView()}>
+                <Text style={{ textAlign: 'center', color: 'blue', fontSize: 16 }}>{"Card View Demo"}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={{ padding: 10, width: '100%', justifyContent: 'center' }} onPress={() => this.navigateToNotificationView()}>
+                <Text style={{ textAlign: 'center', color: 'blue', fontSize: 16 }}>{"Notification View Demo"}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={{ padding: 10, width: '100%', justifyContent: 'center' }} onPress={() => this.navigateToBannerView()}>
+                <Text style={{ textAlign: 'center', color: 'blue', fontSize: 16 }}>{"Banner View Demo"}</Text>
+            </TouchableOpacity>
+        </View>
     }
-}
+}

SampleApp/javascript/js/HomeTab.js

@@ -14,7 +14,7 @@ export default class HomeTab extends Component {
     render() {
         const HomeStack = createStackNavigator();
         return (React.createElement(HomeStack.Navigator, null,
-            React.createElement(HomeStack.Screen, { name: "Home", options: { headerTitle: "Coffees" } }, props => React.createElement(HomeScreen, Object.assign({}, props, { ref: this.homeScreenRef }))),
+            React.createElement(HomeStack.Screen, { name: "Home", options: { headerTitle: "Home" } }, props => React.createElement(HomeScreen, Object.assign({}, props, { ref: this.homeScreenRef }))),
             React.createElement(HomeStack.Screen, { name: "Detail", options: { headerTitle: "Coffee" }, component: DetailScreen })));
     }
 }

SampleApp/javascript/js/NotificationViewScreen.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import { RouteProp } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+declare type NotificationViewScreenProps = {
+    route: RouteProp<any, 'NotificationView'>;
+    navigation: StackNavigationProp<any>;
+};
+export default class NotificationViewScreen extends Component<NotificationViewScreenProps> {
+    constructor(props: NotificationViewScreenProps);
+    render(): JSX.Element;
+}
+export {};

SampleApp/javascript/js/NotificationViewScreen.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import IterableNotificationView from './components/IterableNotificationView';
+
+export default class BannerViewScreen extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return <View style={{ flex: 1, padding: 10 }}>
+            <IterableNotificationView
+                titleText='Turn on notifications'
+                titleTextColor='#2489A9'
+                subTitleText='Get updates on scheduled and trending classes.'
+                subTitleTextColor='#2489A9'
+                btnPrimaryText={'Turn on'}
+                btnPrimaryBgColor={'white'}
+                btnPrimaryTextColor={'#2489A9'}
+                backgroundColor={'#C2F0FC'}
+            />
+            <IterableNotificationView
+                titleText='Turn on notifications 2'
+                subTitleText='Get updates on scheduled and trending classes.'
+                titleTextColor='#2489A9'
+                isShowbtnSecondary={true}
+                subTitleTextColor='#2489A9'
+                btnPrimaryText={'Turn on'}
+                btnPrimaryBgColor={'white'}
+                btnPrimaryTextColor={'#2489A9'}
+                backgroundColor={'#C2F0FC'}
+                btnSecondaryText={'Not now'}
+                btnSecondaryTextColor={'#2489A9'}
+            />
+        </View>
+    }
+}

SampleApp/javascript/js/components/IterableBannerView.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react'
+import {
+   View,
+   Text,
+   Image,
+   TouchableOpacity
+} from 'react-native'
+import {
+   containerProps,
+   imageProps,
+   titleLabelProps,
+   subTitleLabelProps,
+   btnPrimaryProps,
+   btnSecondaryProps
+} from '../types/commonType';
+
+type bannerViewProps = containerProps & imageProps & titleLabelProps & subTitleLabelProps & btnPrimaryProps & btnSecondaryProps
+
+const IterableBannerView = (props: bannerViewProps) => {
+
+   const imgURI = props?.imgSrc ? props.imgSrc : 'https://codesymphony.in/assets/projects/noobstrom/noob-web-4.png';
+   const bannerBorderRadius = props.borderRadius ? props.borderRadius : 10;
+
+   return (
+      <View style={{
+         marginBottom: 20,
+         borderRadius: bannerBorderRadius,
+         backgroundColor: props?.backgroundColor ? props?.backgroundColor : '#E4E4E4',
+         shadowColor: props?.shadowColor ? props?.shadowColor : '#470000',
+         shadowOffset: {
+            width: props?.shadowWidth ? props?.shadowWidth : 0,
+            height: props?.shadowHeight ? props?.shadowHeight : 1
+         },
+         shadowOpacity: props?.shadowOpacity ? props?.shadowOpacity : 0.2,
+         elevation: 1
+      }}>
+         <View style={{ paddingHorizontal: 10 }}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
+               <Text style={{ fontSize: props?.titleFontSize ? props?.titleFontSize : 18, color: props?.titleTextColor ? props?.titleTextColor : 'black', marginVertical: 10, fontWeight: '700' }}>
+                  {props?.titleText ? props?.titleText : 'Banner View Title'}
+               </Text>
+               <View style={{ height: 50, width: 50 }}>
+                  <Image source={{ uri: imgURI }} style={{ height: props?.imgHeight ? props?.imgHeight : '100%', width: props?.imgWidth ? props?.imgWidth : '100%' }} />
+               </View>
+            </View>
+            <Text style={{ fontSize: props?.subTitleFontSize ? props?.subTitleFontSize : 16, color: props?.subTitleTextColor ? props?.subTitleTextColor : 'black', marginVertical: 6 }}>
+               {props?.subTitleText ? props?.subTitleText : "Lorem ipsum dummy text, Lorem ipsum dummy text, Lorem ipsum dummy text, Lorem ipsum dummy text"}
+            </Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 18 }}>
+               <TouchableOpacity onPress={() => props?.btnPrimaryOnClick ? props?.btnPrimaryOnClick() : null} 
+                  style={{ height: 35, paddingHorizontal: 10, borderRadius: 25, justifyContent: 'center', alignItems: 'center', backgroundColor: props?.btnPrimaryBgColor ? props?.btnPrimaryBgColor : '#6A266D'}}>
+                  <Text style={{
+                     fontSize: props?.btnPrimaryFontSize ? props?.btnPrimaryFontSize : 14,
+                     color: props?.btnPrimaryTextColor ? props?.btnPrimaryTextColor : 'white',
+                     fontWeight: 'bold'
+                  }}>
+                     {props?.btnPrimaryText ? props.btnPrimaryText : "Learn more"}
+                  </Text>
+               </TouchableOpacity>
+               {props?.isShowbtnSecondary ? <TouchableOpacity onPress={() => props?.btnSecondaryOnClick ? props?.btnSecondaryOnClick() : null} style={{ justifyContent: 'center', alignItems: 'center', marginLeft: 20 }}>
+                  <Text style={{
+                     fontSize: props?.btnSecondaryFontSize ? props?.btnSecondaryFontSize : 14,
+                     color: props?.btnSecondaryTextColor ? props?.btnSecondaryTextColor : 'black',
+                     fontWeight: 'bold'
+                  }}>
+                     {props?.btnSecondaryText ? props?.btnSecondaryText : "action"}
+                  </Text>
+               </TouchableOpacity> : null}
+            </View>
+         </View>
+      </View>
+   )
+}
+
+export default IterableBannerView