react-native-flyy 1.4.21 → 1.4.22

package/lib/commonjs/index.js

@@ -3,13 +3,156 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlyyWidget = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const {
   Flyy
 } = _reactNative.NativeModules;
 var _default = Flyy;
 exports.default = _default;
+
+const FlyyWidget = ({
+  widgetStyle = {
+    rewardsButtonIcon: require('./assets/images/rewardwidget.png'),
+    offersButtonIcon: require('./assets/images/offerswidget.png'),
+    walletButtonIcon: require('./assets/images/walletwidget.png'),
+    rewardButtonTitle: 'Rewards',
+    offerButtonTitle: 'Offers',
+    walletButtonTitle: 'Wallet',
+    buttonTitleFontFamily: 'Montserrat-Bold',
+    buttonBorderWidth: 0.5,
+    buttonTitleTextSize: 16.0,
+    iconCornerRadius: 30.0,
+    buttonCornerRadius: 15.0,
+    buttonTitleTextColor: 'black',
+    buttonBorderColor: 'white',
+    containerBackgroundColor: '#ebedeb',
+    buttonIconBackgroundColor: '#654EA3',
+    buttonBackgroundColor: 'white'
+  }
+}) => {
+  var _widgetStyle$buttonBa, _widgetStyle$buttonCo, _widgetStyle$buttonBo, _widgetStyle$buttonBo2, _widgetStyle$containe, _widgetStyle$offerBut, _widgetStyle$offersBu, _widgetStyle$rewardBu, _widgetStyle$rewardsB, _widgetStyle$walletBu, _widgetStyle$walletBu2;
+
+  const buttonStyle = {
+    backgroundColor: (_widgetStyle$buttonBa = widgetStyle.buttonBackgroundColor) !== null && _widgetStyle$buttonBa !== void 0 ? _widgetStyle$buttonBa : 'white',
+    height: 110,
+    flex: 1,
+    elevation: 1,
+    borderRadius: (_widgetStyle$buttonCo = widgetStyle.buttonCornerRadius) !== null && _widgetStyle$buttonCo !== void 0 ? _widgetStyle$buttonCo : 15.0,
+    borderColor: (_widgetStyle$buttonBo = widgetStyle.buttonBorderColor) !== null && _widgetStyle$buttonBo !== void 0 ? _widgetStyle$buttonBo : 'white',
+    borderWidth: (_widgetStyle$buttonBo2 = widgetStyle.buttonBorderWidth) !== null && _widgetStyle$buttonBo2 !== void 0 ? _widgetStyle$buttonBo2 : 0.5
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      backgroundColor: (_widgetStyle$containe = widgetStyle.containerBackgroundColor) !== null && _widgetStyle$containe !== void 0 ? _widgetStyle$containe : '#ebedeb',
+      height: 160,
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      width: 20
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => {
+      Flyy.openOffersScreen();
+    },
+    style: buttonStyle
+  }, /*#__PURE__*/_react.default.createElement(FlyyCardView, {
+    cardStyle: widgetStyle,
+    buttonTitle: (_widgetStyle$offerBut = widgetStyle.offerButtonTitle) !== null && _widgetStyle$offerBut !== void 0 ? _widgetStyle$offerBut : 'Offers',
+    buttonIcon: (_widgetStyle$offersBu = widgetStyle.offersButtonIcon) !== null && _widgetStyle$offersBu !== void 0 ? _widgetStyle$offersBu : require('./assets/images/offerswidget.png')
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      width: 15
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => {
+      Flyy.openRewardsScreen();
+    },
+    style: buttonStyle
+  }, /*#__PURE__*/_react.default.createElement(FlyyCardView, {
+    cardStyle: widgetStyle,
+    buttonTitle: (_widgetStyle$rewardBu = widgetStyle.rewardButtonTitle) !== null && _widgetStyle$rewardBu !== void 0 ? _widgetStyle$rewardBu : 'Rewards',
+    buttonIcon: (_widgetStyle$rewardsB = widgetStyle.rewardsButtonIcon) !== null && _widgetStyle$rewardsB !== void 0 ? _widgetStyle$rewardsB : require('./assets/images/rewardwidget.png')
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      width: 15
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => {
+      Flyy.openWalletScreen();
+    },
+    style: buttonStyle
+  }, /*#__PURE__*/_react.default.createElement(FlyyCardView, {
+    cardStyle: widgetStyle,
+    buttonTitle: (_widgetStyle$walletBu = widgetStyle.walletButtonTitle) !== null && _widgetStyle$walletBu !== void 0 ? _widgetStyle$walletBu : 'Wallet',
+    buttonIcon: (_widgetStyle$walletBu2 = widgetStyle.walletButtonIcon) !== null && _widgetStyle$walletBu2 !== void 0 ? _widgetStyle$walletBu2 : require('./assets/images/walletwidget.png')
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      width: 20
+    }
+  }));
+}; // @ts-ignore
+
+
+exports.FlyyWidget = FlyyWidget;
+
+const FlyyCardView = ({
+  cardStyle,
+  buttonTitle,
+  buttonIcon
+}) => {
+  var _cardStyle$buttonIcon, _cardStyle$iconCorner, _cardStyle$buttonTitl, _cardStyle$buttonTitl2;
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height: 10
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      backgroundColor: (_cardStyle$buttonIcon = cardStyle.buttonIconBackgroundColor) !== null && _cardStyle$buttonIcon !== void 0 ? _cardStyle$buttonIcon : '#654EA3',
+      height: 50,
+      width: 50,
+      borderRadius: (_cardStyle$iconCorner = cardStyle.iconCornerRadius) !== null && _cardStyle$iconCorner !== void 0 ? _cardStyle$iconCorner : 30.0,
+      alignSelf: 'center',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: buttonIcon,
+    style: {
+      height: 28,
+      width: 28
+    }
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height: 10
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: {
+      alignSelf: 'center',
+      flexShrink: 1,
+      color: (_cardStyle$buttonTitl = cardStyle.buttonTitleTextColor) !== null && _cardStyle$buttonTitl !== void 0 ? _cardStyle$buttonTitl : 'black',
+      fontSize: cardStyle.buttonTitleTextSize != null ? cardStyle.buttonTitleTextSize < 30 ? cardStyle.buttonTitleTextSize : 30 : 16,
+      fontFamily: (_cardStyle$buttonTitl2 = cardStyle.buttonTitleFontFamily) !== null && _cardStyle$buttonTitl2 !== void 0 ? _cardStyle$buttonTitl2 : 'Montserrat-Bold',
+      textAlign: 'center',
+      paddingLeft: 5,
+      paddingRight: 5
+    },
+    numberOfLines: 1
+  }, buttonTitle), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height: 10
+    }
+  }));
+};
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["Flyy","NativeModules"],"mappings":";;;;;;;AAAA;;AAMA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,0BAAjB;eAEeD,I","sourcesContent":["import { NativeModules } from 'react-native';\n\ntype FlyyType = {\n  multiply(a: number, b: number): Promise<number>;\n};\n\nconst { Flyy } = NativeModules;\n\nexport default Flyy as FlyyType;\n"]}
+{"version":3,"sources":["index.tsx"],"names":["Flyy","NativeModules","FlyyWidget","widgetStyle","rewardsButtonIcon","require","offersButtonIcon","walletButtonIcon","rewardButtonTitle","offerButtonTitle","walletButtonTitle","buttonTitleFontFamily","buttonBorderWidth","buttonTitleTextSize","iconCornerRadius","buttonCornerRadius","buttonTitleTextColor","buttonBorderColor","containerBackgroundColor","buttonIconBackgroundColor","buttonBackgroundColor","buttonStyle","backgroundColor","height","flex","elevation","borderRadius","borderColor","borderWidth","width","flexDirection","justifyContent","alignItems","openOffersScreen","openRewardsScreen","openWalletScreen","FlyyCardView","cardStyle","buttonTitle","buttonIcon","alignSelf","flexShrink","color","fontSize","fontFamily","textAlign","paddingLeft","paddingRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Image,\n  NativeModules,\n  Text,\n  TouchableOpacity,\n  View,\n} from 'react-native';\n\ntype FlyyType = {\n  multiply(a: number, b: number): Promise<number>;\n};\n\nconst { Flyy } = NativeModules;\n\nexport default Flyy as FlyyType;\nexport const FlyyWidget = ({\n  widgetStyle = {\n    rewardsButtonIcon: require('./assets/images/rewardwidget.png'),\n    offersButtonIcon: require('./assets/images/offerswidget.png'),\n    walletButtonIcon: require('./assets/images/walletwidget.png'),\n    rewardButtonTitle: 'Rewards',\n    offerButtonTitle: 'Offers',\n    walletButtonTitle: 'Wallet',\n    buttonTitleFontFamily: 'Montserrat-Bold',\n    buttonBorderWidth: 0.5,\n    buttonTitleTextSize: 16.0,\n    iconCornerRadius: 30.0,\n    buttonCornerRadius: 15.0,\n    buttonTitleTextColor: 'black',\n    buttonBorderColor: 'white',\n    containerBackgroundColor: '#ebedeb',\n    buttonIconBackgroundColor: '#654EA3',\n    buttonBackgroundColor: 'white',\n  },\n}) => {\n  const buttonStyle = {\n    backgroundColor: widgetStyle.buttonBackgroundColor ?? 'white',\n    height: 110,\n    flex: 1,\n    elevation: 1,\n    borderRadius: widgetStyle.buttonCornerRadius ?? 15.0,\n    borderColor: widgetStyle.buttonBorderColor ?? 'white',\n    borderWidth: widgetStyle.buttonBorderWidth ?? 0.5,\n  };\n  return (\n    <View\n      style={{\n        backgroundColor: widgetStyle.containerBackgroundColor ?? '#ebedeb',\n        height: 160,\n        width: '100%',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    >\n      <View style={{ width: 20 }} />\n      <TouchableOpacity\n        onPress={() => {\n          Flyy.openOffersScreen();\n        }}\n        style={buttonStyle}\n      >\n        <FlyyCardView\n          cardStyle={widgetStyle}\n          buttonTitle={widgetStyle.offerButtonTitle ?? 'Offers'}\n          buttonIcon={\n            widgetStyle.offersButtonIcon ??\n            require('./assets/images/offerswidget.png')\n          }\n        />\n      </TouchableOpacity>\n      <View style={{ width: 15 }} />\n      <TouchableOpacity\n        onPress={() => {\n          Flyy.openRewardsScreen();\n        }}\n        style={buttonStyle}\n      >\n        <FlyyCardView\n          cardStyle={widgetStyle}\n          buttonTitle={widgetStyle.rewardButtonTitle ?? 'Rewards'}\n          buttonIcon={\n            widgetStyle.rewardsButtonIcon ??\n            require('./assets/images/rewardwidget.png')\n          }\n        />\n      </TouchableOpacity>\n      <View style={{ width: 15 }} />\n      <TouchableOpacity\n        onPress={() => {\n          Flyy.openWalletScreen();\n        }}\n        style={buttonStyle}\n      >\n        <FlyyCardView\n          cardStyle={widgetStyle}\n          buttonTitle={widgetStyle.walletButtonTitle ?? 'Wallet'}\n          buttonIcon={\n            widgetStyle.walletButtonIcon ??\n            require('./assets/images/walletwidget.png')\n          }\n        />\n      </TouchableOpacity>\n      <View style={{ width: 20 }} />\n    </View>\n  );\n};\n\n// @ts-ignore\nconst FlyyCardView = ({ cardStyle, buttonTitle, buttonIcon }) => {\n  return (\n    <View>\n      <View style={{ height: 10 }} />\n      <View\n        style={{\n          backgroundColor: cardStyle.buttonIconBackgroundColor ?? '#654EA3',\n          height: 50,\n          width: 50,\n          borderRadius: cardStyle.iconCornerRadius ?? 30.0,\n          alignSelf: 'center',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}\n      >\n        <Image source={buttonIcon} style={{ height: 28, width: 28 }} />\n      </View>\n      <View style={{ height: 10 }} />\n      <Text\n        style={{\n          alignSelf: 'center',\n          flexShrink: 1,\n          color: cardStyle.buttonTitleTextColor ?? 'black',\n          fontSize:\n            cardStyle.buttonTitleTextSize != null\n              ? cardStyle.buttonTitleTextSize < 30\n                ? cardStyle.buttonTitleTextSize\n                : 30\n              : 16,\n          fontFamily: cardStyle.buttonTitleFontFamily ?? 'Montserrat-Bold',\n          textAlign: 'center',\n          paddingLeft: 5,\n          paddingRight: 5,\n        }}\n        numberOfLines={1}\n      >\n        {buttonTitle}\n      </Text>\n      <View style={{ height: 10 }} />\n    </View>\n  );\n};\n"]}

