diff --git a/SampleApp/javascript/js/App.js b/SampleApp/javascript/js/App.js index 663034bba..e7e2817c1 100644 --- a/SampleApp/javascript/js/App.js +++ b/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 ( + + + + + ) } 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/CardViewScreen.d.ts b/SampleApp/javascript/js/CardViewScreen.d.ts new file mode 100644 index 000000000..5026df125 --- /dev/null +++ b/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; + navigation: StackNavigationProp; +}; +export default class CardViewScreen extends Component { + constructor(props: CardViewScreenProps); + render(): JSX.Element; +} +export {}; diff --git a/SampleApp/javascript/js/CardViewScreen.js b/SampleApp/javascript/js/CardViewScreen.js new file mode 100644 index 000000000..95c838fa9 --- /dev/null +++ b/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 + + + + } +} diff --git a/SampleApp/javascript/js/HomeScreen.d.ts b/SampleApp/javascript/js/HomeScreen.d.ts index 74b6c9a7e..03b9a0496 100644 --- a/SampleApp/javascript/js/HomeScreen.d.ts +++ b/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; navigation: StackNavigationProp; }; export default class HomeScreen extends Component { constructor(props: HomeScreenProps); - navigate(coffee: Coffee): void; + navigate(): void; render(): JSX.Element; } export {}; diff --git a/SampleApp/javascript/js/HomeScreen.js b/SampleApp/javascript/js/HomeScreen.js index bd476ffb0..88a028092 100644 --- a/SampleApp/javascript/js/HomeScreen.js +++ b/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 + 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/HomeTab.js b/SampleApp/javascript/js/HomeTab.js index e9052f824..1a537bb3f 100644 --- a/SampleApp/javascript/js/HomeTab.js +++ b/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 }))); } } diff --git a/SampleApp/javascript/js/NotificationViewScreen.d.ts b/SampleApp/javascript/js/NotificationViewScreen.d.ts new file mode 100644 index 000000000..ae27b7834 --- /dev/null +++ b/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; + navigation: StackNavigationProp; +}; +export default class NotificationViewScreen extends Component { + constructor(props: NotificationViewScreenProps); + render(): JSX.Element; +} +export {}; diff --git a/SampleApp/javascript/js/NotificationViewScreen.js b/SampleApp/javascript/js/NotificationViewScreen.js new file mode 100644 index 000000000..07bd574d3 --- /dev/null +++ b/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 + + + + } +} 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/components/IterableCardView.tsx b/SampleApp/javascript/js/components/IterableCardView.tsx new file mode 100644 index 000000000..4951cbf9b --- /dev/null +++ b/SampleApp/javascript/js/components/IterableCardView.tsx @@ -0,0 +1,74 @@ +// @ts-nocheck +import React from 'react' +import { + View, + Text, + StyleSheet, + Image, + TouchableOpacity +} from 'react-native' +import { + containerProps, + imageProps, + titleLabelProps, + subTitleLabelProps, + btnPrimaryProps, + btnSecondaryProps +} from '../types/commonType'; + +type cardViewProps = containerProps & imageProps & titleLabelProps & subTitleLabelProps & btnPrimaryProps & btnSecondaryProps + +const IterableCardView = (props: cardViewProps) => { + + const imgURI = props?.imgSrc ? props.imgSrc : 'https://codesymphony.in/assets/projects/noobstrom/noob-web-4.png'; + const cardBorderRadius = props.borderRadius ? props.borderRadius : 10; + + return ( + + + + + + + {props?.titleText ? props?.titleText : 'Card 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={{ justifyContent: 'center', alignItems: 'center' }}> + + {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 IterableCardView \ No newline at end of file diff --git a/SampleApp/javascript/js/components/IterableNotificationView.tsx b/SampleApp/javascript/js/components/IterableNotificationView.tsx new file mode 100644 index 000000000..2982b8e22 --- /dev/null +++ b/SampleApp/javascript/js/components/IterableNotificationView.tsx @@ -0,0 +1,68 @@ +// @ts-nocheck +import React from 'react' +import { + View, + Text, + TouchableOpacity +} from 'react-native' +import { + containerProps, + imageProps, + titleLabelProps, + subTitleLabelProps, + btnPrimaryProps, + btnSecondaryProps +} from '../types/commonType'; + +type notificationViewProps = containerProps & imageProps & titleLabelProps & subTitleLabelProps & btnPrimaryProps & btnSecondaryProps + +const IterableNotificationView = (props: notificationViewProps) => { + const notificationBorderRadius = props.borderRadius ? props.borderRadius : 10; + + return ( + + + + {props?.titleText ? props?.titleText : 'Notification 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 IterableNotificationView \ 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/javascript/package.json b/SampleApp/javascript/package.json index 3d60efb33..daab44b04 100644 --- a/SampleApp/javascript/package.json +++ b/SampleApp/javascript/package.json @@ -14,7 +14,8 @@ "@react-native-community/masked-view": "^0.1.10", "@react-native-community/toolbar-android": "^0.1.0-rc.2", "@react-navigation/bottom-tabs": "^5.4.5", - "@react-navigation/native": "^5.4.0", + "@react-navigation/native": "^6.1.7", + "@react-navigation/native-stack": "^6.9.13", "@react-navigation/stack": "^5.3.7", "react": "^17.0.2", "react-native": "^0.64.1", @@ -22,8 +23,8 @@ "react-native-gesture-handler": "^1.6.1", "react-native-ionicons": "^5.0.0-rc", "react-native-reanimated": "^1.8.0", - "react-native-safe-area-context": "^0.7.3", - "react-native-screens": "^2.7.0", + "react-native-safe-area-context": "^4.7.1", + "react-native-screens": "^3.22.1", "react-native-vector-icons": "^6.6.0", "react-navigation": "^4.3.9", "react-navigation-tabs": "^2.8.13" diff --git a/SampleApp/javascript/yarn.lock b/SampleApp/javascript/yarn.lock index 68e3b2fb8..895b02315 100644 --- a/SampleApp/javascript/yarn.lock +++ b/SampleApp/javascript/yarn.lock @@ -760,10 +760,10 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== -"@iterable/react-native-sdk@^1.3.12": - version "1.3.12" - resolved "https://registry.yarnpkg.com/@iterable/react-native-sdk/-/react-native-sdk-1.3.12.tgz#e0f3176f45aeacd096a02aeca50f916c39b25ef7" - integrity sha512-Cn5xxuQ2+Cretm29hGYrq0zyMhXThaY0yvqRQRvSxDMrOaUGGwHbBnegvuswyDnwVUPHcPh004LuWcgFpZOsRg== +"@iterable/react-native-sdk@^1.3.16": + version "1.3.17" + resolved "https://registry.yarnpkg.com/@iterable/react-native-sdk/-/react-native-sdk-1.3.17.tgz#3cf666241faa729c78abab6cc7ca33c5c054e76d" + integrity sha512-LHdTPDGTxuKxwlaC9tBLWtuZ0zY03GKEjv7tBcHOjTBRbS2+6j9qGQxuSBTUvlILucOEEph3gd97O78U6nqWvw== dependencies: "@react-native-community/hooks" "^2.6.0" "@react-navigation/native" "^6.0.6" @@ -1048,17 +1048,6 @@ query-string "^6.13.6" react-is "^16.13.0" -"@react-navigation/core@^5.16.1": - version "5.16.1" - resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.16.1.tgz#e0d308bd9bbd930114ce55c4151806b6d7907f69" - integrity sha512-3AToC7vPNeSNcHFLd1h71L6u34hfXoRAS1CxF9Fc4uC8uOrVqcNvphpeFbE0O9Bw6Zpl0BnMFl7E5gaL3KGzNA== - dependencies: - "@react-navigation/routers" "^5.7.4" - escape-string-regexp "^4.0.0" - nanoid "^3.1.15" - query-string "^6.13.6" - react-is "^16.13.0" - "@react-navigation/core@^6.4.8": version "6.4.8" resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.8.tgz#a18e106d3c59cdcfc4ce53f7344e219ed35c88ed" @@ -1071,6 +1060,31 @@ react-is "^16.13.0" use-latest-callback "^0.1.5" +"@react-navigation/core@^6.4.9": + version "6.4.9" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.9.tgz#aa09ce534f5393427cb993cf242abdbd848fb2c7" + integrity sha512-G9GH7bP9x0qqupxZnkSftnkn4JoXancElTvFc8FVGfEvxnxP+gBo3wqcknyBi7M5Vad4qecsYjCOa9wqsftv9g== + dependencies: + "@react-navigation/routers" "^6.1.9" + escape-string-regexp "^4.0.0" + nanoid "^3.1.23" + query-string "^7.1.3" + react-is "^16.13.0" + use-latest-callback "^0.1.5" + +"@react-navigation/elements@^1.3.18": + version "1.3.18" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.18.tgz#d8364b40276f3efb9c229c39da3b8b465f18f0a2" + integrity sha512-/0hwnJkrr415yP0Hf4PjUKgGyfshrvNUKFXN85Mrt1gY49hy9IwxZgrrxlh0THXkPeq8q4VWw44eHDfAcQf20Q== + +"@react-navigation/native-stack@^6.9.13": + version "6.9.13" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.13.tgz#f308c398ee18fcd45de8ec7c04fe0641735feb31" + integrity sha512-ejlepMrvFneewL+XlXHHhn+6y3lwvavM4/R7XwBV0XJxCymujexK+7Vkg7UcvJ1lx4CRhOcyBSNfGmdNIHREyQ== + dependencies: + "@react-navigation/elements" "^1.3.18" + warn-once "^0.1.0" + "@react-navigation/native@^3.8.4": version "3.8.4" resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-3.8.4.tgz#4d77f86506364ecf18b33c7f8740afb6763d0b37" @@ -1079,15 +1093,6 @@ hoist-non-react-statics "^3.3.2" react-native-safe-area-view "^0.14.9" -"@react-navigation/native@^5.4.0": - version "5.9.8" - resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.8.tgz#ac76ee6390ea7ce807486ca5c38d903e23433a97" - integrity sha512-DNbcDHXQPSFDLn51kkVVJjT3V7jJy2GztNYZe/2bEg29mi5QEcHHcpifjMCtyFKntAOWzKlG88UicIQ17UEghg== - dependencies: - "@react-navigation/core" "^5.16.1" - escape-string-regexp "^4.0.0" - nanoid "^3.1.15" - "@react-navigation/native@^6.0.6": version "6.1.6" resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.6.tgz#84ff5cf85b91f660470fa9407c06c8ee393d5792" @@ -1098,12 +1103,15 @@ fast-deep-equal "^3.1.3" nanoid "^3.1.23" -"@react-navigation/routers@^5.7.4": - version "5.7.4" - resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.7.4.tgz#8b5460e841a0c64f6c9a5fbc2a1eb832432d4fb0" - integrity sha512-0N202XAqsU/FlE53Nmh6GHyMtGm7g6TeC93mrFAFJOqGRKznT0/ail+cYlU6tNcPA9AHzZu1Modw1eoDINSliQ== +"@react-navigation/native@^6.1.7": + version "6.1.7" + resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.7.tgz#968ef85b76d35f63111890668836fe2f125bbf90" + integrity sha512-W6E3+AtTombMucCRo6q7vPmluq8hSjS+IxfazJ/SokOe7ChJX7eLvvralIsJkjFj3iWV1KgOSnHxa6hdiFasBw== dependencies: - nanoid "^3.1.15" + "@react-navigation/core" "^6.4.9" + escape-string-regexp "^4.0.0" + fast-deep-equal "^3.1.3" + nanoid "^3.1.23" "@react-navigation/routers@^6.1.8": version "6.1.8" @@ -1112,6 +1120,13 @@ dependencies: nanoid "^3.1.23" +"@react-navigation/routers@^6.1.9": + version "6.1.9" + resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.9.tgz#73f5481a15a38e36592a0afa13c3c064b9f90bed" + integrity sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA== + dependencies: + nanoid "^3.1.23" + "@react-navigation/stack@^5.3.7": version "5.14.9" resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.9.tgz#49c7b9316e6fb456e9766c901e0d607862f0ea7d" @@ -4310,7 +4325,7 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== -nanoid@^3.1.15, nanoid@^3.1.23: +nanoid@^3.1.23: version "3.3.6" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== @@ -4867,6 +4882,11 @@ react-devtools-core@^4.6.0: shell-quote "^1.6.1" ws "^7" +react-freeze@^1.0.0: + version "1.0.3" + resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d" + integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g== + react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -4941,16 +4961,16 @@ react-native-reanimated@^1.8.0: dependencies: fbjs "^1.0.0" -react-native-safe-area-context@^0.7.3: - version "0.7.3" - resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.7.3.tgz#ad6bd4abbabe195332c53810e4ce5851eb21aa2a" - integrity sha512-9Uqu1vlXPi+2cKW/CW6OnHxA76mWC4kF3wvlqzq4DY8hn37AeiXtLFs2WkxH4yXQRrnJdP6ivc65Lz+MqwRZAA== - react-native-safe-area-context@^4.1.2: version "4.5.0" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz#9208313236e8f49e1920ac1e2a2c975f03aed284" integrity sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ== +react-native-safe-area-context@^4.7.1: + version "4.7.1" + resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.1.tgz#b7be2d68dee909717cfa439bb5c7966042d231e8" + integrity sha512-X2pJG2ttmAbiGlItWedvDkZg1T1ikmEDiz+7HsiIwAIm2UbFqlhqn+B1JF53mSxPzdNaDcCQVHRNPvj8oFu6Yg== + react-native-safe-area-view@^0.14.9: version "0.14.9" resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d" @@ -4958,10 +4978,13 @@ react-native-safe-area-view@^0.14.9: dependencies: hoist-non-react-statics "^2.3.1" -react-native-screens@^2.7.0: - version "2.18.1" - resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.18.1.tgz#47b9991c6f762d00d0ed3233e5283d523e859885" - integrity sha512-r5WZLpmx2hHjC1RgMdPq5YpSU9tEhBpUaZ5M1SUtNIONyiLqQVxabhRCINdebIk4depJiIl7yw2Q85zJyeX6fw== +react-native-screens@^3.22.1: + version "3.22.1" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.22.1.tgz#b0eb0696dbf1f9a852061cc71c0f8cdb95ed8e53" + integrity sha512-ffzwUdVKf+iLqhWSzN5DXBm0s2w5sN0P+TaHHPAx42LT7+DT0g8PkHT1QDvxpR5vCEPSS1i3EswyVK4HCuhTYg== + dependencies: + react-freeze "^1.0.0" + warn-once "^0.1.0" react-native-status-bar-height@^2.2.0: version "2.6.0" @@ -6088,6 +6111,11 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.12" +warn-once@^0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43" + integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q== + wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8" 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/SampleApp/typescript/yarn.lock b/SampleApp/typescript/yarn.lock index 0079d6d8c..402048b72 100644 --- a/SampleApp/typescript/yarn.lock +++ b/SampleApp/typescript/yarn.lock @@ -760,10 +760,10 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== -"@iterable/react-native-sdk@^1.3.11": - version "1.3.12" - resolved "https://registry.yarnpkg.com/@iterable/react-native-sdk/-/react-native-sdk-1.3.12.tgz#e0f3176f45aeacd096a02aeca50f916c39b25ef7" - integrity sha512-Cn5xxuQ2+Cretm29hGYrq0zyMhXThaY0yvqRQRvSxDMrOaUGGwHbBnegvuswyDnwVUPHcPh004LuWcgFpZOsRg== +"@iterable/react-native-sdk@^1.3.12": + version "1.3.14" + resolved "https://registry.yarnpkg.com/@iterable/react-native-sdk/-/react-native-sdk-1.3.14.tgz#24f1276e368a724388c3e0b4ec007286ab0e78ac" + integrity sha512-kVRmy5o8T0BkkoXXXkIwxrtXIXqW1T1CLnjHOuhj8gRRU3W3pVpestAkabVW+fxiFqtRxnE9+gOjgPbr4MPVxg== dependencies: "@react-native-community/hooks" "^2.6.0" "@react-navigation/native" "^6.0.6" 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/components/IterableCardView.tsx b/ts/components/IterableCardView.tsx new file mode 100644 index 000000000..b64e40b17 --- /dev/null +++ b/ts/components/IterableCardView.tsx @@ -0,0 +1,73 @@ +// @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 cardViewProps = containerProps & imageProps & titleLabelProps & subTitleLabelProps & btnPrimaryProps & btnSecondaryProps + +const IterableCardView = (props: cardViewProps) => { + + const imgURI = props?.imgSrc ? props.imgSrc : 'https://codesymphony.in/assets/projects/noobstrom/noob-web-4.png'; + const cardBorderRadius = props.borderRadius ? props.borderRadius : 10; + + return ( + + + + + + + {props?.titleText ? props?.titleText : 'Card 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={{ justifyContent: 'center', alignItems: 'center' }}> + + {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 IterableCardView \ No newline at end of file diff --git a/ts/components/IterableNotificationView.tsx b/ts/components/IterableNotificationView.tsx new file mode 100644 index 000000000..2982b8e22 --- /dev/null +++ b/ts/components/IterableNotificationView.tsx @@ -0,0 +1,68 @@ +// @ts-nocheck +import React from 'react' +import { + View, + Text, + TouchableOpacity +} from 'react-native' +import { + containerProps, + imageProps, + titleLabelProps, + subTitleLabelProps, + btnPrimaryProps, + btnSecondaryProps +} from '../types/commonType'; + +type notificationViewProps = containerProps & imageProps & titleLabelProps & subTitleLabelProps & btnPrimaryProps & btnSecondaryProps + +const IterableNotificationView = (props: notificationViewProps) => { + const notificationBorderRadius = props.borderRadius ? props.borderRadius : 10; + + return ( + + + + {props?.titleText ? props?.titleText : 'Notification 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 IterableNotificationView \ No newline at end of file diff --git a/ts/index.ts b/ts/index.ts index 2d9e14ca6..1e4227ebf 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -38,9 +38,12 @@ import IterableInAppMessage from './IterableInAppMessage' import useAppStateListener from './useAppStateListener' import useDeviceOrientation from './useDeviceOrientation' import InboxImpressionRowInfo from './InboxImpressionRowInfo' +import IterableCardView from '../ts/components/IterableCardView'; import IterableConfig from './IterableConfig' +import IterableBannerView from './components/IterableBannerView' import { IterableDataRegion } from './IterableDataRegion' +import IterableNotificationView from './components/IterableNotificationView'; export { Iterable, @@ -61,6 +64,9 @@ export { IterableInAppMessage, IterableInAppCloseSource, IterableInAppDeleteSource, + IterableBannerView, + IterableNotificationView, + IterableCardView, IterableInboxEmptyState, IterableInboxMessageCell, useAppStateListener, diff --git a/ts/types/commonType.ts b/ts/types/commonType.ts new file mode 100644 index 000000000..1135f530e --- /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 +} diff --git a/yarn.lock b/yarn.lock index 9f04505a2..5f8584205 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1597,7 +1597,7 @@ "@typescript-eslint/types" "5.62.0" eslint-visitor-keys "^3.3.0" -"@xmldom/xmldom@^0.8.8": +"@xmldom/xmldom@^0.8.8" version "0.8.10" resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99" integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==