I'am doing the last modification on my react native application.
Well, the problem that I get is that when I enter my informations to connect, I'm showin a small boxDialog to say that the verification of your data is working (this time is for comparing information that user entered and sql server data) so when it's correct I'm accessing to home page.
My problem is sometimes, the internet isn't that good so I need that when verification take longer time to show an error saying "please verify your internet connection"
I don't know if there is a method or specific function!!
constructor(props){
super(props);
this.state={
isModalVisible:false,
}}
openModal = () =>{
this.setState({
isModalVisible:true
}) }
userRegister = () =>{
this.openModal();
fetch('http://192.168.1.7:80/recup.php',{
method:'post',
header:{
'Accept':'application/json',
'Content-type' :'application/json'
},
body:JSON.stringify({email:usermail,password:password,})})
.then((responseData)=>responseData.text())
.then((responseJson)=>{
if(responseJson =='Data Matched'){
this.props.navigation.navigate( 'Welcome')}
else{
alert("Merci de saisir vos données correctement")}
})
.catch((error)=>{console.error(error);})
}
render() {
if(!this.state.isLoading){
return(
....
<TouchableOpacity style={styles.butt} onPress={this.userRegister}>
<Text>Connection</Text</TouchableOpacity>
....
If you want to access this (I mean if you want to fetch) url http://192.168.1.7:80/recup.php you should have proper internet connection.
You can handle this with this react-native-netinfo library. https://github.com/react-native-community/react-native-netinfo
Related
My app uses react-native-webview and set allowsBackForwardNavigationGestures to true.
I want to prevent going back on a specific page.
For example, after navigating to the home page from the login page, I want to make sure that I cannot go back.
I wonder if blocking back is possible in react-native-webview.
Please help.
I can't be sure but your question sure sounds like a React Navigation issue, particularly concerning Auth. Flow. Well, should that be the case, there's a pretty well written documentation on Auth Flow with good example(s) here
Hope that helps in solving your issue.
I think you could use onShouldStartLoadWithRequest and simply return false when request contains URL you do not want to allow.
From documentation:
<WebView
source={{ uri: 'https://reactnative.dev' }}
onShouldStartLoadWithRequest={(request) => {
// Only allow navigating within this website
return request.url.startsWith('https://reactnative.dev');
}}
/>
You can restrict back button from onNavigationStateChange
onNavigationStateChange={(navState) => {
if (navState.canGoBack) {
navigation.setParams({
headerLeftInfo: {
title: '',
onPress: () => //TODO:back button logic,
},
});
} else {
navigation.setParams({
headerLeftInfo: null,
});
}
}}
Reference: https://www.reactnativeschool.com/integrating-react-navigation-back-button-with-a-webview
I have a managed-expo (sdk 45) application and for some reason apple rejects my application because they are unable to locate the App Tracking Transparency permission request. I know it has something to do with expo-ads-admob. I am getting this message:
Please explain where we can find the App Tracking Transparency permission request in your app. The request should appear before any data is collected that could be used to track the user.
If you've implemented App Tracking Transparency but the permission request is not appearing on devices running the latest OS, please review the available documentation and confirm App Tracking Transparency has been correctly implemented.If your app does not track users, update your app privacy information in App Store Connect to undeclare tracking. You must have the Account Holder or Admin role to update app privacy information.
I'm using expo-ads-admob and this is how I did it (docs):
I installed expo-tracking-transparency
and added the function on the first part of the application (App.tsx)
import * as React from "react";
import { requestTrackingPermissionsAsync } from "expo-tracking-transparency";
export default function App() {
React.useEffect(() => {
(async () => {
const { status } = await requestTrackingPermissionsAsync();
if (status === "granted") {
console.log("Yay! I have user permission to track data");
}
})();
}, []);
return (
<MainApplication />
);
}
I also added
"plugins": [
[
"expo-tracking-transparency",
{
"userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
}
]
]
To app.json
Then I use the component (everywhere in the app) like this:
<AdMobBanner
bannerSize={
Platform.OS === "ios" ? "fullBanner" : "smartBannerLandscape"
}
adUnitID={
Platform.OS == "ios"
? "IOS_ADMOB_CODE"
: "ANDROID_ADMOB_CODE"
}
servePersonalizedAds={false}
onDidFailToReceiveAdWithError={() => {}}
onAdViewDidReceiveAd={() => {}}
/>
It works, but iOS keep rejecting my application claiming they can't find the permission. I looked everywhere and saw this is the right way to implement this but unfortunately it didn't work.
Thanks in advance!
if you dont have infoplist go to and add the Description here.
enter image description here
I have a FlatList that fetches data from my API, and I want to refresh it everytime my database gets updated. Can someone help me?
My code:
export default class Feed extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: []
};
}
componentDidMount() {
fetch('http://192.168.200.100:3000/posts')
.then(response => response.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson
})
})
.catch(error => console.log(error))
}
render() {
return (
<KeyboardAvoidingView >
<Header>
<FeedModal></FeedModal>
</Header>
<FlatList
keyExtractor={props => props.id}
data={this.state.dataSource}
renderItem={({ item }) => <FeedPosts title={`${item.title}`} photoDesc={`${item.description}`} postImg={`${item.photo}`} ></FeedPosts>}
>
</FlatList>
</KeyboardAvoidingView>
);
}
}
To update the values inside your app when changes happen on it from the backend you will need either a Real Time database or you will have to work with web sockets:
Web Sockets:
WebSocket is an internet communication protocol with a relevant interesting feature: it provides a full-duplex channel over a single TCP connection.
With WebSockets, a client and a server are able to talk to each other in real time, like they're involved in a telephone call: once connected, the client is able to receive data from the server, without any need to continuously refresh the web page. On the other hand the server will also be able to receive data in real time from the client inside the same connection. for react native check this article about websockets ,it should be handled from backend too.
Realtime Database:
Real-time database contains the data which is been processing in real-time. It uses the real-time processing techniques to handle the workloads.
for example firebase realtime-database.
I tried to create a chat in my application. Messages are stored in a server and I comunicate with it with an API. I tried to make it real time chat so I used componentDidUpdate shouldComponentUpdate method (componentDidUpdate and componentwillupdate too) but there is a warning that appears telling me that make my application very weak... in any case I can't do it like this.
I want suggestions to be able to display the message when the user click on the send button and how can I have a notification of receipt of new messages
in case your server is not sending notifications on new message, you can implement polling mechanism to check server for any new message after certain small time intervals.
as long as you are fetching new messages and populating them, using redux, you will only need componentwillreceiveprops method which you can use to set state of new message array.
The warning is probably coming from the "unsafe" (deprecated in React 17) method componentwillupdate. These methods (including componentwillreceiveprops as Firdous mentioned) shouldn't be used anymore in preference for methods such as componentdidupdate.
What you're looking to achieve can be done with an appropriate use of componentdidupdate and perhaps getderivedstatefromprops if needed. For instance, if you have connected your chat view (and your message text input) to redux (which should hold the messages) the componentdidupdate method will listen to incoming prop changes (from the onPress event for instance from your text input) and can therefore update the view with the new props (messages).
I provide some code to more details:
componentDidUpdate(prevProps, prevState) {
if (prevState.msg !== this.state.msg) {
this.getMsgFromApi(this.state.userId).then(data => {
this.setState({ msg: data})
});
}
};
and to display messages when component will mount i do this:
componentWillMount() {
AsyncStorage.getItem(USERID_STORED)
.then(userIdStore => {
this.setState({ userId: userIdStore});
this.getMsgFromApi(this.state.userId).then(data => {
this.setState({ msg: data})
});
});
};
all message are dislaied in a flatlist
<View style={Styles.messagesContainer}>
<FlatList
style={Styles.flatlist}
data={this.state.msg.Conversation}
keyExtractor={(item) => item.datetime.toString()}
renderItem={({item}) => <MsgR msg={item}/>}
inverted= {-1}
/>
</View>
and I do a condition to differentiate if it is a user message or a received message because the API that handles the messages puts them like this :
"Conversation": [
{
"adherent": "received message",
"user": null,
"datetime":"2019-07-09
09: 42: 55"
},
{
"adherent":null,
"user":"user message",
"datetime":"2019-07-04 06: 14: 18"
}
2","user":null,"datetime":"2019-07-03 12: 34: 10"
},
]
display of messages according to the sender:
const msg = this.props.msg;
return (
<View style={[Styles.container, msg.user===null ? Styles.right : Styles.left]}>
<Text style={msg.user===null ? Styles.textMsgRight : Styles.textMsgLeft}>{msg.user===null ? msg.adherent : msg.user}</Text>
</View>
);
I found the solution by adding extraData flatlist prop:
<FlatList
style={Styles.flatlist}
data={this.state.msg.Conversation}
keyExtractor={(item) => item.datetime.toString()}
extraData={this.state} //this prop
renderItem={({item}) => <MsgR msg={item}/>}
inverted= {-1}
/>
and when I click the send button, I re-call getMsgFromApi() method:
onPressSend() {
AsyncStorage.getItem(USERID_STORED)
.then(userIdStore => {
this.setState({ userId: userIdStore});
this.sendMsgS(this.state.userId).then(() => {
this.setState({msgS: ''});
this method --> this.getMsgFromApi(this.state.userId).then(data => {
this.setState({ msg: data,});
});
});
});
}
and it's work fine: when I click on send button, I have the message sent displayed after a few ms, it's unpleasant but it works !
I'm creating an app for tourism, and all my data is coming from an API. I'm getting it from the fetch method:
constructor(){
super()
this.state = {
fetching: false,
api: []
}
}
componentWillMount(){
this.setState({ fetching: true })
api.getMonuments().then(res => {
this.setState({
api: res,
fetching: false
})
})
}
but here is a big problem. If the user doesn't have Internet he cant use the app... What I want is to save the data. Everytime the user starts the app if there is internet he fetch the data and save it and if there is no internet he uses the data that were saved on the phone... How can I accomplish that?
I suppose I have to use AsyncStorage but I don't know how. Another problem is that the images that I get from the API is just a path and what I would like to do, is to download them and save them. Basically I want the app to be functional even when the user has no internet.
Here is a sample of the data I'm getting from the API.
Hope you can help me! Thanks in advance đŸ˜‰