package/lib/module/index.js

@@ -1,6 +1,142 @@
-import { NativeModules } from 'react-native';
+import React from 'react';
+import { Image, NativeModules, Text, TouchableOpacity, View } from 'react-native';
 const {
   Flyy
 } = NativeModules;
 export default Flyy;
+export const FlyyWidget = ({
+  widgetStyle = {
+    rewardsButtonIcon: require('./assets/images/rewardwidget.png'),
+    offersButtonIcon: require('./assets/images/offerswidget.png'),
+    walletButtonIcon: require('./assets/images/walletwidget.png'),
+    rewardButtonTitle: 'Rewards',
+    offerButtonTitle: 'Offers',
+    walletButtonTitle: 'Wallet',
+    buttonTitleFontFamily: 'Montserrat-Bold',
+    buttonBorderWidth: 0.5,
+    buttonTitleTextSize: 16.0,
+    iconCornerRadius: 30.0,
+    buttonCornerRadius: 15.0,
+    buttonTitleTextColor: 'black',
+    buttonBorderColor: 'white',
+    containerBackgroundColor: '#ebedeb',
+    buttonIconBackgroundColor: '#654EA3',
+    buttonBackgroundColor: 'white'
+  }
+}) => {
+  var _widgetStyle$buttonBa, _widgetStyle$buttonCo, _widgetStyle$buttonBo, _widgetStyle$buttonBo2, _widgetStyle$containe, _widgetStyle$offerBut, _widgetStyle$offersBu, _widgetStyle$rewardBu, _widgetStyle$rewardsB, _widgetStyle$walletBu, _widgetStyle$walletBu2;
+
+  const buttonStyle = {
+    backgroundColor: (_widgetStyle$buttonBa = widgetStyle.buttonBackgroundColor) !== null && _widgetStyle$buttonBa !== void 0 ? _widgetStyle$buttonBa : 'white',
+    height: 110,
+    flex: 1,
+    elevation: 1,
+    borderRadius: (_widgetStyle$buttonCo = widgetStyle.buttonCornerRadius) !== null && _widgetStyle$buttonCo !== void 0 ? _widgetStyle$buttonCo : 15.0,
+    borderColor: (_widgetStyle$buttonBo = widgetStyle.buttonBorderColor) !== null && _widgetStyle$buttonBo !== void 0 ? _widgetStyle$buttonBo : 'white',
+    borderWidth: (_widgetStyle$buttonBo2 = widgetStyle.buttonBorderWidth) !== null && _widgetStyle$buttonBo2 !== void 0 ? _widgetStyle$buttonBo2 : 0.5
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      backgroundColor: (_widgetStyle$containe = widgetStyle.containerBackgroundColor) !== null && _widgetStyle$containe !== void 0 ? _widgetStyle$containe : '#ebedeb',
+      height: 160,
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 20
+    }
+  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => {
+      Flyy.openOffersScreen();
+    },
+    style: buttonStyle
+  }, /*#__PURE__*/React.createElement(FlyyCardView, {
+    cardStyle: widgetStyle,
+    buttonTitle: (_widgetStyle$offerBut = widgetStyle.offerButtonTitle) !== null && _widgetStyle$offerBut !== void 0 ? _widgetStyle$offerBut : 'Offers',
+    buttonIcon: (_widgetStyle$offersBu = widgetStyle.offersButtonIcon) !== null && _widgetStyle$offersBu !== void 0 ? _widgetStyle$offersBu : require('./assets/images/offerswidget.png')
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 15
+    }
+  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => {
+      Flyy.openRewardsScreen();
+    },
+    style: buttonStyle
+  }, /*#__PURE__*/React.createElement(FlyyCardView, {
+    cardStyle: widgetStyle,
+    buttonTitle: (_widgetStyle$rewardBu = widgetStyle.rewardButtonTitle) !== null && _widgetStyle$rewardBu !== void 0 ? _widgetStyle$rewardBu : 'Rewards',
+    buttonIcon: (_widgetStyle$rewardsB = widgetStyle.rewardsButtonIcon) !== null && _widgetStyle$rewardsB !== void 0 ? _widgetStyle$rewardsB : require('./assets/images/rewardwidget.png')
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 15
+    }
+  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => {
+      Flyy.openWalletScreen();
+    },
+    style: buttonStyle
+  }, /*#__PURE__*/React.createElement(FlyyCardView, {
+    cardStyle: widgetStyle,
+    buttonTitle: (_widgetStyle$walletBu = widgetStyle.walletButtonTitle) !== null && _widgetStyle$walletBu !== void 0 ? _widgetStyle$walletBu : 'Wallet',
+    buttonIcon: (_widgetStyle$walletBu2 = widgetStyle.walletButtonIcon) !== null && _widgetStyle$walletBu2 !== void 0 ? _widgetStyle$walletBu2 : require('./assets/images/walletwidget.png')
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 20
+    }
+  }));
+}; // @ts-ignore
+
+const FlyyCardView = ({
+  cardStyle,
+  buttonTitle,
+  buttonIcon
+}) => {
+  var _cardStyle$buttonIcon, _cardStyle$iconCorner, _cardStyle$buttonTitl, _cardStyle$buttonTitl2;
+
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: 10
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      backgroundColor: (_cardStyle$buttonIcon = cardStyle.buttonIconBackgroundColor) !== null && _cardStyle$buttonIcon !== void 0 ? _cardStyle$buttonIcon : '#654EA3',
+      height: 50,
+      width: 50,
+      borderRadius: (_cardStyle$iconCorner = cardStyle.iconCornerRadius) !== null && _cardStyle$iconCorner !== void 0 ? _cardStyle$iconCorner : 30.0,
+      alignSelf: 'center',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: buttonIcon,
+    style: {
+      height: 28,
+      width: 28
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: 10
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      alignSelf: 'center',
+      flexShrink: 1,
+      color: (_cardStyle$buttonTitl = cardStyle.buttonTitleTextColor) !== null && _cardStyle$buttonTitl !== void 0 ? _cardStyle$buttonTitl : 'black',
+      fontSize: cardStyle.buttonTitleTextSize != null ? cardStyle.buttonTitleTextSize < 30 ? cardStyle.buttonTitleTextSize : 30 : 16,
+      fontFamily: (_cardStyle$buttonTitl2 = cardStyle.buttonTitleFontFamily) !== null && _cardStyle$buttonTitl2 !== void 0 ? _cardStyle$buttonTitl2 : 'Montserrat-Bold',
+      textAlign: 'center',
+      paddingLeft: 5,
+      paddingRight: 5
+    },
+    numberOfLines: 1
+  }, buttonTitle), /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: 10
+    }
+  }));
+};
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["NativeModules","Flyy"],"mappings":"AAAA,SAASA,aAAT,QAA8B,cAA9B;AAMA,MAAM;AAAEC,EAAAA;AAAF,IAAWD,aAAjB;AAEA,eAAeC,IAAf","sourcesContent":["import { NativeModules } from 'react-native';\n\ntype FlyyType = {\n  multiply(a: number, b: number): Promise<number>;\n};\n\nconst { Flyy } = NativeModules;\n\nexport default Flyy as FlyyType;\n"]}
+{"version":3,"sources":["index.tsx"],"names":["React","Image","NativeModules","Text","TouchableOpacity","View","Flyy","FlyyWidget","widgetStyle","rewardsButtonIcon","require","offersButtonIcon","walletButtonIcon","rewardButtonTitle","offerButtonTitle","walletButtonTitle","buttonTitleFontFamily","buttonBorderWidth","buttonTitleTextSize","iconCornerRadius","buttonCornerRadius","buttonTitleTextColor","buttonBorderColor","containerBackgroundColor","buttonIconBackgroundColor","buttonBackgroundColor","buttonStyle","backgroundColor","height","flex","elevation","borderRadius","borderColor","borderWidth","width","flexDirection","justifyContent","alignItems","openOffersScreen","openRewardsScreen","openWalletScreen","FlyyCardView","cardStyle","buttonTitle","buttonIcon","alignSelf","flexShrink","color","fontSize","fontFamily","textAlign","paddingLeft","paddingRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Image,\n  NativeModules,\n  Text,\n  TouchableOpacity,\n  View,\n} from 'react-native';\n\ntype FlyyType = {\n  multiply(a: number, b: number): Promise<number>;\n};\n\nconst { Flyy } = NativeModules;\n\nexport default Flyy as FlyyType;\nexport const FlyyWidget = ({\n  widgetStyle = {\n    rewardsButtonIcon: require('./assets/images/rewardwidget.png'),\n    offersButtonIcon: require('./assets/images/offerswidget.png'),\n    walletButtonIcon: require('./assets/images/walletwidget.png'),\n    rewardButtonTitle: 'Rewards',\n    offerButtonTitle: 'Offers',\n    walletButtonTitle: 'Wallet',\n    buttonTitleFontFamily: 'Montserrat-Bold',\n    buttonBorderWidth: 0.5,\n    buttonTitleTextSize: 16.0,\n    iconCornerRadius: 30.0,\n    buttonCornerRadius: 15.0,\n    buttonTitleTextColor: 'black',\n    buttonBorderColor: 'white',\n    containerBackgroundColor: '#ebedeb',\n    buttonIconBackgroundColor: '#654EA3',\n    buttonBackgroundColor: 'white',\n  },\n}) => {\n  const buttonStyle = {\n    backgroundColor: widgetStyle.buttonBackgroundColor ?? 'white',\n    height: 110,\n    flex: 1,\n    elevation: 1,\n    borderRadius: widgetStyle.buttonCornerRadius ?? 15.0,\n    borderColor: widgetStyle.buttonBorderColor ?? 'white',\n    borderWidth: widgetStyle.buttonBorderWidth ?? 0.5,\n  };\n  return (\n    <View\n      style={{\n        backgroundColor: widgetStyle.containerBackgroundColor ?? '#ebedeb',\n        height: 160,\n        width: '100%',\n        flexDirection: 'row',\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    >\n      <View style={{ width: 20 }} />\n      <TouchableOpacity\n        onPress={() => {\n          Flyy.openOffersScreen();\n        }}\n        style={buttonStyle}\n      >\n        <FlyyCardView\n          cardStyle={widgetStyle}\n          buttonTitle={widgetStyle.offerButtonTitle ?? 'Offers'}\n          buttonIcon={\n            widgetStyle.offersButtonIcon ??\n            require('./assets/images/offerswidget.png')\n          }\n        />\n      </TouchableOpacity>\n      <View style={{ width: 15 }} />\n      <TouchableOpacity\n        onPress={() => {\n          Flyy.openRewardsScreen();\n        }}\n        style={buttonStyle}\n      >\n        <FlyyCardView\n          cardStyle={widgetStyle}\n          buttonTitle={widgetStyle.rewardButtonTitle ?? 'Rewards'}\n          buttonIcon={\n            widgetStyle.rewardsButtonIcon ??\n            require('./assets/images/rewardwidget.png')\n          }\n        />\n      </TouchableOpacity>\n      <View style={{ width: 15 }} />\n      <TouchableOpacity\n        onPress={() => {\n          Flyy.openWalletScreen();\n        }}\n        style={buttonStyle}\n      >\n        <FlyyCardView\n          cardStyle={widgetStyle}\n          buttonTitle={widgetStyle.walletButtonTitle ?? 'Wallet'}\n          buttonIcon={\n            widgetStyle.walletButtonIcon ??\n            require('./assets/images/walletwidget.png')\n          }\n        />\n      </TouchableOpacity>\n      <View style={{ width: 20 }} />\n    </View>\n  );\n};\n\n// @ts-ignore\nconst FlyyCardView = ({ cardStyle, buttonTitle, buttonIcon }) => {\n  return (\n    <View>\n      <View style={{ height: 10 }} />\n      <View\n        style={{\n          backgroundColor: cardStyle.buttonIconBackgroundColor ?? '#654EA3',\n          height: 50,\n          width: 50,\n          borderRadius: cardStyle.iconCornerRadius ?? 30.0,\n          alignSelf: 'center',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}\n      >\n        <Image source={buttonIcon} style={{ height: 28, width: 28 }} />\n      </View>\n      <View style={{ height: 10 }} />\n      <Text\n        style={{\n          alignSelf: 'center',\n          flexShrink: 1,\n          color: cardStyle.buttonTitleTextColor ?? 'black',\n          fontSize:\n            cardStyle.buttonTitleTextSize != null\n              ? cardStyle.buttonTitleTextSize < 30\n                ? cardStyle.buttonTitleTextSize\n                : 30\n              : 16,\n          fontFamily: cardStyle.buttonTitleFontFamily ?? 'Montserrat-Bold',\n          textAlign: 'center',\n          paddingLeft: 5,\n          paddingRight: 5,\n        }}\n        numberOfLines={1}\n      >\n        {buttonTitle}\n      </Text>\n      <View style={{ height: 10 }} />\n    </View>\n  );\n};\n"]}

