4

It makes makes sense that if I know where the image file exists, there is a function to save it to camera roll:

https://facebook.github.io/react-native/docs/cameraroll.html

.

.

But what if I want to create a new image from content:

https://i.stack.imgur.com/huPk5.png

I ask the user to upload a photo and add some text, then I want to save that to camera roll. This seems pretty basic, but I'm having trouble finding the best way to accomplish this in react-native.

Basically, I want to do this with react-native How to capture UIView to UIImage without loss of quality on retina display

Community
  • 1
  • 1
kevando
  • 275
  • 4
  • 17

1 Answers1

2

I found what I was looking for with this package. https://github.com/jsierles/react-native-view-snapshot

And here is the code I wrote for my app:

'use strict';

var React = require('react-native');
var How = require('./How');
var styles = require('./Styles');
var UIImagePickerManager = require('NativeModules').UIImagePickerManager;
var reactNativeStore = require('react-native-store');
var ViewSnapshotter = require('react-native-view-snapshot');
var RNFS = require("react-native-fs");

var {
    AppRegistry,
    NavigatorIOS,
    Component,
    Text,
    TextInput,
    View,
    TouchableHighlight,
    Image,
    CameraRoll,
    AlertIOS,
    } = React;




class DufinitionDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            errorMessage: '',
            imageSaved: false,
            searchWord: props.dufinition.searchWord,
            photo: props.dufinition.photo,
            dufinition: props.dufinition,
        };
    }

    render() {
        console.log(this.state.dufinition.definition);
        return (
            <View style={styles.container}>
                <View ref="dufinition">
                    <View style={styles.dufTop}>
                        <View style={styles.avatarContainer}>
                            <Image source={{uri: this.state.photo.uri}} style={styles.dufPhoto}/>
                        </View>
                        <View style={styles.dufinitionText}>
                            <Text style={styles.georgia}>{this.state.dufinition.definition.word}</Text>
                            <Text style={styles.georgia}>{this.state.dufinition.definition.partOfSpeech}</Text>
                        </View>

                    </View>
                    <View style={styles.dufinitionDefinition}>
                            <Text style={styles.georgia}>{this.state.dufinition.definition.text}</Text>
                    </View>
                </View>

                <TouchableHighlight style={styles.button}
                                    underlayColor='#f1c40f'
                                    onPress={this.confirmDelete.bind(this)}>
                    <Text style={styles.buttonText}>delete this</Text>
                </TouchableHighlight>
                <TouchableHighlight style={styles.button}
                                    underlayColor='#f1c40f'
                                    onPress={this.saveDufinition.bind(this)}>
                    <Text style={styles.buttonText}>save this</Text>
                </TouchableHighlight>
            </View>
        );
    }
    saveDufinition(){
        console.log('saveDufinition');
        var ref = React.findNodeHandle(this.refs.dufinition);
        ViewSnapshotter.saveSnapshotToPath(ref, this.imagePath(), (error, successfulWrite) => {
            if (successfulWrite) {
                this.setState({imageSaved: true});
                CameraRoll.saveImageWithTag(this.imagePath(), function(data) {
                    console.log(data);
                }, function(err) {
                    console.log(err);
                });
            } else {
                console.log(error)
            }
        }); // ViewSnapshotter
    }

    imagePath() {
        return RNFS.CachesDirectoryPath+"/duf.png";
    }

    dataInput(event) {
        this.setState({ dataInput: event.nativeEvent.text });
    }

    saveToCameraRoll() {
        // console.log('saving to camera roll');
        // console.log(this.state.photo.uri);
        CameraRoll.saveImageWithTag(this.state.photo.uri, function(data) {
            // console.log(data);
        }, function(err) {
            // console.log(err);
        });

    }
    confirmDelete() {
        AlertIOS.alert(
            'Delete Dufinition',
            'Are you sure?',
            [
              {text: 'Yes', onPress: () =>  this.deleteDufinition()},
              {text: 'No', onPress: () => console.log('User cancelled deltion')},
            ]
        )
    }

    async deleteDufinition(dufinition){
        var dufineModel = await reactNativeStore.model("dufine_v2");
        var remove_data = await dufineModel.remove({
            searchWord: this.state.searchWord
        });
        // console.log(remove_data);
        this.props.navigator.pop();
        // console.log('return');
    }


}

module.exports = DufinitionDetail;

Thanks to this post for pointing me in the right direction: https://disqus.com/home/discussion/browniefedblog/react_native_how_to_make_instagram_javascript_without_grammar/#comment-2365685081

kevando
  • 275
  • 4
  • 17