diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx index a7f8b49fa875b4c80482cc94e7ee26825a73205b..05dea3d0890f298ee4c954725ecbce1de93566f4 100644 --- a/src/screens/Home/index.tsx +++ b/src/screens/Home/index.tsx @@ -1,6 +1,6 @@ import React from "react"; import { StatusBar } from 'expo-status-bar'; -import { useState } from 'react'; +import { useState, useRef } from 'react'; import { StyleSheet, View, Text } from "react-native"; import { Container, ImageContainer, FooterContainer, OptionsContainer, OptionsRow } from "./styles"; import ImageViewer from "../../components/ImageViewer"; @@ -9,11 +9,15 @@ import * as ImagePicker from 'expo-image-picker'; import IconButton from '../../components/IconButton'; import { IconButtonContainer } from "../../components/IconButton/styles"; import CircleButton from "../../components/CircleButton"; +import * as MediaLibrary from 'expo-media-library'; +import { captureRef } from 'react-native-view-shot'; const PlaceholderImage = require('../../../assets/images/background.png'); export function Home() { + const imageRef = useRef<View>(null); + const onReset = () => { setShowAppOptions(false); }; @@ -23,9 +27,22 @@ export function Home() { }; const onSaveImageAsync = async () => { - // we will implement this later - }; + try { + const localUri = await captureRef(imageRef, { + height: 440, + quality: 1, + }); + + await MediaLibrary.saveToLibraryAsync(localUri); + if (localUri) { + alert("Saved!"); + } + } catch (e) { + console.log(e); + } + }; + const [status, requestPermission] = MediaLibrary.usePermissions(); const [selectedImage, setSelectedImage] = useState<string | null>(null); const [showAppOptions, setShowAppOptions] = useState(false); const pickImageAsync = async () => { @@ -41,12 +58,17 @@ export function Home() { alert('Você não selecionou nenhuma foto.'); } }; + if (status === null) { + requestPermission(); + } return ( <Container> <ImageContainer> - <ImageViewer placeholderImageSource={PlaceholderImage} - selectedImage={selectedImage}> - </ImageViewer> + <View ref={imageRef} collapsable={false}> + <ImageViewer placeholderImageSource={PlaceholderImage} + selectedImage={selectedImage}> + </ImageViewer> + </View> </ImageContainer> {showAppOptions ? ( <View style={styles.optionsContainer}>