package/lib/typescript/index.d.ts

@@ -1,5 +1,26 @@
+/// <reference types="react" />
 declare type FlyyType = {
     multiply(a: number, b: number): Promise<number>;
 };
 declare const _default: FlyyType;
 export default _default;
+export declare const FlyyWidget: ({ widgetStyle, }: {
+    widgetStyle?: {
+        rewardsButtonIcon: any;
+        offersButtonIcon: any;
+        walletButtonIcon: any;
+        rewardButtonTitle: string;
+        offerButtonTitle: string;
+        walletButtonTitle: string;
+        buttonTitleFontFamily: string;
+        buttonBorderWidth: number;
+        buttonTitleTextSize: number;
+        iconCornerRadius: number;
+        buttonCornerRadius: number;
+        buttonTitleTextColor: string;
+        buttonBorderColor: string;
+        containerBackgroundColor: string;
+        buttonIconBackgroundColor: string;
+        buttonBackgroundColor: string;
+    } | undefined;
+}) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-flyy",
-  "version": "1.4.21",
+  "version": "1.4.22",
   "description": "React Native wrapper around our Android and iOS mobile SDKs",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/react-native-flyy.podspec

@@ -18,5 +18,5 @@ Pod::Spec.new do |s|
 
 
   s.dependency "React-Core"
