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' />
Related
The problem is when I tap with Detox, the button is not tapped. However it can be tapped if I just click at it.
version of Detox: 16.8.2,
version of React Native: 0.57.1
Solved.
This happened because I used device.openURL({url: 'https://...' }) previously to open the app from a deep link.
Instead, it worked after opening a new instance of the app with a deep link in argument: device.launchApp({newInstance: true, url: 'https://...' });
After this, the interaction can be performed.
It looks like a bug with the method device.openURL()
Need to display html page content in react native app and also need to implement a text search on the html page content, please advise
in HTML: I added a text box and search button on top of the html page in a floating div and added text searching js function in the tag
React Native App: added react native html viewer library to load the html page content in the webview
HTML text contents are showing but the text input box and search button are not showing, also js functions are not executing
You can use react native web view and load the html page with it.
You should enable java script by changing the web view props:
render() {
return (
<WebView
source={{uri: 'https://example.example.com'}}
javascriptenabled={true} />
);
}
For more details - https://facebook.github.io/react-native/docs/webview
I'm trying to create a hybrid react native app to host my website's content in webviews. Something like this: Supreme App
One thing I want to achieve is: when a <a href> link is clicked on my website, instead of webview just show the new link's content, I want the app to push a new page and show the new link content in the new page, so that I can maintain a good page backstack and it feels more like native app (for each navigation, there's a new page for it).
I'm wondering how I can detect link click, push a new page instead of let the webview do default link navigation. Thanks!
You can use WebView prop onNavigationStateChange to detect the change in url.
On clicking <a> the webview will redirect, the onNavigationStateChange will fire. You can use this callback to push a new screen in the app.
Eg.
<WebView
ref={r => this.webview = r}
style = {{marginTop : 0}}
onNavigationStateChange={this._onNavigationStateChange}
source = {{uri: 'https://www.your-url.com' }}
/>
_onNavigationStateChange=(webViewState)=>{
let newUrl = webViewState.url
/*Your navigation logic*/
}
Reference
I'm using the
<Drawer>
tag and it works great, but I don't want the default screen layout with the default "hamburger" menu icon at the top-left of the screen.
I've spent hours trying to get my own button to open the drawer.
I've done my research homework:
The RNRF API for Drawer doesn't list open/close methods:
Was happy to find two EXACT issues "How to open Drawer When use a custom icon in Scene" #1101 and "How to customize drawer button" #1078 on GitHub but none of the solutions work--so close but yet so far!
In Button component:
onPress={() => {Actions.get('drawer').ref.toggle()}}
but get this error:
Here is my main code:
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