Save an image to the smartphone

Expo SDK
1

I test some frameworks, one of them is reactnative. Thatswhy I write some “simple” testapps.

I tried for hours to save an image, which I have taken with ImagePicker. It is important for me not to save it immediatly after it is taken. It should work on both plattforms.

My last try:

import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';

import expo from 'expo';

import { ImageStore } from 'react-native';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      imageSRC : null,
      width: null,
      height: null,
      base64: null,
    }
  }

  takeAPicture = async() => {
    let x = await Expo.ImagePicker.launchCameraAsync({
      allowsEditing: true,      
      quality:1,
      aspect: [16,9],
      base64: true,
    });

    console.log(x);

    this.setState({
      imageSRC: x.uri,
      width: x.width,
      height: x.height,
      base64: x.base64
     });
  }

  saveThePicture = async()=>{

      let filename = expo.FileSystem.documentDirectory + "AppPic.jpg"

      console.log(this.state.base64);

      console.log("break");

      console.log(filename);
try {
  console.log("Fliieeg")
  await expo.Filesystem.writeAsStringAsync(filename, this.state.base64 ).then(
    ()=>{console.log("Yes it is fin!")}
  );
} catch (error) {
  console.log(error);
}
      
  }
  
  
  
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>{this.state.imageSRC}</Text>
        <Image source = {{uri : this.state.imageSRC}} style={{ width: this.state.width, height: this.state.height }} />
        <Button onPress={this.takeAPicture} title="Make a Picture"/>
        <Button onPress={this.saveThePicture} title="Save the Picture"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I also had some tries with ImageStore (BTW: Is ImageStore written in TypeScript?), but didn’t get anything to work. Maybe I need a hint for idiots.

greeting from my package.json

"dependencies": {
    "expo": "^22.0.2",
    "react": "16.0.0-beta.5",
    "react-native": "^0.49.5"
  }

I hope you have all information you need for helping me.
Best regards

2

Did you mess with dependencies yourself by hand?

Your react-native should be more like "react-native": "https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz",

(No typescript in react-native or expo code base)

3

No, didn’t made anything at dependencies except npm update. But I think that shouldn’t make the trouble, even if that is not the recommended way to update the files.