-  s.dependency "FlyyFramework", "1.3.38" 
+  s.dependency "FlyyFramework", "1.3.41" 
 end

package/src/index.tsx

@@ -1,4 +1,11 @@
-import { NativeModules } from 'react-native';
+import React from 'react';
+import {
+  Image,
+  NativeModules,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 type FlyyType = {
   multiply(a: number, b: number): Promise<number>;
@@ -7,3 +14,139 @@ type FlyyType = {
 const { Flyy } = NativeModules;
 
 export default Flyy as FlyyType;
+export const FlyyWidget = ({
+  widgetStyle = {
+    rewardsButtonIcon: require('./assets/images/rewardwidget.png'),
+    offersButtonIcon: require('./assets/images/offerswidget.png'),
+    walletButtonIcon: require('./assets/images/walletwidget.png'),
+    rewardButtonTitle: 'Rewards',
+    offerButtonTitle: 'Offers',
+    walletButtonTitle: 'Wallet',
+    buttonTitleFontFamily: 'Montserrat-Bold',
+    buttonBorderWidth: 0.5,
+    buttonTitleTextSize: 16.0,
+    iconCornerRadius: 30.0,
+    buttonCornerRadius: 15.0,
+    buttonTitleTextColor: 'black',
+    buttonBorderColor: 'white',
+    containerBackgroundColor: '#ebedeb',
+    buttonIconBackgroundColor: '#654EA3',
+    buttonBackgroundColor: 'white',
+  },
+}) => {
+  const buttonStyle = {
+    backgroundColor: widgetStyle.buttonBackgroundColor ?? 'white',
+    height: 110,
+    flex: 1,
+    elevation: 1,
+    borderRadius: widgetStyle.buttonCornerRadius ?? 15.0,
+    borderColor: widgetStyle.buttonBorderColor ?? 'white',
+    borderWidth: widgetStyle.buttonBorderWidth ?? 0.5,
+  };
+  return (
+    <View
+      style={{
+        backgroundColor: widgetStyle.containerBackgroundColor ?? '#ebedeb',
+        height: 160,
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View style={{ width: 20 }} />
+      <TouchableOpacity
+        onPress={() => {
+          Flyy.openOffersScreen();
+        }}
+        style={buttonStyle}
+      >
+        <FlyyCardView
+          cardStyle={widgetStyle}
+          buttonTitle={widgetStyle.offerButtonTitle ?? 'Offers'}
+          buttonIcon={
+            widgetStyle.offersButtonIcon ??
+            require('./assets/images/offerswidget.png')
+          }
+        />
+      </TouchableOpacity>
+      <View style={{ width: 15 }} />
+      <TouchableOpacity
+        onPress={() => {
+          Flyy.openRewardsScreen();
+        }}
+        style={buttonStyle}
+      >
+        <FlyyCardView
+          cardStyle={widgetStyle}
+          buttonTitle={widgetStyle.rewardButtonTitle ?? 'Rewards'}
+          buttonIcon={
+            widgetStyle.rewardsButtonIcon ??
+            require('./assets/images/rewardwidget.png')
+          }
+        />
+      </TouchableOpacity>
+      <View style={{ width: 15 }} />
+      <TouchableOpacity
+        onPress={() => {
+          Flyy.openWalletScreen();
+        }}
+        style={buttonStyle}
+      >
+        <FlyyCardView
+          cardStyle={widgetStyle}
+          buttonTitle={widgetStyle.walletButtonTitle ?? 'Wallet'}
+          buttonIcon={
+            widgetStyle.walletButtonIcon ??
+            require('./assets/images/walletwidget.png')
+          }
+        />
+      </TouchableOpacity>
+      <View style={{ width: 20 }} />
+    </View>
+  );
+};
+
+// @ts-ignore
+const FlyyCardView = ({ cardStyle, buttonTitle, buttonIcon }) => {
+  return (
+    <View>
+      <View style={{ height: 10 }} />
+      <View
+        style={{
+          backgroundColor: cardStyle.buttonIconBackgroundColor ?? '#654EA3',
+          height: 50,
+          width: 50,
+          borderRadius: cardStyle.iconCornerRadius ?? 30.0,
+          alignSelf: 'center',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Image source={buttonIcon} style={{ height: 28, width: 28 }} />
+      </View>
+      <View style={{ height: 10 }} />
+      <Text
+        style={{
+          alignSelf: 'center',
+          flexShrink: 1,
+          color: cardStyle.buttonTitleTextColor ?? 'black',
+          fontSize:
+            cardStyle.buttonTitleTextSize != null
+              ? cardStyle.buttonTitleTextSize < 30
+                ? cardStyle.buttonTitleTextSize
+                : 30
+              : 16,
+          fontFamily: cardStyle.buttonTitleFontFamily ?? 'Montserrat-Bold',
+          textAlign: 'center',
+          paddingLeft: 5,
+          paddingRight: 5,
+        }}
+        numberOfLines={1}
+      >
+        {buttonTitle}
+      </Text>
+      <View style={{ height: 10 }} />
+    </View>
+  );
+};