diff --git a/apps/native-component-list/src/screens/MediaLibrary/MediaDetailsScreen.tsx b/apps/native-component-list/src/screens/MediaLibrary/MediaDetailsScreen.tsx index 28dda6e9449425..93efee17993b2f 100644 --- a/apps/native-component-list/src/screens/MediaLibrary/MediaDetailsScreen.tsx +++ b/apps/native-component-list/src/screens/MediaLibrary/MediaDetailsScreen.tsx @@ -2,7 +2,7 @@ import { StackScreenProps } from '@react-navigation/stack'; import { Image } from 'expo-image'; import * as MediaLibrary from 'expo-media-library'; import React from 'react'; -import { ScrollView, StyleSheet, View, Alert } from 'react-native'; +import { ScrollView, StyleSheet, View, Alert, Platform } from 'react-native'; import Button from '../../components/Button'; import HeadingText from '../../components/HeadingText'; @@ -21,12 +21,19 @@ export default class MediaDetailsScreen extends React.Component { title: 'MediaLibrary Asset', }; - state = { + state: { + details: MediaLibrary.AssetInfo | null; + detailsWithoutDownloadingFromNetwork: MediaLibrary.AssetInfo | null; + } = { details: null, detailsWithoutDownloadingFromNetwork: null, }; componentDidMount() { + this.getAssetDetails(); + } + + getAssetDetails = () => { const { asset } = this.props.route.params; MediaLibrary.getAssetInfoAsync(asset, { shouldDownloadFromNetwork: false }).then((details) => { this.setState({ detailsWithoutDownloadingFromNetwork: details }); @@ -34,7 +41,7 @@ export default class MediaDetailsScreen extends React.Component { MediaLibrary.getAssetInfoAsync(asset).then((details) => { this.setState({ details }); }); - } + }; goBack() { const { navigation, route } = this.props; @@ -81,6 +88,26 @@ export default class MediaDetailsScreen extends React.Component { } }; + addToFavorites = async () => { + const { asset } = this.props.route.params!; + + const success = await MediaLibrary.setAssetFavoriteAsync(asset, true); + if (success) { + alert('Asset marked as favorite!'); + this.getAssetDetails(); + } + }; + + removeFromFavorites = async () => { + const { asset } = this.props.route.params!; + + const success = await MediaLibrary.setAssetFavoriteAsync(asset, false); + if (success) { + alert('Asset removed from favorites!'); + this.getAssetDetails(); + } + }; + renderAsset(asset: MediaLibrary.Asset) { const aspectRatio = asset.height ? asset.width / asset.height : 1; @@ -127,6 +154,15 @@ export default class MediaDetailsScreen extends React.Component { )} + {!album && details && Platform.OS === 'ios' && ( +