From 804ce963861df3503714dba794783e3821cf59fc Mon Sep 17 00:00:00 2001 From: Vishal Joshi Date: Fri, 14 Jul 2023 11:05:58 +0530 Subject: [PATCH] Added Banner View --- SampleApp/javascript/js/App.js | 43 ++++------- SampleApp/javascript/js/BannerViewScreen.d.ts | 13 ++++ SampleApp/javascript/js/BannerViewScreen.js | 26 +++++++ SampleApp/javascript/js/HomeScreen.js | 37 ++++++--- .../js/components/IterableBannerView.tsx | 76 +++++++++++++++++++ SampleApp/javascript/js/types/commonType.ts | 45 +++++++++++ .../xcshareddata/IDEWorkspaceChecks.plist | 8 ++ ts/components/IterableBannerView.tsx | 76 +++++++++++++++++++ ts/index.ts | 2 + ts/types/commonType.ts | 45 +++++++++++ 10 files changed, 335 insertions(+), 36 deletions(-) create mode 100644 SampleApp/javascript/js/BannerViewScreen.d.ts create mode 100644 SampleApp/javascript/js/BannerViewScreen.js create mode 100644 SampleApp/javascript/js/components/IterableBannerView.tsx create mode 100644 SampleApp/javascript/js/types/commonType.ts create mode 100644 SampleApp/typescript/ios/SampleApp.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist create mode 100644 ts/components/IterableBannerView.tsx create mode 100644 ts/types/commonType.ts diff --git a/SampleApp/javascript/js/App.js b/SampleApp/javascript/js/App.js index 663034bba..0cb80b258 100644 --- a/SampleApp/javascript/js/App.js +++ b/SampleApp/javascript/js/App.js @@ -1,10 +1,11 @@ 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 BannerViewScreen from './BannerViewScreen'; + +const Stack = createStackNavigator(); // Step 1: // Import the Iterable and IterableConfig class. @@ -26,7 +27,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 +38,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 ( + + + + + ) } navigate(coffee) { 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; + navigation: StackNavigationProp; +}; +export default class BannerViewScreen extends Component { + 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 + + + + } +} diff --git a/SampleApp/javascript/js/HomeScreen.js b/SampleApp/javascript/js/HomeScreen.js index bd476ffb0..35de6a778 100644 --- a/SampleApp/javascript/js/HomeScreen.js +++ b/SampleApp/javascript/js/HomeScreen.js @@ -1,17 +1,36 @@ 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"); } + + navigateToNotificationView() { + console.log("Notification View"); + } + + navigateToBannerView() { + this.props.navigation.navigate('BannerView'); + } + 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 + this.navigateToCardView()}> + {"Card View Demo"} + + + this.navigateToNotificationView()}> + {"Notification View Demo"} + + + this.navigateToBannerView()}> + {"Banner View Demo"} + + } -} +} \ No newline at end of file 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 ( + + + + + {props?.titleText ? props?.titleText : 'Banner View Title'} + + + + + + + {props?.subTitleText ? props?.subTitleText : "Lorem ipsum dummy text, Lorem ipsum dummy text, Lorem ipsum dummy text, Lorem ipsum dummy text"} + + + props?.btnPrimaryOnClick ? props?.btnPrimaryOnClick() : null} + style={{ height: 35, paddingHorizontal: 10, borderRadius: 25, justifyContent: 'center', alignItems: 'center', backgroundColor: props?.btnPrimaryBgColor ? props?.btnPrimaryBgColor : '#6A266D'}}> + + {props?.btnPrimaryText ? props.btnPrimaryText : "Learn more"} + + + {props?.isShowbtnSecondary ? props?.btnSecondaryOnClick ? props?.btnSecondaryOnClick() : null} style={{ justifyContent: 'center', alignItems: 'center', marginLeft: 20 }}> + + {props?.btnSecondaryText ? props?.btnSecondaryText : "action"} + + : null} + + + + ) +} + +export default IterableBannerView \ No newline at end of file diff --git a/SampleApp/javascript/js/types/commonType.ts b/SampleApp/javascript/js/types/commonType.ts new file mode 100644 index 000000000..dba98b728 --- /dev/null +++ b/SampleApp/javascript/js/types/commonType.ts @@ -0,0 +1,45 @@ +export type containerProps = { + borderRadius?: number, + backgroundColor?: string, + shadowColor?: string, + shadowWidth?: number, + shadowHeight?: number, + shadowOpacity?: number + } + +export type imageProps = { + imgHeight?: number, + imgWidth?: number, + imgSrc: string + } + +export type titleLabelProps = { + titleText: string, + titleFontSize?: number, + titleTextColor?: string, + } + +export type subTitleLabelProps = { + subTitleText: string, + subTitleFontSize?: number, + subTitleTextColor?: string, + } + +export type btnPrimaryProps = { + btnPrimaryText: string, + btnPrimaryFontSize?: number, + btnPrimaryTextColor?: string, + btnPrimaryBorderRadius?: number, + btnPrimaryBgColor?: string, + btnPrimaryOnClick?: Function + } + +export type btnSecondaryProps = { + btnSecondaryText: string, + btnSecondaryFontSize?: number, + btnSecondaryTextColor?: string, + btnSecondaryBorderRadius?: number, + btnSecondaryBgColor?: string, + isShowbtnSecondary?: boolean, + btnSecondaryOnClick?: Function + } \ 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 @@ + + + + + IDEDidComputeMac32BitWarning + + + 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 ( + + + + + {props?.titleText ? props?.titleText : 'Banner View Title'} + + + + + + + {props?.subTitleText ? props?.subTitleText : "Lorem ipsum dummy text, Lorem ipsum dummy text, Lorem ipsum dummy text, Lorem ipsum dummy text"} + + + props?.btnPrimaryOnClick ? props?.btnPrimaryOnClick() : null} + style={{ height: 35, paddingHorizontal: 10, borderRadius: 25, justifyContent: 'center', alignItems: 'center', backgroundColor: props?.btnPrimaryBgColor ? props?.btnPrimaryBgColor : '#6A266D'}}> + + {props?.btnPrimaryText ? props.btnPrimaryText : "Learn more"} + + + {props?.isShowbtnSecondary ? props?.btnSecondaryOnClick ? props?.btnSecondaryOnClick() : null} style={{ justifyContent: 'center', alignItems: 'center', marginLeft: 20 }}> + + {props?.btnSecondaryText ? props?.btnSecondaryText : "action"} + + : null} + + + + ) +} + +export default IterableBannerView \ No newline at end of file diff --git a/ts/index.ts b/ts/index.ts index c32a40cd8..d47bab591 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -40,6 +40,7 @@ import useDeviceOrientation from './useDeviceOrientation' import InboxImpressionRowInfo from './InboxImpressionRowInfo' import IterableConfig from './IterableConfig' +import IterableBannerView from './components/IterableBannerView' export { Iterable, @@ -60,6 +61,7 @@ export { IterableInAppMessage, IterableInAppCloseSource, IterableInAppDeleteSource, + IterableBannerView, IterableInboxEmptyState, IterableInboxMessageCell, useAppStateListener, diff --git a/ts/types/commonType.ts b/ts/types/commonType.ts new file mode 100644 index 000000000..dba98b728 --- /dev/null +++ b/ts/types/commonType.ts @@ -0,0 +1,45 @@ +export type containerProps = { + borderRadius?: number, + backgroundColor?: string, + shadowColor?: string, + shadowWidth?: number, + shadowHeight?: number, + shadowOpacity?: number + } + +export type imageProps = { + imgHeight?: number, + imgWidth?: number, + imgSrc: string + } + +export type titleLabelProps = { + titleText: string, + titleFontSize?: number, + titleTextColor?: string, + } + +export type subTitleLabelProps = { + subTitleText: string, + subTitleFontSize?: number, + subTitleTextColor?: string, + } + +export type btnPrimaryProps = { + btnPrimaryText: string, + btnPrimaryFontSize?: number, + btnPrimaryTextColor?: string, + btnPrimaryBorderRadius?: number, + btnPrimaryBgColor?: string, + btnPrimaryOnClick?: Function + } + +export type btnSecondaryProps = { + btnSecondaryText: string, + btnSecondaryFontSize?: number, + btnSecondaryTextColor?: string, + btnSecondaryBorderRadius?: number, + btnSecondaryBgColor?: string, + isShowbtnSecondary?: boolean, + btnSecondaryOnClick?: Function + } \ No newline at end of file