react-native-album-display 1.0.3 → 1.0.4

package/components/AlbumDetails.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { View, Image, StyleSheet, Dimensions, Animated, Button } from 'react-native';
+import { SafeAreaView, View, Image, StyleSheet, Dimensions, Animated, Button, BackHandler } from 'react-native';
 import { Divider } from '@rneui/themed';
 import AlbumBasicData from './albumDetailsSubcomponents/AlbumBasicData';
 import AlbumTracklist from './albumDetailsSubcomponents/AlbumTracklist';
@@ -17,6 +17,17 @@ const AlbumDetails = ({ album, close }) => {
     setRatings(album.ratings || []); // Reinicia las calificaciones cuando cambia el álbum
   }, [album]);
 
+  useEffect(() => {
+    const backAction = () => {
+      close(); // Cierra el modal cuando se presiona "atrás"
+      return true; // Evita el comportamiento por defecto de Android
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
+    return () => backHandler.remove(); // Limpia el event listener al desmontar
+  }, []);
+
   const initialTopContainerHeight = height * 0.4;
   const compressedTopContainerHeight = height * 0.1;
 
@@ -39,7 +50,7 @@ const AlbumDetails = ({ album, close }) => {
   });
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Button onPress={close} title="Close" style={styles.closeButton} />
       <Animated.View style={[styles.topContainer, { height: topContainerHeight }]}>
         {album.coverUrl ?
@@ -76,18 +87,15 @@ const AlbumDetails = ({ album, close }) => {
         ], { useNativeDriver: false })}
         scrollEventThrottle={16}
       />
-    </View>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 10,
     width: '100%',
     borderRadius: 10,
-    // Yo quitaría este backgroundColor para que el usuario pueda poner el suyo
-    backgroundColor: '#1c1c1c'
   },
   topContainer: {
     flexDirection: 'row',

package/components/CoverGroup.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+import React, { useEffect } from 'react';
+import { Button, View, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
 import CoverComponent from './CoverComponent';
 import AlbumDetails from './AlbumDetails';
 
@@ -14,27 +14,36 @@ const styles = StyleSheet.create({
     }
 });
 
-const CoverGroup = ({ albums, isListView }) => {
-
+const CoverGroup = ({ albums, isListView = false }) => {
+    const [listView, setListView] = React.useState();
     const [openModal, setOpenModal] = React.useState(false);
     const [selectedAlbum, setSelectedAlbum] = React.useState(null);
 
+    // Sincronizar listView con isListView si cambia
+    useEffect(() => {
+        setListView(isListView);
+    }, [isListView]);
+
     return (
         <SafeAreaView style={styles.container}>
-            {openModal == false ? (
-                <ScrollView
-                    contentContainerStyle={styles.scrollView}
-                    horizontal={isListView}>
-                    {albums.map((album, index) => (
-                        <View key={index}>
-                            <CoverComponent album={album} onPress={() => { setOpenModal(true); setSelectedAlbum(album) }} key={index} />
-                        </View>
-                    ))}
-                </ScrollView>
-            ) :
-                <AlbumDetails album={selectedAlbum} close={() => setOpenModal(false)} />}
+            {!openModal ? (
+                <>
+                    <Button onPress={() => setListView(!listView)} title="Change view" />
+                    <ScrollView
+                        contentContainerStyle={styles.scrollView}
+                        horizontal={listView}>
+                        {albums.map((album, index) => (
+                            <View key={index}>
+                                <CoverComponent album={album} onPress={() => { setOpenModal(true); setSelectedAlbum(album); }} />
+                            </View>
+                        ))}
+                    </ScrollView>
+                </>
+            ) : (
+                <AlbumDetails album={selectedAlbum} close={() => setOpenModal(false)} />
+            )}
         </SafeAreaView>
     );
 };
 
-export default CoverGroup;
+export default CoverGroup;

package/components/albumDetailsSubcomponents/AlbumBasicData.js

@@ -9,7 +9,7 @@ const AlbumBasicData = ({ album }) => {
   return (
     <View style={styles.container}>
       <Text style={[styles.albumTitle, { fontSize: getFontSize(album.title, 25) }]}>{album.title}</Text>
-      <Text style={[styles.artist, , { fontSize: getFontSize(album.artist, 25) }]}>{album.artist}</Text>
+      <Text style={[styles.artist, , { fontSize: getFontSize(album.artist, 17) }]}>{album.artist}</Text>
     </View>
   );
 };
@@ -29,7 +29,6 @@ const styles = StyleSheet.create({
   artist: {
     fontSize: 17,
     color: '#fa586a',
-    textDecorationLine: 'underline',
   },
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-album-display",
   "description": "A simple album display component for React Native",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "authors": [
     {
       "email": "guille@carvajal.es",