Hi,
I am new to React and Expo. I was able to get the first few steps of the ImageShare example to work. However, when I got to needing to add expo-image-picker, things broke down. I was able to install the image picker, but after I did, the app never got past the splash screen on the Android. It continued to work on the web instantiation. It appears to hang on the splash, which became obvious after adding the splash graphic.
Any ideas?
If it helps, I am working on a Windows system. The Android is a Fire-7 and has Expo Go installed.
Hey @ljcox, can you push your code to a public repo and share it here? It’ll be best to be able to clone your code, run it and test locally.
Cheers,
Adam
Hi, Adam,
Thanks for being willing to help this React novice.
The relevant code is 90 lines long and is attached. I made essentially no other changes from the “initialized” project. The file was “App.js” but I had to rename it to a text file to get it to attach.
Larry
(Attachment app.txt is missing)
Here is the text of App.js:
/*
- Image Sharing Tutorial
- Creating a basic app from scratch
- It should run in a web browser and on an Android device
- Example worked: August 2021; Larry Cox
*/
import { StatusBar } from ‘expo-status-bar’;
import { React } from ‘react’;
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View }
from ‘react-native’;
import * as ImagePicker from ‘expo-image-picker’;
import * as Sharing from ‘expo-sharing’;
import { uploadToAnonymousFilesAsync } from ‘anonymous-files’;
import logo from ‘./assets/logo.png’; // versus a URI link
export default function App() {
const [selectedImage, setSelectedImage] = React.useState(null);
let openImagePickerAsync = async () => {
let permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert(“Permission to Access camera roll is required!”);
return; }
let pickerResult = await ImagePicker.launchImageLibraryAsync();
if (pickerResult.cancelled === true) {
return; }
if (Platform.OS === ‘web’) {
let remoteUri = await uploadToAnonymousFilesAsync(pickerResult.uri);
setSelectedImage({ localUri: pickerResult.uri, remoteUri });}
else {
setSelectedImage({ localUri: pickerResult.uri, remoteUri: null });}
};
let openShareDialogAsync = async () => {
if (!(await Sharing.isAvailableAsync())) {
alert(The image is available for sharing at: ${selectedImage.remoteUri});
return;}
Sharing.shareAsync(selectedImage.localUri);
};
if (selectedImage !== null) {
return (
// display the selected image and a button for sharing
<Image source={{ uri: selectedImage.localUri }} style={styles.thumbnail}/>
Share this photo
);
}
return (
// Display a logo and prompt user to select an image
To share a photo from our phone with a friend, just press the button below!
<TouchableOpacity
onPress={openImagePickerAsync}
style={styles.button}>
<Text style={styles.buttonText}>
Pick a photo
</Text>
</TouchableOpacity>
</View>
);
}
// Style definitions
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: ‘#fff’,
alignItems: ‘center’, justifyContent: ‘center’ },
logo: { width: 305, height: 159, marginBottom: 10 },
instructions: { color: ‘#888’, fontSize: 19, marginHorizontal: 15 },
button: { backgroundColor: “blue”, padding: 15, borderRadius: 5 },
buttonText: { fontSize: 20, color: ‘#fff’ },
thumbnail: { width: 300, height: 300, resizeMode: “contain” },
});