Hey can anyone help me on below points-
Connect React Native(expo or xcode) Mobile App to Metamask Mobile Application with the help of Walletconnect
Not presenting the QRCode Modal but list of wallets available
Send Ethereum transaction to Metamask Mobile App
Please suggest an approach
wallet connect's dapp library https://www.npmjs.com/package/#walletconnect/react-native-dapp can be used to connect dApp with metamask wallet (List of wallets available on current device & which are supported by wallet connect will be displayed)
To send Ethereum transaction use etherjs or wallet connect's web3provider using connector created above
https://docs.walletconnect.com/quick-start/dapps/web3-provider
So first you need to install react-native-dapp libbary. Here is the documentation https://docs.walletconnect.com/1.0/quick-start/dapps/react-native. If you'll have errors after installing read this https://levelup.gitconnected.com/tutorial-how-to-set-up-web3js-1-x-with-react-native-0-6x-2021-467b2e0c94a4 and do every suggested line. Here is my code from my project
const connector = useWalletConnect();
return (
<View style={settingsScreenStyle.container}>
{connector.connected && (
<View style={{marginTop: 100}}>
<Text style={settingsScreenStyle.text}>
Hi, this is your Wallet Address {accountAddress}
</Text>
<Button
title="Disconnect Wallet"
onPress={() => {
connector.killSession();
disconnectWallet();
}}
/>
</View>
)}
</View>
);
Related
I am having a issue on react native. This is my first time using so I am following a guide from https://www.youtube.com/watch?v=f6TXEnHT_Mk. According to the video, after npm start, I am suppose to arrive with a browser opened that look like:
But it did not happen on my laptop. When I tried to copy the link in the terminal to a browser, I get this instead:
Can anyone explain to me what did I do wrong? I have double checked everything and is the same as the video till this point. In the video for this to appear the window defender firewall was blocking the feature so the user allow access for that. But my firewall seems to not be blocking it
Having error logging in expo via terminal:
Solved
I am currently following a guide which is from https://www.youtube.com/watch?v=ql4J6SpLXZA
I am doing the login UI and around the 8 min mark, i decided to take a short break. After coming back, I continued till the 9 min mark and i am met with this:
Tried to remove the code I newly added but the problem still did not go away.
Referring to Unable to resolve "../../App" from "node_modules/expo/AppEntry.js", tried to add
"sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"]
in the app.json file but I do not have the
packageOpts line in the file. How do i solve this?
Solved
I am still following the guide above: https://www.youtube.com/watch?v=ql4J6SpLXZA.
Now I am having issue with firebase. As stated in the video, it is for firebase 8 and I am using firebase 9 so I used the code provided by firebase:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDI9Ggk4h-bHBSDjZAZgMaB6Ur_lvJIPKw",
authDomain: "fypapp-4f10a.firebaseapp.com",
projectId: "fypapp-4f10a",
storageBucket: "fypapp-4f10a.appspot.com",
messagingSenderId: "306492584822",
appId: "1:306492584822:web:24b7ccb717a107df6b4057"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
With this I was having an error of
Unable to resolve "idb" from "node_modules\#firebase\app\dist\esm\index.esm2017.js"
And I found a answer from online to bypass that by creating metro.config.js with the code: (This is for future user that is having trouble with this error)
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
But now I am having another error when creating new user. I have the following error :
TypeError: undefined is not an object (evaluating '_firebase.auth.createUserWithEmailAndPassword')
I searched around stack and no one has post error of
evaluating '_firebase.auth.createUserWithEmailAndPassword`
Is there something I can do to solve this?
Another problem I have is regarding the styling for the page,
I have this currently: (When i never attempt to type anything new in the input boxes)
When i try to type something new in the input boxes:
I have the following code: How do i correct it so that my keyboard can be seen and the input boxes can be seen at the same time?
<KeyboardAvoidingView //To prevent keyboard from blocking the writing area
style={styles.container}
behavior = "padding"
>
<View style = {styles.inputContainer}>
<TextInput
placeholder = "Email"
value={email}
onChangeText ={text => setEmail(text)}
styles = {styles.input}
/>
<TextInput
placeholder = "Password"
value={password}
onChangeText ={text => setPassword(text)}
styles = {styles.input}
secureTextEntry //Hide password
/>
</View>
<View style = {styles.buttonContainer}>
<TouchableOpacity
onPress = {() => { } }
style = {styles.button}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {handleSignUp}
style = {[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Register</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
Update July 25, 2022: expo-cli#6.0.0 has been released with the web
UI removed. The last release to include the web UI is
expo-cli#5.5.1.
You can check this article in medium for more details from here.
Or you can check this old question from here.
I prefer to change the tutorial to one newer or just skip this detail and continue :D
For expo login try run this two commands and try again:
npm cache clean --force
npm install -g npm#latest --force
Expo app with flatlist and one video per line. (cf. TikTok)
Expo SDK 40.0.0
Flatlist - optimised (shouldComponentUpdate) + see props, max 2 lines are rendered at the same time. There is a clean unmount of the lines not in the field of view. Only the video in the field of view runs, the 2nd one pauses.
Expo-AV
Google-Firebase Cloudstorage: the videos are also generated and uploaded by the app.
Problem:
At the latest after the 4th video is rendered the app runs into a memory problem on Android. From the beginning NO problems on IOS devices.
Error message/warning: VirtualizedList: You have a large list that is slow to update .... After that, the videos do not load at all for a long time, only after a few minutes do the two videos to be rendered appear again.
Component structure:
VideoStream - React.Component => all data available and stored in
the Redux store.
Flatlist => only 7 records are passed, see flatlist props
Item => via renderItem
VideoItem - React.Component> => incl. GestureHandle, Background
TouchableOpacity>
Video => Expo-AV
<View style={styles.container}>
<FlatList
snapToAlignment={'start'}
snapToInterval={screenHeight}
decelerationRate={'fast'}
scrollEventThrottle={250}
pagingEnabled
showsVerticalScrollIndicator={false}
vertical={true}
scrollEnabled={true}
style={{flex: 1}}
data={videos}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
onViewableItemsChanged={this.onViewableItemsChanged}
initialNumToRender={0}
maxToRenderPerBatch={1}
windowSize={2}
getItemLayout={this.getItemLayout}
onEndReached={this.onEndReached}
onEndReachedThreshold={0.1}
viewabilityConfig={viewabilityConfig}
removeClippedSubviews={true}
/>
</View>
viewabilityConfig = {
itemVisiblePercentThreshold: 75,
};
Tested:
both Stream and loadAsync => same behaviour.
alternative public data sources => same behaviour
no videos to load => no problem
Hypotheses:
Android - and Expo-AV: on IOS without problems stacks have been
regularly found since about 2018, unfortunately so far without
solutions, based on a connection between Expo player and Android
Upload - which errors/optimisations are possible
Download - which errors/optimisations are possible?
After 10 days of optimisation & search for causes, now my call for help .... Many thanks in advance.
I had the same problem with expo-av and react native.
I used the solution from here
I am sure is not the best one but at least is working.
I am learning RN, and as a part of my project, I am building an app that will take me to my toolbelt of items I will be making or have made such as animations. I am currently struggling with the login component of it. I am looking to login to my app so that it can take me to the homepage. I am using asyncstorage. When I log in, nothing happens except it stays on the login page. I have provided the lines of code as to how I have it built out. I really am just looking for something to get to the homepage on my simulator. I won't be deploying it or anything as I am keeping it to myself, but if any of you have any recommendations for articles or videos on how to achieve this in a "simpler" fashion, I am open to that option as well.
<TouchableOpacity
style={styles.buttonContainer}
onPress={this._signInAsync}
>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
_signInAsync = async () => {
await AsyncStorage.setItem("userToken", "abc");
this.props.navigation.navigate("app");
};
}
I'm quite new to react native and I want to create an Instagram authentication for my app for which I need it's access token. As stated in the docs, I have to visit this link https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token and when the user has authorised and authenticated the app, I'll be redirected to this link http://your-redirect-uri#access_token=ACCESS-TOKEN from where I can grab my access token. But I'm not able to implement this as I'm unaware of the procedure on how to retrieve the token from the url in react-native once I'm redirected to this http://your-redirect-uri#access_token=ACCESS-TOKEN.
I'm using WebBrowser (Expo) to open the links in the app.
PS: I'm using CRNA cli for my react-native-app
From the example it states:
import InstagramLogin from 'react-native-instagram-login'
<View>
<TouchableOpacity onPress={()=> this.refs.instagramLogin.show()}>
<Text style={{color: 'white'}}>Login</Text>
</TouchableOpacity>
<InstagramLogin
ref='instagramLogin'
clientId='xxxxxxxxxx'
scopes={['public_content', 'follower_list']}
onLoginSuccess={(token) => this.setState({ token })}
onLoginFailure={(data) => console.log(data)}
/>
</View>
This suggests the token will be within your App state (either onLoginSuccess/Failure) is called. Access the token from there.
You can achieve Access token by using 'https://localhost' as re-direct url,
use your link in webView
eg:
<WebView
source={{
uri: "https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=https://localhost&response_type=token"
}}
onNavigationStateChange={state =>
this._onChangeNav(state)
}
/>
And add method,
_onLoadAddNewCardView(state) {
console.warn("RES=" + state.url);// Your url with ACCESS TOKEN
let responseString = state.url;
responseString = responseString.replace("https://localhost/?", "");
// Here you will get the ACCESS TOKEN
}
I am looking for an easy way to open apps, Facebook and Instagram specifically, on a button press from my React Native app. It should also check if the app is installed on the device first, and open the app store if it isn't. It needs to work on both iOS and Android. I am a beginner so if you can post an example it would help.
You can use Linking module of react-native to open other mobile apps.
import { Linking } from "react-native";
const APP_ID = //ID of app need to open in play store
const appDeepLinkURL = //Most of the mobile app provide it
Linking.openURL(appDeepLinkURL).catch(err => {
Linking.openURL(
`market://details?id=${APP_ID}`
).catch(err => Linking.openURL(
`http://play.google.com/store/apps/details?id=${APP_ID}`
).catch(err => console.error("An error occurred", err)););
});
Similarly, you can do for the iOS,
you can refer to the official doc here.
use react-native Linking Component
import {
TouchableOpacity,
Text,
Linking,
} from 'react-native';
<TouchableOpacity onPress={() => { Linking.openURL('sms:' + {contactNumber}
+ '?body=Hi'); }}>
<Text> Open Message App </Text>
</TouchableOpacity>