I setup wallet connect following the docs https://docs.walletconnect.com/1.0/quick-start/dapps/react-native , it working , but linking to metamask or other wallet , not show end this is my code :
export default function WalletConnectExperience() {
const connector = useWalletConnect();
console.log(connector.connected);
const connectWallet = React.useCallback(() => {
console.log(connector.connect())
return connector.connect();
}, [connector]);
const killSession = React.useCallback(() => {
return connector.killSession();
}, [connector]);
return (
<>
{!connector.connected ? (
<Button onPress={(connectWallet)} label="Connect a wallet" />
) : (
<>
<Text>{shortenAddress(connector.accounts[0])}</Text>
<Button onPress={killSession} label="Log out" />
</>
)}
</>
);
}
, note when i click button connect : I think , i do something wrong , please help me ! thanks you very much
Related
I am new in react-native, in my application I am generating QRCode by one library and it working but in android it is taking time to show on UI, when I set that component to hook to show on UI then it stuck for while and every thing getting non-responsive. After some time it shows and everything work well.
So how can put that setWalletQR in background so that I can show loader until it show to UI?
Here is my code where I am generating the QR in InteractionManager to show
const PozReceive = ({ onClose }: ReceiveProps) => {
const [walletQR, setWalletQR] = useState<ConentQR>(null);
const generateWalletQrCode = () => {
const interactionPromise = InteractionManager.runAfterInteractions(() => {
const qrCode = ConentQR(user?.walletAddress || '', walletImg, 50);
setWalletQR(qrCode);
});
return () => interactionPromise.cancel();
};
useEffect(() => {
if (!pouchQR) {
generatePouchQrCode();
}
}, []);
return (
<Modal
coverScreen={true}
isVisible={true}
onBackdropPress={onClose}
onBackButtonPress={onClose}
backdropColor={Colors.DARK_PURPLE}
backdropOpacity={0.7}
style={styles.modal}>
<>
<BlurView
style={styles.blurView}
blurType="dark"
blurAmount={20}
reducedTransparencyFallbackColor="white"
/>
<VStack style={[styles.modalContainer]}>
{!walletQR ? (
<Image style={styles.qrLoader} source={loaderGif} />
) : (
walletQR
)}
</VStack>
</>
</Modal>
);
};
and here is QR code generator code :-
const ContentQR = (
content: string,
logo: Image.propTypes.source,
logoSize: number,
backgroundColor: string = 'transparent',
) => {
return (
<QRCode
color={Colors.DARK_PURPLE}
content={content}
codeStyle={'dot'}
outerEyeStyle={'diamond'}
logo={logo}
logoSize={logoSize}
backgroundColor={backgroundColor}
/>
);
};
Someone please help me I getting stuck here for while.
You can introduce a variable isLoading and render the loader based on this variable instead of qr value.
const PozReceive = ({ onClose }: ReceiveProps) => {
const [walletQR, setWalletQR] = useState<ConentQR>(null);
const [isLoading, setIsLoading] = useState<Boolean>(false);
const generateWalletQrCode = () => {
setIsLoading(true)
const interactionPromise = InteractionManager.runAfterInteractions(() => {
const qrCode = ConentQR(user?.walletAddress || '', walletImg, 50);
setWalletQR(qrCode);
setIsLoading(false)
});
return () => interactionPromise.cancel();
};
....
<VStack style={[styles.modalContainer]}>
{isLoading && <Image style={styles.qrLoader} source={loaderGif} />}
{!isLoaing && walletQR && walletQR}
</VStack>
I want to sync the value of a useState in 2 different files from a useHook
I have a file named useChangeScreen witch I use to set when I want to show the diferent Views:
export const useChangeScreen = () => {
...
const [homeActivo, setHomeActivo] = useState(false);
const [searchActivo, setSearchActivo] = useState(true);
const [profileActivo, setProfileActivo] = useState(false);
...
const irAHome = () => {
setHomeActivo(true);
setSearchActivo(false);
setProfileActivo(false);
};
const irASearch = () => {
setHomeActivo(false);
setSearchActivo(true);
setProfileActivo(false);
};
const irAProfile = () => {
setHomeActivo(false);
setSearchActivo(false);
setProfileActivo(true);
};
...
return {
homeActivo,
searchActivo,
profileActivo,
irAHome,
irASearch,
irAProfile
}
}
This hook is called in the navigation component:
export const Nav = () => {
const {
irAHome,
irANotifi,
irAProfile,
irASearch
} = useChangeScreen();
...
return (
...
<TouchableOpacity onPress={irAHome}>
...
<TouchableOpacity onPress={irASearch}>
...
<TouchableOpacity onPress={irAProfile}>
...
)
}
and in the screen controller I have this:
export const ScreenController =() => {
const {
homeActivo,
searchActivo,
profileActivo,
} = useChangeScreen();
...
return(
...
{homeActivo ? (
<HomeScreen />
) : searchActivo ? (
<SearchShopsScreen />
) : profileActivo ? null : null}
...
)
}
when I press the buttons in the nav I want the views in ScreenController to change from Home to Profile or Search, but when I press the buttons, the state dont change
You can lift up the state to the parent component and pass it down to it's children, use React Context API or Redux.
If you chose to lift up the state:
Then you would have a parent component that looks like this:
// ...
const Parent = () => {
const {
irAHome,
irANotifi,
irAProfile,
irASearch,
homeActivo,
searchActivo,
profileActivo
} = useChangeScreen();
return (
<>
<Nav
irAHome={irAHome}
irANotifi={irANotifi}
irAProfile={irAProfile}
irASearch={irASearch}
/>
<ScreenController
homeActivo={homeActivo}
searchActivo={searchActivo}
profileActivo={profileActivo}
/>
</>
);
};
// ...
Then use the values passed from props like that:
export const ScreenController =({ homeActivo, searchActivo, profileActivo }) => {
// ...
return (
// ...
{homeActivo ? (
<HomeScreen />
) : searchActivo ? (
<SearchShopsScreen />
) : profileActivo ? null : null}
// ...
);
};
and:
export const Nav = ({
irAHome,
irANotifi,
irAProfile,
irASearch
}) => {
// ...
return (
// ...
<TouchableOpacity onPress={irAHome} />
// ...
<TouchableOpacity onPress={irASearch} />
// ...
<TouchableOpacity onPress={irAProfile} />
// ...
)
}
Note:
You should've actually used only one state which stores the current screen and checked for the current screen using comparison operators.
Checkout these for more details:
Lifting State Up
React Context API
Get Started with Redux
in my application, after receiving the updated data from the API I use useState, but this does not reflect on the information on the screen, I need to goBack and forward to change the information.
When I click on the button I save the information and on the return I need to update that the task has already been done, showing an "OK", but this is not updated, even though the "schedules" variable is right.
Where am I going wrong? What do I need to do to "return" and run again?
Thanks a lot!
import React, { useState, useEffect, useCallback } from "react";
...
const Pdvs = () => {
const [scheduletasks, setScheduletasks] = useState([]);
...
onSave = async (id) => {.....
const responseTask = await api.post("/schedules/fulldetails",{id});
setScheduletasks(responseTask.data);
...
return (
<Container>
{scheduletasks.map((keys) => (
{keys.done ? "OK"
) : ""}
<Button title="Done"
onPress={() =>
handleSave(keys.id)
}
/>
Your codes a little broken, especially in return(). Please revise it to get better help.
Sorry, I put just a piece of the code, to filter where is not the problem. Below more compleat code:
My "onSubmit" should be where you update the variable for useState
The big problem is in the Return, variable {keys.done}, is just that I want! :)
Thanks a lot
onSubmit = async (inputText) => {
try {
const { schedule_id, product_id, task_id } = scheduletasksResult;
const gpsPosition = await getLocationAsync();
const response = await api.post(`/scheduletasks/add`, {
schedule_id,
product_id,
task_id,
result: inputText,
gpsPosition,
});
if (response.status === 200) {
setScheduletasksID(response.data.id);
} else {
setScheduletasksID(0);
}
return response.data.id;
} catch (error) {
console.log(error.response.data);
}
};
useEffect(() => {
async function loadPdvs() {
setCompany_id(company_id[1]);
const response = await api.post("/schedules", {
company_id: company_id[1],
id,
});
setSchedules(response.data[0]);
const responseTask = await api.post("/schedules/fulldetails", {
company_id: company_id[1],
id,
});
setScheduletasks(responseTask.data);
}
loadPdvs();
}, []);
return (
<Container>
<RouteTitle>{schedules.tradeName}</RouteTitle>
<ScrollView>
{scheduletasks.map((keys) => (
<RoutesContainer key={keys.task_id}>
<RouteDetail>
{keys.task_name}
{keys.done ? (
<FontAwesomeIcon
icon={faCheckCircle}
/>
) : null}
</RouteDetail>
{keys.textRequired ? (
<Button
title="Observações"
onPress={() =>
showDialog(keys.schedule_id, keys.product_id, keys.task_id)
}
/>
) : null}
</RoutesContainer>
))}
</ScrollView>
</Container>
);
Please find the attached screenshot for getting an error when used Firestore to set data on server. Following is the code
import firebase from 'react-native-firebase';
constructor() {
super();
this.ref = firebase.firestore().collection('Product');
}
render() {
return (
<View>
<Button title="Submit" onPress={this._navigateClick} />
</View>
);
}
_navigateClick = () => {
this.ref.add({
Desc: "Hi Hello How Are you ?",
Img: "",
Name:"Chair 123"
});
};
I have got same error. Please create the collection with the name 'Product' and add an dummy document. Then try.
I am working on a React-Native app that has multiple screens and uses react-native-router-flux for navigation. One of the screens is supposed to change the background image of the main screen so in this background settings screen I have a list of images with a switch button. Currently it looks like this:
If i try to click on any of the other switches I get the error below:
And here is the code for the main screen:
class MainScreen extends Component {
changedBackground(){
switch(this.props.backgroundImage){
case 'straw':
return (
<Image source={require('../assets/img/paie.png')} style={mainScreenStyle.bgImg}/>
);
case 'rabbit fur':
return (
<Image source={require('../assets/img/rabbit_fur.jpg')} style={mainScreenStyle.bgImg}/>
);
case 'bear fur':
return(
<Image source={require('../assets/img/bear_fur.jpeg')} style={mainScreenStyle.bgImg}/>
);
case 'fox fur':
return (
<Image source={require('../assets/img/fox_fur.jpg')} style={mainScreenStyle.bgImg}/>
);
default:
return ''
}
}
render() {
return (
<View style={mainScreenStyle.container}>
<View style={mainScreenStyle.menu}>
{this.changedBackground()}
</View>
<TargetComponent style={mainScreenStyle.targetD}/>
<ScoreBadges/>
</View>
);
}
}
const mapStateToProps = state => {
return {
backgroundImage: state.mainScreen.backgroundImage,
};
};
export default connect(mapStateToProps, {changeBackground})(MainScreen);
And the code for the background settings screen:
const straw = () => {
return <Image source={require('../../assets/img/paie.png')}
style={[background_list_img.background_img_icon]}/>;
};
const rabbit = () => {
return <Image source={require('../../assets/img/rabbit_fur.jpg')}
style={[background_list_img.background_img_icon]}/>;
};
const bear = () => {
return <Image source={require('../../assets/img/bear_fur.jpeg')}
style={[background_list_img.background_img_icon]}/>;
};
const fox = () => {
return <Image source={require('../../assets/img/fox_fur.jpg')}
style={[background_list_img.background_img_icon]}/>;
};
const backgrounds_list = [
{id:'0', name:'straw', img:straw()},
{id:'1', name:'rabbit', img:rabbit()},
{id:'2', name:'bear', img:bear()},
{id:'3', name:'fox', img:fox()}
];
class BackgroundSettings extends Component {
render(){
return <FlatList data={backgrounds_list} keyExtractor={item=>item.id}
renderItem={({item})=>{return(
<ListItem leftIcon={item.img}
title={" " + item.name}
hideChevron
switchButton
switched={this.props.currentBackground === item.name}
onSwitch={()=>{this.props.changeBackground(item.name)}}/>);}}
/>;
}
}
mapStateToProps = state => {
return {
currentBackground: state.mainScreen.backgroundImage,
};
};
export default connect(mapStateToProps, {changeBackground})(BackgroundSettings);
The reducer is very simple:
const INITIAL_STATE = {backgroundImage:'straw'};
export default MainScreenReducer = (state = INITIAL_STATE, action) => {
switch (action.type){
case BACKGROUND_CHANGE:
return { ...state, backgroundImage:action.payload};
default:
return state;
}
}
And the action creator is simple as well:
export const changeBackground = (imageName) =>{
return{
type:BACKGROUND_CHANGE,
payload:imageName
};
};
Any idea what am I missing? I spent two days trying to figure this out...
change the switch statement default to any component
changedBackground(){
switch(this.props.backgroundImage){
case 'straw':
return (
<Image source={require('../assets/img/paie.png')} style={mainScreenStyle.bgImg}/>
);
case 'rabbit fur':
return (
<Image source={require('../assets/img/rabbit_fur.jpg')} style={mainScreenStyle.bgImg}/>
);
case 'bear fur':
return(
<Image source={require('../assets/img/bear_fur.jpeg')} style={mainScreenStyle.bgImg}/>
);
case 'fox fur':
return (
<Image source={require('../assets/img/fox_fur.jpg')} style={mainScreenStyle.bgImg}/>
);
/**
here change like this:
return <View/>
or
return null
*/
default:
return ''
}
}
Instead of returning '', you should try returning null. Because '' is a string and needs Text around it. However null is an object and can be used instead of DOM objects.