main.js

'use strict'

import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
} from 'react-native'
import * as Animatable from 'react-native-animatable'
import { createIconSetFromFontello } from 'react-native-vector-icons'
import { G1, G2, G3, G4, G5, G6, G7, G8, TAB } from './loops'
import fontelloConfig from '../ios/fontello/config.json'
//import Slider from 'react-native-slider';
const Icon = createIconSetFromFontello(fontelloConfig)

export default class MainView extends Component {
  constructor(props) {
    super(props)
    this.playSound = this.playSound.bind(this)
    this.stopSound = this.stopSound.bind(this)
    this.state = {
      playStatus: false,
      vol: 0.5,
    }
    console.log('constructor')
  }

  componentWillMount() {
    console.log('componentWillMount()')
  }

  componentDidMount() {
    console.log('componentDidMount()')
  }

  componentWillReceiveProps() {
    console.log('componentWillReceiveProps()')
  }

  shouldComponentUpdate() {
    console.log('shouldComponentUpdate()')
    return true
  }

  componentWillUpdate() {
    console.log('componentWillUpdate(stop)')
  }

  componentDidUpdate() {
    console.log('componentDidUpdate()')
  }

  componentWillUnmount() {
    console.log('componentWillUnmount()')
  }

  playSound() {
  const newState = {
    playStatus: true,
    vol: 0.7,
    groups: [
      { group: G1[Math.floor(Math.random() * G1.length)] },
      { group: G2[Math.floor(Math.random() * G2.length)] },
      { group: G3[Math.floor(Math.random() * G3.length)] },
      { group: G4[Math.floor(Math.random() * G4.length)] },
      { group: G5[Math.floor(Math.random() * G5.length)] },
      { group: G6[Math.floor(Math.random() * G6.length)] },
      { group: G7[Math.floor(Math.random() * G7.length)] },
      //{ group: TAB[Math.floor(Math.random() * TAB.length)] },
      // { group: G8[Math.floor(Math.random() * G8.length)] },
    ],
  }
    newState.groups.forEach(p => p.group.setNumberOfLoops(1).play(() => this.playSound()))
        // Loop indefinitely until stop() is called
    //newState.groups.forEach(p => p.group.setNumberOfLoops(0))

    // AUDIO.setNumberOfLoops(-1);
    //this.setState(newState)
  }

  stopSound() {
    this.setState({
        playStatus: false,
      }, () => {
        G1.forEach(p => p.stop())
        G2.forEach(p => p.stop())
        G3.forEach(p => p.stop())
        G4.forEach(p => p.stop())
        G5.forEach(p => p.stop())
        G6.forEach(p => p.stop())
        G7.forEach(p => p.stop())
        G8.forEach(p => p.stop())
        TAB.forEach(p => p.stop())
      })
  }

  render() {
    return (
            <Animatable.View
              animation="pulse"
              easing="ease-in"
              iterationCount="infinite"
              direction="alternate-reverse"
              style={styles.container}
            >
              <TouchableOpacity
                style={styles.play}
                onPress={() => {
                  if (!this.state.playStatus) {
                    this.playSound()
                  } else {
                    this.stopSound()
                  }
                }}
              >
                <Icon
                  name={!this.state.playStatus ? 'play' : 'play'}
                  size={120}
                  color="#EF2B47"
                />
                </TouchableOpacity>
            </Animatable.View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    backgroundColor: '#2c2c39',
  },
  play: {
    flexDirection: 'column',
    marginTop: 130,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fader: {
    margin: 20,
    paddingBottom: 20,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
  },
  track: {
    height: 2,
    borderRadius: 1,
  },
  thumb: {
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: 'white',
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 2,
    shadowOpacity: 0.35,
  },
})