I am developing react native application, where I have used #walletconnect/react-native-dapp to connect external wallet to my app. Every thing is working as expected, only thing I am not able to setup is that when I provide clientMeta to WalletConnectProvider context, the other details is show but my app icon is not showing.
What I am doing wrong, here is the code which I am using.
<WalletConnectProvider
bridge="https://bridge.walletconnect.org"
// #ts-ignore
redirectUrl={
Platform.OS === 'web' ? window.location.origin : 'pozzleplanet://'
}
storageOptions={{
// #ts-ignore
asyncStorage: AsyncStorage,
}}
clientMeta={{
description: '',
url: 'https://myapp.com',
icons: ['https://myapp/app-icon.png'],
name: 'my app',
}}>
<AuthProvider>
<SafeAreaProvider>
<InitComponent />
<NavigationRoot />
<StatusBar backgroundColor="transparent" translucent />
<Toast />
</SafeAreaProvider>
</AuthProvider>
</WalletConnectProvider>
This is popup present to confirm the wallet connect request.
Instead of app icon everything is showing at this confirmation popup, someone can suggest me, how can I set my app icon as well.
Related
I'm still struggling with an error that I can't figure out.
I did not find clear information on how to solve it (only information on how to put the color on a single component)
In their documentation it says that you have to override in a config and set the theme to dark, but it works for me..
My App.tsx
const config: object = {
useSystemColorMode: false,
initialColorMode: 'dark',
};
// extend the theme
const customTheme = extendTheme({ config });
return (
<Provider store={store}>
<NativeBaseProvider theme={customTheme}>
<Navigator />
</NativeBaseProvider>
</Provider>
);
And now if I go to another screen where I create a new component with <View></View> it's still white..
I am new to React native and I am trying to open my webpages(page1,page2) inside webview using react native, and my component's webview in the below example.
Here page1 contains button on clicking that button, page2 is opening in child window in external browser.
Can somebody please tell me how to open page2 inside the webview, so that the user can get a good experience?
Example: Component 1
{
<WebView
scalesPageToFit
startInLoadingState={true}
renderLoading={() => { return <Loading/> }}
**source={{uri:"url to page1"}}**
onShouldStartLoadWithRequest={request => {
return request.url.startsWith(domain);
}}
style={styles.web}
javaScriptEnabledAndroid={true}
javaScriptEnabled={true}
originWhitelist={[domain+"*"]}
/>
}
I found the below solution but was not able to implement it in my scenario.
https://github.com/facebook/react-native/pull/6886
I found the answer, this happened because of the latest react-native-webview version.
setSupportMultipleWindows={true} becomes true and in my case, it should be false.
I sucessfully render a HTML file to view using react-native-webview. And when I click on a link in a view, it loads perfectly on IOS at the same view. But the link doesn't work on Android. It shows 'Cannot download files as permission was denied. Please provide permisson to write to storage, in order to download files'
I've tried to add this line of code to AndroidManifest.xml <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> But it downloads as a file to the phone, not in a view of WebView. What did I miss?
<WebView
originWhitelist={['*']}
source={ Platform.OS === 'ios'
? this.renderHTML(content)
: this.renderHTMLAndroid(content)
}
domStorageEnabled
javaScriptEnabled
/>
I came to a solution. It doesn't render in a view of webview but open a link in a browser (for Android). It is not really what I want, but at least it works.
import { Linking } from 'react-native'
loading = (event) => {
if (event.url.slice(0,4) === 'http') {
Linking.openURL(event.url)
return false
}
return true
}
then in WebView, add
onShouldStartLoadWithRequest={ Platform.OS === 'ios'
? null
: this.loading
}
I'd like to have a context menu triggered on long press different places using React Native.
I.e. in a dialer like the default dailer. You can long-click on any contact and get a 'copy number' menu. And also you can long-click on the name of the person once you've opened their 'contact card'.
The straight-forward way needs a lot of copy-pasted boilerplate, both components and handlers.
Is there a better pattern for doing this?
All Touchable components (TouchableWithoutFeedback, TouchableOpacity etc.) has a property called onLongPress. You can use this prop to listen for long presses and then show the context menu.
To eliminate code mess and doing lots of copy paste you can separate your context menu as a different component and call it when the long press happen. You can also use an ActionSheet library to show the desired options. React native has a native API for iOS called ActionSheetIOS. If you get a little bit more experience in react and react-native you can create a better logic for this but I'm going to try to give you an example below.
// file/that/contains/globally/used/functions.js
const openContextMenu = (event, user, callback) => {
ActionSheetIOS.showActionSheetWithOptions({
options: ['Copy Username', 'Call User', 'Add to favorites', 'Cancel'],
cancelButtonIndex: [3],
title: 'Hey',
message : 'What do you want to do now?'
}, (buttonIndexThatSelected) => {
// Do something with result
if(callback && typeof callback === 'function') callback();
});
};
export openContextMenu;
import { openContextMenu } from './file/that/contains/globally/used/functions';
export default class UserCard extends React.Component {
render() {
const { userObject } = this.props;
return(
<TouchableWithoutFeedback onLongPress={(event) => openContextMenu(event, userObject, () => console.log('Done')}>
<TouchableWithoutFeedback onLongPress={(event) => openContextMenu(event, userObject, () => console.log('Done'))}>
<Text>{userObject.name}</Text>
<Image source={{uri: userObject.profilePic }} />
</TouchableWithoutFeedback>
</TouchableWithoutFeedback>
);
}
}
Similarly as the previous answer combine onLongPress with imperative control for popup menu - something like
<TouchableWithoutFeedback onLongPress={()=>this.menu.open()}>
<View style={styles.card}>
<Text>My first contact name</Text>
<Menu ref={c => (this.menu = c)}>
<MenuTrigger text="..." />
<MenuOptions>
// ...
</MenuOptions>
</Menu>
</View>
</TouchableWithoutFeedback>
When it comes to a lot of boilerplate - in React you can do your own components that you can reuse everywhere thus reducing boilerplate (and copy&paste)
See full example on https://snack.expo.io/rJ5LBM-TZ
it is possible to handle URL change on React Native web view.
I try to handle with onNavigationStateChange listener. But it only once time firing. When the page is load firing onNavigationStateChange. And when I navigate to another page, this event not firing.
Any idea?
With the reference to import { WebView } from 'react-native-webview' you may be using old version of webview please try updating or try following code/method to get current navigation path/url.
In your case onNavigationStateChange is not returning navigated path so you can try using onLoadProgress which return every change in url.
Instead of this
onNavigationStateChange={(state) => {
console.log("current_path",path);
}}
try this
This may get called multiple time please handle your condition accordingly.
onLoadProgress={({ path}) => {
console.log("current_path",path);
}}
This is how my WebView looks like
<WebView
source={{ uri: this.state.url }}
onLoadEnd={() => this.hideSpinner()}
onMessage={onMessage.bind(this)}
ref={WEBVIEW_REF => (this.WebViewRef = WEBVIEW_REF)}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
onLoadProgress={({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={(state) => {
//your code goes here
}}
/>
Try upgrading your React Native (and React) version.
It should be fixed. Maybe was an old issue, because right now it's working OK.
Check this link: React Native webview get url
onNavigationStateChange={({ url, canGoBack }) => {
console.log("url>>>>>>>>",url);
}}
I load website link in react native WebView and its has button when i click that it navigate to default mobile browser.
Running application in react native android Current scenario: when i click button in website its navigate to default browser and am not getting the url i tried above suggestions.
Expected scenario: When i click that button in website it should not navigate to default browser and i want that url which is opened in default browser.
my react version: "react-native": "0.64.0",
onLoadProgress = {({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={navState => {
console.log("navState ", navState);
}}