node --version
npm --version

npm install -g react-native-cli

npx react-native init MusicPlayerApp
cd MusicPlayerApp

MusicPlayerApp/
├── android/          # کدهای مخصوص اندروید
├── ios/              # کدهای مخصوص iOS
├── node_modules/     # پکیج‌های نصب شده
├── src/              # (ایجاد کنید) کدهای اصلی برنامه
├── App.js           # فایل اصلی برنامه
├── package.json     # تنظیمات پروژه
└── index.js         # نقطه شروع برنامه

npm install expo-av

npm install @react-native-community/slider
npm install react-native-vector-icons

npx react-native link

mkdir src
mkdir src/components
mkdir src/data
mkdir src/utils

export const songsData = [
  {
    id: '1',
    title: 'Song One',
    artist: 'Artist One',
    poster: 'https://via.placeholder.com/150/0000FF/808080?text=Song+1',
    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
    duration: '3:45'
  },
  {
    id: '2',
    title: 'Song Two',
    artist: 'Artist Two',
    poster: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Song+2',
    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    duration: '4:20'
  },
  {
    id: '3',
    title: 'Song Three',
    artist: 'Artist Three',
    poster: 'https://via.placeholder.com/150/00FF00/000000?text=Song+3',
    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
    duration: '2:55'
  }
];

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

const SongItem = ({ item, onPress, isPlaying, isCurrent }) => {
  return (
    <TouchableOpacity
      style={[
        styles.container,
        isCurrent && styles.currentContainer
      ]}
      onPress={() => onPress(item)}
    >
      <Image source={{ uri: item.poster }} style={styles.poster} />
      <View style={styles.infoContainer}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.artist}>{item.artist}</Text>
      </View>
      <View style={styles.statusContainer}>
        {isCurrent && (
          <Text style={styles.playingText}>
            {isPlaying ? '🔊' : '⏸️'}
          </Text>
        )}
        <Text style={styles.duration}>{item.duration}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    marginHorizontal: 16,
    marginVertical: 4,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  currentContainer: {
    backgroundColor: '#e3f2fd',
    borderColor: '#2196f3',
    borderWidth: 1,
  },
  poster: {
    width: 50,
    height: 50,
    borderRadius: 6,
  },
  infoContainer: {
    flex: 1,
    marginLeft: 12,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
  },
  artist: {
    fontSize: 14,
    color: '#666',
    marginTop: 2,
  },
  statusContainer: {
    alignItems: 'flex-end',
  },
  playingText: {
    fontSize: 16,
    marginBottom: 4,
  },
  duration: {
    fontSize: 12,
    color: '#999',
  },
});

export default SongItem;

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

const Player = ({ 
  currentSong, 
  isPlaying, 
  isLoading, 
  onPlayPause, 
  onStop 
}) => {
  if (!currentSong) return null;

  return (
    <View style={styles.container}>
      <Image source={{ uri: currentSong.poster }} style={styles.poster} />
      <View style={styles.infoContainer}>
        <Text style={styles.title}>{currentSong.title}</Text>
        <Text style={styles.artist}>{currentSong.artist}</Text>
      </View>
      <View style={styles.controlsContainer}>
        {isLoading ? (
          <ActivityIndicator size="small" color="#2196f3" />
        ) : (
          <>
            <TouchableOpacity 
              style={styles.controlButton} 
              onPress={onPlayPause}
            >
              <Text style={styles.controlText}>
                {isPlaying ? '⏸️' : '▶️'}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.controlButton} 
              onPress={onStop}
            >
              <Text style={styles.controlText}>⏹️</Text>
            </TouchableOpacity>
          </>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 16,
    margin: 16,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  poster: {
    width: 60,
    height: 60,
    borderRadius: 8,
  },
  infoContainer: {
    flex: 1,
    marginLeft: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  artist: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  controlsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  controlButton: {
    padding: 8,
    marginLeft: 8,
  },
  controlText: {
    fontSize: 24,
  },
});

export default Player;

import React, { useState, useRef, useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  StatusBar
} from 'react-native';
import { Audio } from 'expo-av';
import { songsData } from './src/data/songs';
import SongItem from './src/components/SongItem';
import Player from './src/components/Player';

const App = () => {
  const [songs] = useState(songsData);
  const [currentSong, setCurrentSong] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [sound, setSound] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setupAudio();
    
    return () => {
      if (sound) {
        sound.unloadAsync();
      }
    };
  }, []);

  const setupAudio = async () => {
    try {
      await Audio.requestPermissionsAsync();
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: false,
        staysActiveInBackground: true,
        playsInSilentModeIOS: true,
        shouldDuckAndroid: true,
        playThroughEarpieceAndroid: false,
      });
    } catch (error) {
      console.error('Error setting up audio:', error);
    }
  };

  const playSong = async (song) => {
    try {
      setIsLoading(true);

      // Stop current song if playing
      if (sound) {
        await sound.stopAsync();
        await sound.unloadAsync();
      }

      // Load and play new song
      const { sound: newSound } = await Audio.Sound.createAsync(
        { uri: song.audioUrl },
        { shouldPlay: true }
      );

      setSound(newSound);
      setCurrentSong(song);
      setIsPlaying(true);

      // Set up playback status listener
      newSound.setOnPlaybackStatusUpdate((status) => {
        if (status.didJustFinish) {
          setIsPlaying(false);
        }
      });

    } catch (error) {
      console.error('Error playing song:', error);
      alert('Error playing song. Please check your internet connection.');
    } finally {
      setIsLoading(false);
    }
  };

  const togglePlayPause = async () => {
    if (!sound) return;

    try {
      if (isPlaying) {
        await sound.pauseAsync();
        setIsPlaying(false);
      } else {
        await sound.playAsync();
        setIsPlaying(true);
      }
    } catch (error) {
      console.error('Error toggling play/pause:', error);
    }
  };

  const stopSong = async () => {
    if (!sound) return;

    try {
      await sound.stopAsync();
      await sound.unloadAsync();
      setSound(null);
      setCurrentSong(null);
      setIsPlaying(false);
    } catch (error) {
      console.error('Error stopping song:', error);
    }
  };

  const renderSongItem = ({ item }) => (
    <SongItem
      item={item}
      onPress={playSong}
      isPlaying={isPlaying}
      isCurrent={currentSong?.id === item.id}
    />
  );

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#f5f5f5" />
      
      <Text style={styles.header}>🎵 Music Player</Text>
      
      <Player
        currentSong={currentSong}
        isPlaying={isPlaying}
        isLoading={isLoading}
        onPlayPause={togglePlayPause}
        onStop={stopSong}
      />

      <FlatList
        data={songs}
        renderItem={renderSongItem}
        keyExtractor={(item) => item.id}
        style={styles.list}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    paddingTop: 60,
  },
  header: {
    fontSize: 28,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
    color: '#333',
  },
  list: {
    flex: 1,
  },
});

