React Native Expo app crashes silently in production when using GooglePlacesAutocomplete - expo

Here is how i wrote GooglePlacesAutocomplete, I need to find a way to access the error logs so that i get to the root cause in production. I installed all react-native-maps dependencies with expo install so i have no incompatibility issues. I'm also wondering wether Marker is imported from expo or i need to install a different library for it because I'm using the Marker and I didn't find any mention of it in the Expo Docs. Can logRocket or Bugsnug give me the error logs? Where else can i get the error logs for production apps by default ~ Google Play Console?
<GooglePlacesAutocomplete
placeholder="Where are we delivering to?..."
minLength={2}
autoFocus={false}
returnKeyType={"search"}
onPress={(data, details = null) => {
handleChange("address")({
target: {
name: "address",
value: data.description,
},
});
dispatch(
setOrigin({
latLng: details.geometry.location,
description: data.description,
})
);
dispatch(setDestination(null));
}}
fetchDetails={true}
query={{
key: GOOGLE_MAPS_API_KEY,
language: "en",
components: "country:ug",
}}
nearbyPlacesAPI="GooglePlacesSearch"
enablePoweredByContainer={false}
debounce={100}
renderLeftButton={() => (
<MaterialCommunityIcons
name="map-marker"
size={30}
color={colors.deepRed}
style={{
zIndex: 14,
position: "absolute",
// top: 10,
// left: 0,
}}
/>
)}
styles={{
textInputContainer: {
width: "100%",
// height: 50,
borderTopWidth: 0,
borderBottomWidth: 0,
borderRadius: 10,
margin: 0,
// paddingLeft: 30,
backgroundColor: "#667",
},
textInput: {
height: 50,
color: "#0D0D0D",
fontSize: 16,
// backgroundColor: "#E8E8E8",
paddingLeft: 30,
backgroundColor: "#6e67",
},
}}
// Show error address is empty onBlur
onFail={(error) => console.error(error)}
>
{errors.address && (
<View style={{ zIndex: 16 }}>
<Text
style={{
fontSize: 14,
color: colors.magenta,
fontStyle: "italic",
}}
>
{errors.address}*
</Text>
</View>
)}
</GooglePlacesAutocomplete>
```
Everything works fine in development. But when the app is published in Google playstore, getting to the screen that has this component just crashes and exits the app immediately. At first, thought it had something to do with the way i was storing the API key in the .env file but even applying it directly didn't help.

Related

Chartjs 3.40 and newer wont work with Qualtrics

Here is an example (that doesn't work in qualtrics, works fine if I just make an HTML file and open in browser)
In qualtrics:
Make a (text/graphic question)
In HTML put <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
In the question javascript put
jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js", function(){
var xyValues = [
{x:50, y:7},
{x:60, y:8},
{x:70, y:8},
{x:80, y:9},
{x:90, y:9},
{x:100, y:9},
{x:110, y:10},
{x:120, y:11},
{x:130, y:14},
{x:140, y:14},
{x:150, y:15}
];
new Chart("myChart", {
type: "scatter",
data: {
datasets: [{
pointRadius: 4,
pointBackgroundColor: "rgb(0,0,255)",
data: xyValues
}]
},
options: {
legend: {display: false},
scales: {
xAxes: [{ticks: {min: 40, max:160}}],
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
});
Then, if you try to preview the survey , the chart will not load and you will get a console error of TypeError: undefined is not an object (evaluating 'iScale.axis')
If you change the source to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js (version 3.3.2) then the chart will load.
Any way to deal with this? Or is the only option to stick with version 3.3.2 or older?
Aside: Instead of using jQuery.getScript, you can just put the script source in the look and feel header section. Same behavior though.

Why is pan (and zoom) not working on my Chart.js graph?

I'm making a linear graph and the pan and zoom functionality are not working.
I'm using:
"chart.js": "Chart-js#v2.5.0",
"chartjs-plugin-zoom": "Chart.Zoom.js#v0.7.0",
"hammerjs": "v2.0.8"
and added them in this orden in the html:
<script src="~/lib/hammerjs/hammer.min.js"></script>
<script src="~/lib/chart.js/dist/Chart.min.js"></script>
<script src="~/lib/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
I'm using chart.js 2.5.0 because i needed it to work on IE11 and read somewhere that it was better to use that version, but I'm not sure about that.
I copied a working code from snippets online, but it's still now working.
<canvas id="canvas" height="180"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 0, 5, 9, 4, 11]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
</script>
The graph shows but I'm not getting the functionalities and in the console there are no errors.
Thanks in advance.
Try to use the latest version of ChartJS, at the moment 3.7.1.
If your downloaded scripts don't load, it could be a bug with IE11.
For me zooming works, but panning doesn't. (It is already an issue here

PushNotications not showing up on AWS PinPoint from #aws-amplify/pushnotification doesn't have configure, onRegeister or onNotification methods on it?

Im trying to setup PushNotiifactions on react-native IOS using AWS Amplify and PinPoint. I followed the instructions on AWS-Amplify to setup push notifications on React Native IOS but I noticed that I'm not getting a token back after some debugging noticed that Notification import is doesn't have configure, onRegeister or onNotification methods
My dependencies:
"dependencies": {
"#aws-amplify/analytics": "^1.2.10",
"#aws-amplify/pushnotification": "^1.0.22",
"aws-amplify-react-native": "^2.1.7",
"react": "16.6.3",
"react-native": "0.58.3"
},
My App.js
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
PushNotificationIOS,
} from "react-native";
import aws_exports from "./aws-exports";
import Analytics from "#aws-amplify/analytics";
import PushNotification from "#aws-amplify/pushnotification";
// PushNotification need to work with Analytics
Analytics.configure(aws_exports);
Analytics.enable();
PushNotification.configure(aws_exports);
type Props = {};
export default class App extends Component {
componentDidMount(){
console.log('PN',PushNotification);
// get the notification data when notification is received
PushNotification.onNotification(notification => {
// Note that the notification object structure is different from Android and IOS
console.log("in app notification", notification);
// required on iOS only (see fetchCompletionHandler docs: https://facebook.github.io/react-native/docs/pushnotificationios.html)
notification.finish(PushNotificationIOS.FetchResult.NoData);
});
// get the registration token
PushNotification.onRegister(token => {
console.log("in app registration", token);
});
// get the notification data when notification is opened
PushNotification.onNotificationOpened(notification => {
console.log("the notification is opened", notification);
});
}
render() {
return (
Welcome to React Native!
To get started, edit App.js
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});
Those PushNotification methods are part of its prototype, you should use something like this:
console.log('PN', Object.getOwnPropertyNames(Object.getPrototypeOf(PushNotification)))
Regarding not getting a token at onRegister, are you testing it on a real device instead of an emulator?

Upload Image to aws S3 using using react native after taking photo using react native camera

I am beginner in react native.I want to upload files to aws s3 once after taking the photo in using react native camera. I am able to take picture using react native camera. Now, I need to upload to s3 bucket. When I search for this, I get many documents and I get confused how to use this.
I have done file uploading to amazon s3 and downloading form s3 using php. But in react native I am not getting how to do this as I am a beginner . I searched in aws s3 file upload documents there I got using php, java and .Net etc..But I did not get for react native.
Can anyone help me to do this.
My code to take image in react native is,
import React, {Component} from 'react';
import {Platform, StyleSheet, Text,TouchableOpacity, View} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import RNS3 from 'react-native-aws3';
export default class App extends Component<Props> {
takePic(){
ImagePicker.showImagePicker({},(responce)=>{
console.log(responce);
const file ={
uri : responce.path,
name : responce.fileName,
type : responce.type,
}
console.log(file);
const config ={
keyPrefix :'uploads/',
bucket : '**',
region :'***',
accessKey:'***',
secretKey :'***',
successActionStatus :201
}
RNS3.put(file ,config)
.then((responce) => {
console.log(responce);
})
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome v</Text>
<TouchableOpacity onPress={this.takePic.bind(this)}>
<Text>Take Picture</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
When I select the picture from galary / cliked new photo it gives me below error,
02-05 09:10:52.738 12357 12389 I ReactNativeJS: { uri: '/storage/emulated/0/Pictures/image-cb48f179-5b00-4e0a-93ef-74206f76c4e4.jpg',
02-05 09:10:52.738 12357 12389 I ReactNativeJS: name: 'image-cb48f179-5b00-4e0a-93ef-74206f76c4e4.jpg',
02-05 09:10:52.738 12357 12389 I ReactNativeJS: type: 'image/jpeg' }
02-05 09:10:52.738 12357 12389 E ReactNativeJS: undefined is not an object (evaluating '_reactNativeAws.default.put')
How to resolve this ReactNativeJS: undefined is not an object (evaluating '_reactNativeAws.default.put').
Can you please help me out to resolve this.
I have resolve my error :):).Finally, It got worked after 4 days. So happy.
I have installed react-native-file-upload. Now it works Perfectly.
npm install react-native-file-upload --save

How to add some text in google piechart pieHole

visualization.PieChartwithpieHole, I just want to give some custom text insidepieHole` is this possible? Any idea how to do his?
My code is
var chart6 = new google.visualization.PieChart(document.getElementById('chart6'));
chart6.draw(data, {width: 650, height: 259, title: 'Browser bounce rate',
colors:['#058DC7','#50B432','#ED561B','#EDEF00','#24CBE5','#64E572'],
areaOpacity: 0.1,
pieHole: 0.4,
hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#FFFFFF', fontSize: 10 } },
pointSize: 5,
chartArea:{left:0,top:30,width:"100%",height:"100%"}
});
There are no chart options that will let you put text in the hole; you have to layer other elements on top of your chart.
If you don't have to worry about older versions of IE, you can actually layer the HTML under the chart instead of on top, and set the chart's backgroundColor option to "transparent". This will let the text show through the hole, but won't block any mouse interactions with the chart. If you have to code for IE < 9 as well, you have to layer on top (at least in IE < 9), as the Visualization API does not support transparency in IE < 9.