I want to show a different app in the banner depending on the country the user is in. Since it is not possible for me to do this in the backend I have to change the meta tags with JavaScript.

This makes it impossible to use the native iOS banner but since your component ignores newer iOS versions I get no banner at all.

It would be nice if we had an option to allow the banner on newer iOS versions for use cases like mine.

This module works great on iOS and android however, when a user clicks the link using Silk on their kindle they are directed to the google playstore.

We have added the <meta name="kindle-fire-app" content="app-id=B00JMRGQHI"> tag that worked on our old app using the jquery based library. Is there a specific prop I need to add to make this work with the Amazon store?

Is this possible??

When I try to view the banner when in device mode in chrome devtools, and using an IOS device setting, the banner does not show up. It also doesn't show on actual devices either.

I have seen this on the demo page too for this repo. Any ideas how to get it to work?

Hello!

Based on #6, i had the same issue(window is not defined). I would like to know if have you plans to do SSR. I would like do prepare some PR. Could be a good idea?

The url for the Apple App Store is NOT https://itunes.apple.com/LANGUAGE_CODE/app/id, it's https://itunes.apple.com/COUNTRY_CODE/app/id.

That means when the browsers language is English the link to the App Store will be https://itunes.apple.com/en/app/id but it should be https://itunes.apple.com/us/app/id, https://itunes.apple.com/gb/app/id or any other country code.

It seems like NPM 2.0.0 package does not have dist folder - http://take.ms/6lEl2, and referenced file from main property of package.json is not found.

Hello developers, I want to add some custom stylesheets. So How can I work on custom style?

I need some help urgently.

I really appreciate any help you can provide.

The code doesn't seem to work on iOS Safari browsers. I am not that conversant with React, so please excuse me if I am making any obvious mistakes. The code is pretty much the example given in the readme. Also, the code works fine on iOS Chrome browser. It doesn't work on Safari. Any thoughts?

Also, what is the right way to pass the'force' property? I tried the following and it throws a type error.

force={'(android,ios)'}

When I try to get to the store throw the "View" button of the smartbanner (Test on local server & physical iOS & Android devices), the console return this:

Any ideas?

It looks like the dist files didn't get properly generated for v5.0.0. The dist/main.js file shows the old this.props.url and main.css isn't being generated at all.

Double checked clearing both npm & yarn cache and nuked node modules each time.

Can we add callbacks to the user actions (clicking the close/install button)? This allows developers to do something more on their side (e.g. track user actions).

I can send a pr for this

Warning: Failed prop type: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types

"react": "15.3.1",
"react-dom": "15.3.1",
"react-smartbanner": "^3.0.0",

I get this error just after updating the package to version 5.1.2!

(function (exports, require, module, __filename, __dirname) { !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):"object"==typeof exports?exports.SmartBanner=t(require("react"),require("prop-types")):e.SmartBanner=t(e.React,e.PropTypes)}(window,function(i,n){return function(i){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=i,o.c=n,o.d=function(e,t,i){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);i

ReferenceError: window is not defined
    at Object.<anonymous> (/home/node/node_modules/react-smartbanner/dist/main.js:1:319)
    at Module._compile (module.js:652:30)
    at Module._extensions..js (module.js:663:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/node/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/node/client/index.js:5:1)
    at Module._compile (module.js:652:30)
    at loader (/home/node/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/node/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

More to mention, I'm running a server-side rendering project.

Safari has a built in feature that reads the same format meta tag and shows the smart banner. This causes the web to show two banners

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

Steps to reproduce:

add a position:fixed;top:0;z-index:1000 navigation bar to the page layout (very popular with mobile design)
What happens: the react-smartbanner hides below the navbar instead of pushing it down

What should happen: the react-smartbanner should push the navbar down

Hello!
Nowadays when Smartbanner is clicked, it sets a cookie and hide itself until cookie expires or is deleted.

I would add new props hideOnclick with default value true.

Is it worth to send a PR?

In React 16.3 aliases for the unsafe lifecycles were introduced and now as of React >16.8 we receive warnings each time one of these APIs are used.

Renaming them to their UNSAFE_* counterparts will resolve the warnings.

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

This checks for iOS 6+, but doesn't check for Safari vs Chrome. So the banner is correctly hidden on newer versions of Safari (in favor of native banners), but I believe Chrome will also be hidden, right? Chrome doesn't support native app banners.

Is there any plan to add a support for typescript? Thanks!

The package ua-parser-js before 0.7.22 are vulnerable to Regular Expression Denial of Service (ReDoS) via regex

iOS shows both the native Safari smart banner and react-smartbanner. Not sure of the solution yet but an idea would be to remove the dependency of the meta tags.

Hey, I can't develop on your repo. When I do npm install it shows me No matching version found for webpack@beta. Solved this by setting webpack to 3.10.0.

When I want to commit it shows me ./node_modules/pre-commit/hook: line 49: : command not found.

(function (exports, require, module, __filename, __dirname) { !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.SmartBanner=n(require("react")):e.SmartBanner=n(e.React)}(this,function(e){return function(e){function n(r){if(t[r])return t[r].exports;var i=t[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="./",n(0)}([function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function o(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n}function s(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("S

ReferenceError: window is not defined

I'm getting this error after importing the package into my project. I'm using webpack btw, appreciate if you could help. Thanks.

I am getting this in the output
<!-- react-empty: 42 -->
Even if I use force for type of devices -

<SmartBanner title={'Facebook'} force={'android'} />

it still takes space in the layout but the image is not displayed, we see the background.

By clicking on the VIEW button, it redirects to a link that does not work.

Generated link: https://itunes.apple.com/19/app/id284882215

I share images

https://github.com/patw0929/react-smartbanner/blob/master/src/components/SmartBanner.js#L27 references window.navigator.language, which is undefined in IE 10. This causes an uncaught exception and breaks our app.