Screensaver hook

useScreenSaver.jsx

import React, { useState } from 'react'
import { StyleSheet, Image, Platform } from 'react-native'
import { getRealWindowHeight } from 'react-native-extra-dimensions-android'
import { F, inc, dec, length, ifElse, identity, T, equals, maybe } from 'rambdax'
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen'
import ScreenSaver1 from '../../../../../assets/images/ScreenSaver1.png'
import ScreenSaver2 from '../../../../../assets/images/ScreenSaver2.png'
import ScreenSaver3 from '../../../../../assets/images/ScreenSaver3.png'
import ScreenSaver4 from '../../../../../assets/images/ScreenSaver4.png'
import ScreenSaver5 from '../../../../../assets/images/ScreenSaver5.png'
import ScreenSaver6 from '../../../../../assets/images/ScreenSaver6.png'
import ScreenSaver7 from '../../../../../assets/images/ScreenSaver7.png'
import ScreenSaver8 from '../../../../../assets/images/ScreenSaver8.png'
import { useInterval } from '../../../../hooks'
import { SCREENSAVER_INTERVAL_DURATION } from '../../../../constants'
import { curriedEquals, curriedAdd, doNothing } from '../../../../helpers/utils'

const screens = [
  ScreenSaver1,
  ScreenSaver2,
  ScreenSaver3,
  ScreenSaver4,
  ScreenSaver5,
  ScreenSaver6,
  ScreenSaver7,
  ScreenSaver8,
]

const useScreenSaver = onLoadEnd => {
  const [currentScreenIndex, setCurrentScreen] = useState(0)
  const [isIntervalRunning, setIsIntervalRunning] = useState(F())

  useInterval(
    () =>
      inc(currentScreenIndex) > dec(length(screens))
        ? setCurrentScreen(0)
        : setCurrentScreen(inc(currentScreenIndex)),
    isIntervalRunning ? SCREENSAVER_INTERVAL_DURATION : null
  )

  const startScreenSaver = () => setIsIntervalRunning(T())
  const stopScreenSaver = () => setIsIntervalRunning(F())

  const getZIndex = ifElse(curriedEquals(currentScreenIndex), curriedAdd(length(screens)), identity)

  return [
    <>
      <Image
        source={ScreenSaver1}
        style={[styles.imageBackground, { zIndex: getZIndex(0) }]}
        onLoadEnd={onLoadEnd || doNothing}
      />
      <Image source={ScreenSaver2} style={[styles.imageBackground, { zIndex: getZIndex(1) }]} />
      <Image source={ScreenSaver3} style={[styles.imageBackground, { zIndex: getZIndex(2) }]} />
      <Image source={ScreenSaver4} style={[styles.imageBackground, { zIndex: getZIndex(3) }]} />
      <Image source={ScreenSaver5} style={[styles.imageBackground, { zIndex: getZIndex(4) }]} />
      <Image source={ScreenSaver6} style={[styles.imageBackground, { zIndex: getZIndex(5) }]} />
      <Image source={ScreenSaver7} style={[styles.imageBackground, { zIndex: getZIndex(6) }]} />
      <Image source={ScreenSaver8} style={[styles.imageBackground, { zIndex: getZIndex(7) }]} />
    </>,
    startScreenSaver,
    stopScreenSaver,
  ]
}

const styles = StyleSheet.create({
  imageBackground: {
    width: wp('100%'),
    height: maybe(equals(Platform.OS, 'android'), getRealWindowHeight(), hp('100%')),
    position: 'absolute',
  },
})

export default useScreenSaver