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?
Related
I tried but didn't work. Got an error: Error when evaluating SSR module /node_modules/cross-fetch/dist/browser-ponyfill.js:
<script lang="ts">
import fetch from 'cross-fetch';
import { ApolloClient, InMemoryCache, HttpLink } from "#apollo/client";
const client = new ApolloClient({
ssrMode: true,
link: new HttpLink({ uri: '/graphql', fetch }),
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache()
});
</script>
With SvelteKit the subject of CSR vs. SSR and where data fetching should happen is a bit deeper than with other somewhat "similar" solutions. The bellow guide should help you connect some of the dots, but a couple of things need to be stated first.
To define a server side route create a file with the .js extension anywhere in the src/routes directory tree. This .js file can have all the import statements required without the JS bundles that they reference being sent to the web browser.
The #apollo/client is quite huge as it contains the react dependency. Instead, you might wanna consider importing just the #apollo/client/core even if you're setting up the Apollo Client to be used only on the server side, as the demo bellow shows. The #apollo/client is not an ESM package. Notice how it's imported bellow in order for the project to build with the node adapter successfully.
Try going though the following steps.
Create a new SvelteKit app and choose the 'SvelteKit demo app' in the first step of the SvelteKit setup wizard. Answer the "Use TypeScript?" question with N as well as all of the questions afterwards.
npm init svelte#next demo-app
cd demo-app
Modify the package.json accordingly. Optionally check for all packages updates with npx npm-check-updates -u
{
"name": "demo-app",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build --verbose",
"preview": "svelte-kit preview"
},
"devDependencies": {
"#apollo/client": "^3.3.15",
"#sveltejs/adapter-node": "next",
"#sveltejs/kit": "next",
"graphql": "^15.5.0",
"node-fetch": "^2.6.1",
"svelte": "^3.37.0"
},
"type": "module",
"dependencies": {
"#fontsource/fira-mono": "^4.2.2",
"#lukeed/uuid": "^2.0.0",
"cookie": "^0.4.1"
}
}
Modify the svelte.config.js accordingly.
import node from '#sveltejs/adapter-node';
export default {
kit: {
// By default, `npm run build` will create a standard Node app.
// You can create optimized builds for different platforms by
// specifying a different adapter
adapter: node(),
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte'
}
};
Create the src/lib/Client.js file with the following contents. This is the Apollo Client setup file.
import fetch from 'node-fetch';
import { ApolloClient, HttpLink } from '#apollo/client/core/core.cjs.js';
import { InMemoryCache } from '#apollo/client/cache/cache.cjs.js';
class Client {
constructor() {
if (Client._instance) {
return Client._instance
}
Client._instance = this;
this.client = this.setupClient();
}
setupClient() {
const link = new HttpLink({
uri: 'http://localhost:4000/graphql',
fetch
});
const client = new ApolloClient({
link,
cache: new InMemoryCache()
});
return client;
}
}
export const client = (new Client()).client;
Create the src/routes/qry/test.js with the following contents. This is the server side route. In case the graphql schema doesn't have the double function specify different query, input(s) and output.
import { client } from '$lib/Client.js';
import { gql } from '#apollo/client/core/core.cjs.js';
export const post = async request => {
const { num } = request.body;
try {
const query = gql`
query Doubled($x: Int) {
double(number: $x)
}
`;
const result = await client.query({
query,
variables: { x: num }
});
return {
status: 200,
body: {
nodes: result.data.double
}
}
} catch (err) {
return {
status: 500,
error: 'Error retrieving data'
}
}
}
Add the following to the load function of routes/todos/index.svelte file within <script context="module">...</script> tag.
try {
const res = await fetch('/qry/test', {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
num: 19
})
});
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
Finally execute npm install and npm run dev commands. Load the site in your web browser and see the server side route being queried from the client whenever you hover over the TODOS link on the navbar. In the console's network tab notice how much quicker is the response from the test route on every second and subsequent request thanks to the Apollo client instance being a singleton.
Two things to have in mind when using phaleth solution above: caching and authenticated requests.
Since the client is used in the endpoint /qry/test.js, the singleton pattern with the caching behavior makes your server stateful. So if A then B make the same query B could end up seeing some of A data.
Same problem if you need authorization headers in your query. You would need to set this up in the setupClient method like so
setupClient(sometoken) {
...
const authLink = setContext((_, { headers }) => {
return {
headers: {
...headers,
authorization: `Bearer ${sometoken}`
}
};
});
const client = new ApolloClient({
credentials: 'include',
link: authLink.concat(link),
cache: new InMemoryCache()
});
}
But then with the singleton pattern this becomes problematic if you have multiple users.
To keep your server stateless, a work around is to avoid the singleton pattern and create a new Client(sometoken) in the endpoint.
This is not an optimal solution: it recreates the client on each request and basically just erases the cache. But this solves the caching and authorization concerns when you have multiple users.
This has been addressed twice here, but more of a question of how to get around it. I know how... you can just delete App.js. But my question is whether App.js will be needed down the road once it has been packaged for distribution, or at any other time. If so, I'd rather find another solution other than just deleting the file.
I'll provide the code in App.js. This is the basic file that is created from either vue-native init or expo init.
Looked at previous posts:
Vue native is always executing App.js instead of .vue
App.vue is not working in Vue-Native application
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
If you're using webpack you can get around this by setting the entry point:
module.exports = {
...
entry: 'YourNewEntryPoint'
...
}
Without Webpack I'm not sure if there's a way to get around App.js being the entry point.
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
I am programming using Ionic 2, and I want to show a pop-up alert when a button is clicked.
This is the code in my home.html:
<button (click)='openFilters()'>CLICK</button>
And in my home.ts
import {Component} from '#angular/core';
import {Page, NavController, Alert} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(nav: NavController, alertCtrl: AlertController) {
}
openFilters() {
let alert = this.alertCtrl.create({
title: 'Low battery',
subTitle: '10% of battery remaining',
buttons: ['Dismiss']
});
alert.present();
}
}
I have read some StackOverflow questions on this topic and tried to implement it like this:
openFilters() {
let alert:Alert = Alert.create({
title: 'Low battery',
subTitle: '10% of battery remaining',
buttons: ['Dismiss']
});
this.nav.present(alert);
}
Still, I accomplished nothing; I get errors.
Make sure to import this:
import {AlertController} from 'ionic-angular';
and have code such as this:
constructor(private alertController: AlertController) {
}
openFilters() {
let alert = this.alertController.create({
title: 'Example',
subTitle: 'Example subtitle',
buttons: ['OK']
});
alert.present();
}
Things have changed with Beta 11, and it seems as if the documentation online is not yet updated, you can always go into the ionic-angular folder in your node_modules and find the component that you are trying to use for examples of better documentation.
My test is pretty simple. It was working before but now I have facing a new issue I am getting failure message
Adapter operation failed
at http://localhost:4200/assets/test-support.js:4578:13
at exports.default._emberTestingAdaptersAdapter.default.extend.exception (http://localhost:4200/assets/vendor.js:52460:34)
at onerrorDefault (http://localhost:4200/assets/vendor.js:43162:24)
at Object.exports.default.trigger (http://localhost:4200/assets/vendor.js:67346:11)
at Promise._onerror (http://localhost:4200/assets/vendor.js:68312:22)
at publishRejection (http://localhost:4200/assets/vendor.js:66619:15)
TEST
test('test characters', function(assert) {
server.create('character',{name: "Telly Tubby"});
visit('/characters');
fillIn('.search',"Telly Tubby");
click('#search-btn');
andThen(function() {
var results = find('.character-item');
assert.equal(results.length,1);
});
});
I dont remember doing anything fancy. I am not sure what is breaking.
yes my start-app.js helper is pretty standard
I went through the document and i feel it has something to do with
Ember.Test.Adapter set to QunitAdapter by default.
import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';
// import initializeTestHelpers from 'simple-auth-testing/test-helpers';
// initializeTestHelpers();
export default function startApp(attrs) {
var application;
var attributes = Ember.merge({}, config.APP);
attributes = Ember.merge(attributes, attrs); // use defaults, but you can override;
Ember.run(function() {
application = Application.create(attributes);
application.setupForTesting();
application.injectTestHelpers();
});
return application;
}
Updates. It has something to do with click helper. when i comment it out I dont get error.
my .jshintrc has click exposed
"predef": [
"authenticateSession",
"invalidateSession",
"currentSession",
"server",
"document",
"window",
"location",
"setTimeout",
"$",
"-Promise",
"define",
"console",
"visit",
"exists",
"fillIn",
"click",
"keyEvent",
"triggerEvent",
"find",
"findWithAssert",
"wait",
"DS",
"andThen",
"currentURL",
"currentPath",
"currentRouteName"
],