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
Related
I'm new one in rails and trying to add Apexchart js to my project in rails7.
So i did
document.addEventListener('turbo:load', function(){
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector('.user-apex-chart'), options);
if (chart) {
chart.render();
}
})
before I run
npm install apexcharts --save
I have Esbuild and turbo on
and add to application.js this:
import ApexCharts from 'apexcharts'
in package.json it has apex
"dependencies": {
"#hotwired/turbo-rails": "^7.1.1",
"#popperjs/core": "^2.11.5",
"apexcharts": "^3.35.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"esbuild": "^0.14.38",
"sass": "^1.51.0",
"tom-select": "^2.0.0"
},
no erorrs when I started the server..
but seems it doesn't see Apex.
What I did wrong?
the test code following below is working:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
This is likely caused because your application.js script tag has defer="defer" and the library by default renders script tags that expect ApexCharts to exist.
Explanation of defer
The library supports passing defer: true to the options argument and then it will wrap create chart code inside an event listener.
<%= line_chart series, {defer: true} %>
I don't know if the event listener will work with turbo yet though.
I am uploading images to s3 using the react-native-aws3 library. the component is RNS3.
I successfully upload and I am able to access the url and view the image, however, I am unable to find the object in my S3 bucket using the AWS console. here is the code:
import React from 'react';
import {View, Text, Button, Image} from 'react-native';
import {region, bucket, accessKey, secretKey} from '../auth';
import image from '../assets/background.png';
import { RNS3 } from 'react-native-aws3';
const upload = () => {
const file = {
uri : 'file:///Users/ayunas/Documents/lambda/cooking-recipe-source-control-fe/CookingRecipesExpo/assets/background.png',
name : 'my_logo.png',
type: 'image/png'
}
console.log(file.uri);
const options = {
keyPrefix : "public/",
bucket,
region,
accessKey,
secretKey,
successActionStatus: 201
}
RNS3.put(file, options)
.progress(event => {
console.log(`percent: ${event.percent}`);
})
.then(res => {
if (res.status === 201) {
console.log('response from successful upload to s3:', res.body);
} else {
console.log('status code: ', res.status);
}
})
.catch(err => {
console.log('error uploading to s3', err)
})
}
const get = () => {
Storage.get('amir.txt')
.then(res => console.log('result get', res))
.catch(err => console.log('err getting', err))
}
function ImageUpload(props) {
return (
<View style={{alignItems : 'center'}}>
<Image style={{width: 100, height: 100}} source={image} />
<Text>Click button to upload above image to S3</Text>
<Button title="Upload to S3" onPress={upload}/>
<Button title="Get from S3" onPress={get}/>
</View>
)
}
export default ImageUpload;
any insights into how to find the image in the AWS console? I can click on the res.location and navigate to the object using the URL. but that's about it.
Did you refresh the console? There is an actual refresh option in the S3 console UI. It can hide things if not refreshed.
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.
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?
I'm trying to figure out how to test React Native (not React JS) components. Even looking at React Native's starter code, its difficult to see how to test it.
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
});
var 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,
},
});
I've been able to use Babel to transpile the JSX syntax as well as use Mockery to mock the React library methods createClass and StyleSheet.create, but at the end of the day, I can't seem to create any meaningful tests.
You should mock up React Native package as well as set babel transformer and some other settings. Maybe you could check unit tests for my component, React Native Router Flux:
https://github.com/aksonov/react-native-router-flux/tree/master/tests
To run tests with Jest you should replace ReactNative with React using __mocks__ folder, use TestUtils with shallow renderer and maybe react-shallow-renderer-helpers to lookup virtual tree.
I've made sample repository with unit tests here and article about my way through it here
In the end I setup a repo with TravisCI using Mocha for BDD style unit tests. You can see the repo at: https://github.com/sghiassy/react-native-sglistview
Take a look at ReactNative's UIExplorer example project, which is set up with several hybrid XCTest & require('NativeModules').TestModule test suites.
https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/UIExplorerIntegrationTests/js