I am developing a React Native app. It is a very simple app. I just have to load a website on a webview, which is perfectly done. but my client wants something which I am not sure how to do.
There are some social media buttons on the website. like facebook, twitter etc. so my client wants me to open social media app while user tap on them. suppose user tapped on facebook button then the facebook app will load.
I badly need to know the solution. please help me. thanks in advance.
Make use of onMessage.
Code is untested but you should get the gist of what it's trying to achieve.
Webpage:
function facebookClick() {
window.postMessage("Facebook button done got clicked");
}
var _fb_button = document.getElementById("your-facebook-button");
_fb_button.addEventListener("click", facebookClick, false);
WebView:
[...]
import { Linking } from 'react-native';
[...]
<WebView
onMessage={(event) => {
let message = event.nativeEvent.data;
if(message.includes("Facebook button done got clicked"))
Linking.openURL('fb://page/PAGE_ID');
}}
[...]
You'll have to check out the current protocol's details of each of the social apps you're trying to open via deeplink. Once you've done that, you can further improve your code with Linking.canOpenURL
Related
Recently I added login/register screen in my app but whenever I try to login then google re-captcha pop-up comes up. I want to hide this and login directly without verify google re-captcha.
Below is my code for this:
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
attemptInvisibleVerification={attemptInvisibleVerification}
/>
Using expo firebase recaptcha module:
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
captcha verification by setting the attemptInvisibleVerification to true
const attemptInvisibleVerification = true
or put directly true in the attemptInvisibleVerification attribut
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
attemptInvisibleVerification={true}
/>
I have integrated following library to my react native project to play audio from URL.
https://www.npmjs.com/package/react-native-sound-player
It is working fine, But, No media control is showing (play/pause/progressbar)
It is just playing audio.
import SoundPlayer from 'react-native-sound-player'
try {
// or play from url
SoundPlayer.playUrl('https://example.com/music.mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
Any suggestions?
Looking at the docs it doesn't seem like there is a UI component in that library.
You probably have to render the buttons yourself and attach an onPress function on them.
Like:
<Button
onPress={()=>SoundPlayer.playUrl('https://example.com/music.mp3')}
title={"Play"}
/>
My app needs a login page from external url.
The login logic that I thought is :
Steps
Open external url when ionic is launched
Once user logged in, move back to internal app using deep link (ex : myapp://main)
I tested step 2 which is deep link. Works well.
So, I have to make step 1 now.
First, I tested with iframe.
And got Refused to display 'https:....' in a frame because it set 'X-Frame-Options' to 'deny'. error. Seems this needs a server-side configuration. But anyway we don't want to use this way. iframe feels like a hack.
Second, I tried location.href = this.loginUrl;.
Worked well in chrome browser but when I built in iOS simulator, I see address bar, tool bar, and close button.
I don't like this because I don't want user to close login page or to change url address.
Third, tried window.open(this.loginUrl, '_self', 'location=no').
Same result as second.
Fourth, tried to use ionic version of in-app-browserplugin.
But the result is same as second and third.
It still opens a browser with address bar, tool bar even it shows 'back to myApp'. So user would feel this is out of app.
Check here, people are looking for the solution still.
After spending a day, I don't even know if there is option I can try.
I could resolve by doing this. But in real device.
Xcode iPhone emulators don't have open in-app-browser but built-in browser.
browser:any;
this.platform.ready().then(() => {
this.browser = this.iab.create(this.loginUrl, '_blank', 'location=no,toolbar=no');
});
You can solve this by installing a cordova plugin called cordova-plugin-inappbrowser. Execute the following commands:
ionic plugin add cordova-plugin-inappbrowser
npm install --save #ionic-native/in-app-browser
On your app.module.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and also add the following to your providers in app.module.ts
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Then on your home.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and inject it into the constructor like this
constructor(public navCtrl: NavController, private iab: InAppBrowser) {
}
then add the following method
ionViewDidLoad(){
this.iab.create('url', '_self', { location: 'no' }); }
Check the different options you have for this plugin here
For removing the address bar just use the option:
location: Set to yes or no to turn the InAppBrowser's location bar on or off.
In the tizen wearable web application that I am developing, I need my application to prompt a notification to the user every 10min to go into the same application and give some sort of input from the app UI.
I am currently using a simple status notification from notification API which gives a notification having link to the current application. When user clicks on it, the application is launched again (as it does according to description in simple status notifiation).
But I don't want the application to be restarted by clicking on the notification. Instead it should get the application running background to display on the watch UI.
Please let me know any possible solutions to achieve this.
Below is the code I am using right now.
var myappInfo = tizen.application.getAppInfo();
var notificationDict = {
content : "Please enter your response.",
iconPath : "images/icon.png",
vibration : true,
soundPath : "music/solemn.mp3",
appId : myappInfo.id
};
currentBatteryLevelNotification = new(tizen.StatusNotification("SIMPLE",
"Your input required!", notificationDict);
tizen.notification.post(currentBatteryLevelNotification);
I tried playing with your code, got some progress using:
AppContextId
var myappInfo = tizen.application.getAppContext();
//appId : myappInfo.id or muappInfo.appId
and Moving app to background:
document.addEventListener('tizenhwkey', function(e) {
if(e.keyName === "back") {
try {
tizen.application.getCurrentApplication().hide();
//instead of tizen.application.getCurrentApplication().exit();
} catch (ignore) {
}
}
});
config.xml:
<tizen:setting background-support="enable" encryption="disable" hwkey-event="enable"/>
Tip: If you don't add background-support for Web application, it just dies once you are on exit, It's not possible to get current state.
But I assume the answer is No. May be Notification API is not designed to launch running application I guess.
I have used the following Material UI for React Native
React Native Material UI
From that library I have created Button with following code
<Button raised upperCase={false}
text="Facebook"/>
The Button Created successfully.
Now i want to place the facebook icon before text facebook. As guided in the above library i have done that with following code
<Button raised upperCase={false} icon="add-circle"
text="Facebook"/>
But there is no icon in that library named as 'fb' or 'facebook'.
So now i want to include facebook icon or my fb.png icon file in that button.
I am new to React Native app development. How can i do that using the same library?
If I am doing any thing wrong kindly guided me.
I know it's too late but it might help someone. MaterialIcons doesn't have facebook icon, so you have to get the facebook icon with the following code
<Button
large
iconLeft
fontWeight='bold'
backgroundColor='#3b5998'
icon={{name: 'facebook', type: 'font-awesome'}}
title='Connect With Facebook' />