Im using React Native through expo, and my goal is to select multiple images from my android phone and get their data (uri, name, type, etc) I'm following this guide that I found on here
https://www.npmjs.com/package/expo-image-picker-multiple
they show how to install it (and i did) but not how to use it so i'm lost, the only interesting thread that I found about this specificaly way is this one
https://stackoverflow.com/questions/65877578/how-to-select-multiple-images-from-gallery-with-expo-or-expo-image-picker-multip
I did the 1st direction but couldn't find the second file he said. I tried following his directions in hopes something amazing happened, so i'm not sure if that the answer that I'm looking for.
This is my code
import { StyleSheet, Text, View } from 'react-native';
import { ImageBrowser } from 'expo-image-picker-multiple';
export default function App() {
return (
<View style={styles.container}>
<ImageBrowser max={4} onChange={(num, onSubmit) => {
}}
callback={(callback) => {
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
See that ImageBrowser compenent? the num arg shows the number of photos selected, that's the only thing I know, What I see on my phone is my gallery and I can select 4 images but Can't do anything else, help?
Related
I have a React Native - Expo Android mobile app that we are using to send text messages out to customers to let them know when we arrive, currently using Twilio and it is expensive, I have tried many code examples to send a text message directly from the phone and they all seem to go outside the app and want to send the text message through the phone's default message app eg Messages, we want to stay in our app and send them.
My question is:
Is there a way to do this? If so how?
If not what is a cheaper solution than Twilio to send texts that will work in a React Native - Expo app?
I have been trying to find a solution now for quite awhile.
Thanks in advance for your help!
I have tried many code examples with no luck, here is an example of the code I have tried:
Here is an example of the code I am trying:
/** #format */
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { Entypo } from "#expo/vector-icons";
import Communications from "react-native-communications";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>SmS App</Text>
<Entypo
name="message"
size={70}
color="#202668"
onPress={() => Communications.text(
'3435447131',
'Hello'
)}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
textStyle: {
fontWeight: "bold",
fontSize: 30,
color: "#2AB4F3",
bottom: 10,
},
});
I want to add translate drop-down inside mobile app to translate the app text without using language json file.
I just want to add the select list at the top of app to change the language of text, like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
Is this possible with react native app?
Here is an example of how you can achieve that.
Working Example: Expo Snack
import React, { useState } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
import Constants from 'expo-constants';
const engToHindi = {
english: 'hello',
hindi: 'नमस्कार',
};
export default function App() {
const [language, setLanguage] = useState('english');
return (
<View style={styles.container}>
<Picker
selectedValue={language}
style={{ height: 50, width: 100 }}
onValueChange={(itemValue) => setLanguage(itemValue)}>
<Picker.Item label="English" value="english" />
<Picker.Item label="हिन्दी" value="hindi" />
</Picker>
<Text>{engToHindi[language]}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Online Implementation using Google Translate API would be possible but I don't have the API keys so could not give you the example of that implementation.
I am using "react-native camera" library to access the camera. So here is my code
.
import React, { Component } from "react";
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TouchableHighlight,
View
} from "react-native";
import Camera from "react-native-camera";
import { RNCamera, FaceDetector } from "react-native-camera";
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Camera
ref={cam => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
>
<Text style={styles.capture} onPress=
{this.takePicture.bind(this)}>
take photo
</Text>
</Camera>
</View>
);
}
takePicture() {
const options = {};
//options.location = ...
this.camera
.capture({ metadata: options })
.then(data => console.log(data))
.catch(err => console.error(err));
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row"
},
preview: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center"
},
capture: {
flex: 0,
backgroundColor: "#fff",
borderRadius: 5,
color: "#000",
padding: 10,
margin: 40
}
});
Here i am able to access the back camera and whenever i am clicking on take photo, it capture image and show that instantly. But i need two changes here.
Using this code, the back camera is getting accessed but i want to access the front camera.
Also, the image i captured, should not be shown instantly. I want a button , and whenever i click on that button, it navigates to different page and show all the images there.
Is it possible in react native ?? If yes, then please suggest me the changes that i require to make in this code
To answer your second question specifically, you have two options.
A) After taken the photo, store it as base64 uri into your state or redux, then whenever you need it, display the base64 uri as a image.
B) Utilize the package react-native-fs to access file system, storing the taken photo in iOS as cache, and retrieving it whenever needed.
Based on personal experience dealing with it, I would recommend option A
To switch your camera to back camera to front camera there exists a prop in Camera component called mirrorMode, if it is true it will show the front camera, otherwise, it will be the default mode that is back camera:
<Camera
...
mirrorImage={this.state.mirrorMode}
>
You can create a state and a button that change the state to switch between that 2 cameras.
Haven't noticed much sample code/guides on how to use the CameraRoll library from React Native, I found the example in the docs a bit "vague" and confusing.
First time I'm using any of the API's so I do not fully understand how I'm suppose to use the library either. So far I've imported it like:
import {
AppRegistry,
Image,
StyleSheet,
TextInput,
Navigator,
CameraRoll,
Alert,
TouchableHighlight,
Button,
Text,
View
} from 'react-native';
quite confused with "Linking" etc, but as far as I know, this should be all I need to do in order to use the lib.
And how do I use it for something as simple as to open the gallery on the click of a button and let the user choose an image that should then be displayed in the app.
Thanks in advance, hope someone has some code to clarify this.
Here is some sample code that will grab the first 25 photos from your camera roll and display them in a ScrollView. I modified this from an example I found online here
import React, { Component, PropTypes } from 'react'
import {
CameraRoll,
Image,
ScrollView,
StyleSheet,
TouchableHighlight,
View,
} from 'react-native';
class CameraRollView extends Component {
constructor(props) {
super(props)
var controls = props.controls
this.state = {
images: [],
selected: '',
fetchParams: { first: 25 },
groupTypes: 'SavedPhotos',
}
this._storeImages = this._storeImages.bind(this)
this._logImageError = this._logImageError.bind(this)
this._selectImage = this._selectImage.bind(this)
}
componentDidMount() {
// get photos from camera roll
CameraRoll.getPhotos(this.state.fetchParams, this._storeImages, this._logImageError);
}
// callback which processes received images from camera roll and stores them in an array
_storeImages(data) {
const assets = data.edges;
const images = assets.map( asset => asset.node.image );
this.setState({
images: images,
});
}
_logImageError(err) {
console.log(err);
}
_selectImage(uri) {
// define whatever you want to happen when an image is selected here
this.setState({
selected: uri,
});
console.log('Selected image: ', uri);
}
render() {
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<ScrollView style={styles.container}>
<View style={styles.imageGrid}>
{ this.state.images.map(image => {
return (
<TouchableHighlight onPress={() => this._selectImage(image.uri)}>
<Image style={styles.image} source={{ uri: image.uri }} />
</TouchableHighlight>
);
})}
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
imageGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center'
},
image: {
width: 100,
height: 100,
margin: 10,
},
});
export default CameraRollView
Hmm, the package you are seeking is probably react-native-image-picker. It allows you to take a photo or select one from your native device gallery.
LINK: https://github.com/react-community/react-native-image-picker
In response to the linking issue. When you save a package using:
npm install --save react-native-image-picker
What is happening here is the --save part prepares the packages dependencies to be connected to native iOS and Android. This linking is done using the command react-native link.
In some cases packages require some manual linking aswell (for example, this package requires a small amount of native iOS and Android configuration)
I'm currently trying to learn react-native and running into a problem after a tutorial. I followed the PropertyFinder tutorial on Ray Wenderlich's site, which went fine.
Breaking away now to start something on my own, I can't seem to get a page to render - and I keep running into the same exception which may be causing the page not to render (but I'm not entirely sure).
Here is the main app page, which is simply the navigator:
'use strict';
var React = require('react-native');
var WelcomePage = require('./WelcomePage');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var MyApp = React.createClass({
render: function() {
return (
<React.NavigatorIOS style={styles.container}
initialRoute={{
title: 'Welcome',
component: WelcomePage
}}/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('MyApp', () => MyApp);
And here's the welcome page:
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
textTitle: {
color: 'black',
fontSize: 35,
textAlign: 'center'
},
textSubs: {
color: 'black',
fontSize: 25,
textAlign: 'center'
}
});
class WelcomePage extends Component {
render() {
console.log('About to render welcome page');
return (
<View style={styles.container}>
<Text style={styles.textTitle}>
Welcome to MyApp!
</Text>
<Text style={styles.textSubs}>
Good Choice for an App
</Text>
<Text style={styles.textSubs}>
Going to start with setting up the App
</Text>
<Text style={styles.textSubs}>
Are you ready?
</Text>
</View>
);
}
}
module.exports = WelcomePage;
Now, the console logging comes out correctly with 'About to render welcome page', however the result I get is just a blank white window. If I use the chrome debugger, I do get an exception if a chose to Pause on Exceptions. The code snippet it pauses on is this:
/**
* Given a constructor can we call it without `new`?
*
* #param {function} Collection
*/
function isCallableWithoutNew(Collection) {
try {
Collection(); // <<<--- Here's where the exception seems to happen
} catch (e) {
return false;
}
return true;
}
If I go back to the tutorial project, it works just fine.
The only difference I can see is that when I initialized the tutorial project, the Animation library I pulled in did not have an 'Experimental' version (RCTAnimation), but with the new project I tried to start above, I have to use the Experimental version if I want it to work. Really though, I only tested that early on and am not pulling it in any longer (I don't need it yet).
I've also tried playing around a bit with the styles, but get the same result - and the same exception occurring.
Exception stack chrome shows is:
"TypeError: Constructor Map requires 'new'
at Map (native)
at isCallableWithoutNew (http://localhost:8081/index.ios.bundle:15407:5)
at shouldPolyfillES6Collection (http://localhost:8081/index.ios.bundle:15378:5)
at http://localhost:8081/index.ios.bundle:14500:8
at http://localhost:8081/index.ios.bundle:15095:3
at require (http://localhost:8081/index.ios.bundle:245:25)
at http://localhost:8081/index.ios.bundle:14288:11
at require (http://localhost:8081/index.ios.bundle:245:25)
at http://localhost:8081/index.ios.bundle:14131:11
at require (http://localhost:8081/index.ios.bundle:245:25)"
I want to say that looks like an API version issue or something?
Am I missing something obvious here?
Thanks for any help.
So this ended up being my styles on the 'index.ios.js' page.
I changed this:
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
To this:
var styles = StyleSheet.create({
container: {
flex: 1
}
});
And the view then rendered.
I guess I need to spend some time on figuring out how these styles layout components...
If anyone knows why the main NavigatorIOS pane would push content too far off to the right to be visible (which is what was happening) if the styles were set as they were originally, please let me know.
The culprits were:
'justifyContent'
'alignItems'
'backgroundColor' of course had no affect on the view rendering (I didn't add it back in but could without issue).