diff --git a/SampleApp/javascript/js/App.js b/SampleApp/javascript/js/App.js
index 93a59e4d3..e90334ef2 100644
--- a/SampleApp/javascript/js/App.js
+++ b/SampleApp/javascript/js/App.js
@@ -3,6 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { coffees } from './Data';
 import { createStackNavigator } from '@react-navigation/stack';
 import HomeScreen from './HomeScreen';
+import BannerViewScreen from './BannerViewScreen';
 import NotificationViewScreen from './NotificationViewScreen';
 
 const Stack = createStackNavigator();
@@ -54,6 +55,7 @@ export default class App extends React.Component {
         return (<NavigationContainer>
             <Stack.Navigator>
                 <Stack.Screen name="Home" component={HomeScreen} />
+                <Stack.Screen name="BannerView" component={BannerViewScreen} />
                 <Stack.Screen name="NotificationView" component={NotificationViewScreen} />
             </Stack.Navigator>
         </NavigationContainer>)
diff --git a/SampleApp/javascript/js/BannerViewScreen.d.ts b/SampleApp/javascript/js/BannerViewScreen.d.ts
new file mode 100644
index 000000000..9fe51c8dc
--- /dev/null
+++ b/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 {};
diff --git a/SampleApp/javascript/js/BannerViewScreen.js b/SampleApp/javascript/js/BannerViewScreen.js
new file mode 100644
index 000000000..8d2a69882
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/SampleApp/javascript/js/HomeScreen.js b/SampleApp/javascript/js/HomeScreen.js
index 7d7e33606..2f17e8c0c 100644
--- a/SampleApp/javascript/js/HomeScreen.js
+++ b/SampleApp/javascript/js/HomeScreen.js
@@ -5,19 +5,20 @@ export default class HomeScreen extends Component {
     constructor(props) {
         super(props);
     }
-
     navigateToCardView() {
         console.log("Card View");
     }
-
+  
+    navigateToBannerView() {
+      console.log("Banner View");
+      this.props.navigation.navigate('BannerView');
+    }
+  
     navigateToNotificationView() {
+        console.log("Notification View");
         this.props.navigation.navigate('NotificationView');
     }
 
-    navigateToBannerView() {
-        console.log("Banner View");
-    }
-
     render() {
         return <View style={{ flex: 1, padding: 10 }}>
             <TouchableOpacity style={{ padding: 10, width: '100%', justifyContent: 'center' }} onPress={() => this.navigateToCardView()}>
diff --git a/SampleApp/javascript/js/components/IterableBannerView.tsx b/SampleApp/javascript/js/components/IterableBannerView.tsx
new file mode 100644
index 000000000..ffabe2c87
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/SampleApp/typescript/ios/SampleApp.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/SampleApp/typescript/ios/SampleApp.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 000000000..18d981003
--- /dev/null
+++ b/SampleApp/typescript/ios/SampleApp.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/ts/components/IterableBannerView.tsx b/ts/components/IterableBannerView.tsx
new file mode 100644
index 000000000..ffabe2c87
--- /dev/null
+++ b/ts/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
\ No newline at end of file
diff --git a/ts/index.ts b/ts/index.ts
index 9bbe6079d..2370681c4 100644
--- a/ts/index.ts
+++ b/ts/index.ts
@@ -40,8 +40,8 @@ import useDeviceOrientation from './useDeviceOrientation'
 import InboxImpressionRowInfo from './InboxImpressionRowInfo'
 
 import IterableConfig from './IterableConfig'
+import IterableBannerView from './components/IterableBannerView'
 import { IterableDataRegion } from './IterableDataRegion'
-
 import IterableNotificationView from './components/IterableNotificationView';
 
 export {
@@ -63,6 +63,7 @@ export {
   IterableInAppMessage,
   IterableInAppCloseSource,
   IterableInAppDeleteSource,
+  IterableBannerView,
   IterableNotificationView,
   IterableInboxEmptyState,
   IterableInboxMessageCell,
diff --git a/ts/types/commonType.ts b/ts/types/commonType.ts
index 64595a5b2..1135f530e 100644
--- a/ts/types/commonType.ts
+++ b/ts/types/commonType.ts
@@ -42,4 +42,4 @@ export type btnSecondaryProps = {
     btnSecondaryBgColor?: string,
     isShowbtnSecondary?: boolean,
     btnSecondaryOnClick?: Function
-}
\ No newline at end of file
+}