Create a Meditation App Using React Native with Expo

September 18, 2024

Creating a meditative app is a great idea! Below is a simplified outline of how you can implement such an app using React Native with Expo, including code snippets to get you started. The app will display changing images from your API while playing background music.

Step 1: Setting Up Your Project

Create a new Expo project:

npx create-expo-app still-space
cd still-space

Install necessary libraries: You’ll need expo-av for audio playback and axios for API requests.
```
npx expo install expo-av axios
```

Step 2: Basic App Structure

Your app will have a main component that fetches images from the API and plays music. Here’s a basic outline of the App.js file.

// App.js

import React, { useEffect, useState } from "react"
import { View, Image, StyleSheet, Button } from "react-native"
import { Audio } from "expo-av"
import axios from "axios"

const StillSpace = () => {
  const [images, setImages] = useState([])
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const [sound, setSound] = useState()

  useEffect(() => {
    fetchImages()
    playSound()

    // Change image every 5 seconds
    const interval = setInterval(() => {
      setCurrentImageIndex(prevIndex => (prevIndex + 1) % images.length)
    }, 5000)

    return () => {
      clearInterval(interval)
      sound && sound.stopAsync()
    }
  }, [images, sound])

  const fetchImages = async () => {
    try {
      const response = await axios.get("YOUR_API_ENDPOINT")
      setImages(response.data) // Assume the API returns an array of image URLs
    } catch (error) {
      console.error(error)
    }
  }

  const playSound = async () => {
    const { sound } = await Audio.Sound.createAsync(
      require("./assets/background-music.mp3") // Make sure you have this file in your assets
    )
    setSound(sound)
    await sound.playAsync()
  }

  return (
    <View style={styles.container}>
      {images.length > 0 && (
        <Image
          source={{ uri: images[currentImageIndex] }}
          style={styles.image}
          resizeMode="cover"
        />
      )}
      <Button title="Stop Music" onPress={() => sound && sound.stopAsync()} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
  },
  image: {
    width: "100%",
    height: "100%",
    position: "absolute",
  },
})

export default StillSpace

Step 3: Adding Background Music

Place your background music file (e.g., background-music.mp3) in the assets directory of your project.

Step 4: API Integration

Ensure your API endpoint returns an array of image URLs. Adjust the fetchImages function to match the API response structure if needed.

Step 5: Run Your App

Finally, run your app using the Expo CLI:

npx expo start

Additional Features to Consider

Image Transitions: Use animations for smoother transitions between images.
Settings Page: Allow users to change the interval of image changes or select different music.
Offline Support: Cache images and music for offline access.
User Feedback: Implement feedback options for users to suggest images or music.

Naming

I'll probably call it Vibes.