export default App;

npx react-native run-android

npx react-native run-ios

npx react-native start

# پاک کردن cache
npx react-native start --reset-cache

# حذف node_modules و نصب مجدد
rm -rf node_modules
npm install

# برای اندروید
cd android
./gradlew clean
cd ..

# نصب Expo CLI
npm install -g expo-cli

# ایجاد پروژه جدید
npx create-expo-app MusicPlayerApp
cd MusicPlayerApp

# نصب پکیج‌های مورد نیاز
npx expo install expo-av

# اجرای برنامه
npx expo start

npx react-native run-android

npx react-native run-ios

# build برای اندروید
npx expo build:android

# build برای iOS
npx expo build:ios

import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  Image,
  StyleSheet,
  ActivityIndicator
} from 'react-native';
import { Audio } from 'expo-av';

const songsData = [
  {
    id: '1',
    title: 'Song One',
    artist: 'Artist One',
    poster: 'https://via.placeholder.com/150/0000FF/808080?text=Song+1',
    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
  },
  {
    id: '2',
    title: 'Song Two', 
    artist: 'Artist Two',
    poster: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=Song+2',
    audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3'
  }
];

export default function App() {
  const [currentSong, setCurrentSong] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [sound, setSound] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    return sound ? () => sound.unloadAsync() : undefined;
  }, [sound]);

  const playSong = async (song) => {
    try {
      setIsLoading(true);
      
      if (sound) {
        await sound.stopAsync();
        await sound.unloadAsync();
      }

      const { sound: newSound } = await Audio.Sound.createAsync(
        { uri: song.audioUrl },
        { shouldPlay: true }
      );

      setSound(newSound);
      setCurrentSong(song);
      setIsPlaying(true);

      newSound.setOnPlaybackStatusUpdate((status) => {
        if (status.didJustFinish) {
          setIsPlaying(false);
        }
      });

    } catch (error) {
      console.log('Error playing song:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const togglePlayPause = async () => {
    if (!sound) return;

    if (isPlaying) {
      await sound.pauseAsync();
      setIsPlaying(false);
    } else {
      await sound.playAsync();
      setIsPlaying(true);
    }
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity
      style={[
        styles.item,
        currentSong?.id === item.id && styles.selectedItem
      ]}
      onPress={() => playSong(item)}
    >
      <Image source={{ uri: item.poster }} style={styles.poster} />
      <View style={styles.info}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.artist}>{item.artist}</Text>
      </View>
      {currentSong?.id === item.id && isLoading && (
        <ActivityIndicator size="small" color="#0000ff" />
      )}
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Music Player</Text>
      
      {currentSong && (
        <View style={styles.player}>
          <Image source={{ uri: currentSong.poster }} style={styles.currentPoster} />
          <View style={styles.playerInfo}>
            <Text style={styles.currentTitle}>{currentSong.title}</Text>
            <Text style={styles.currentArtist}>{currentSong.artist}</Text>
          </View>
          <TouchableOpacity onPress={togglePlayPause} style={styles.playButton}>
            <Text style={styles.playButtonText}>
              {isPlaying ? '⏸️' : '▶️'}
            </Text>
          </TouchableOpacity>
        </View>
      )}

      <FlatList
        data={songsData}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  player: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 15,
    margin: 10,
    borderRadius: 10,
  },
  currentPoster: {
    width: 50,
    height: 50,
    borderRadius: 5,
  },
  playerInfo: {
    flex: 1,
    marginLeft: 10,
  },
  currentTitle: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  currentArtist: {
    fontSize: 14,
    color: 'gray',
  },
  playButton: {
    padding: 10,
  },
  playButtonText: {
    fontSize: 20,
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 15,
    marginHorizontal: 10,
    marginVertical: 5,
    borderRadius: 8,
  },
  selectedItem: {
    backgroundColor: '#e3f2fd',
  },
  poster: {
    width: 40,
    height: 40,
    borderRadius: 5,
  },
  info: {
    flex: 1,
    marginLeft: 10,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
  artist: {
    fontSize: 14,
    color: 'gray',
  },
});

npm install -g expo-cli
npx create-expo-app MusicPlayerApp
cd MusicPlayerApp

npx expo install expo-av

npx expo start