@polls-platform/react-native/lib/module/components/LoadingView/index.js

React Native SDK for Polls Platform

// react
import React from 'react';
import { ActivityIndicator, Animated, Image, StyleSheet, Text, View } from 'react-native'; // @polls-platform/core

import { ANIMATION_DURATION, getThemeProperties } from '@polls-platform/core/built/internal';

const LoadingView = _ref => {
  let {
    isVisible,
    title,
    imageUrl,
    theme
  } = _ref;
  // animations
  const imageOpacity = React.useRef(new Animated.Value(0)).current; // initial

  const titleOpacity = React.useRef(new Animated.Value(0)).current; // initial

  const spinnerOpacity = React.useRef(new Animated.Value(0)).current; // initial
  // show/hide

  React.useEffect(() => {
    const initialDelay = isVisible ? 400 : 0;
    const cascadeDelay = isVisible ? 80 : 0;
    Animated.timing(imageOpacity, {
      toValue: isVisible ? 1 : 0,
      duration: ANIMATION_DURATION,
      useNativeDriver: true,
      delay: initialDelay
    }).start();
    Animated.timing(titleOpacity, {
      toValue: isVisible ? 1 : 0,
      duration: ANIMATION_DURATION,
      useNativeDriver: true,
      delay: initialDelay + 1 * cascadeDelay
    }).start();
    Animated.timing(spinnerOpacity, {
      toValue: isVisible ? 1 : 0,
      duration: ANIMATION_DURATION,
      useNativeDriver: true,
      delay: initialDelay + 2 * cascadeDelay
    }).start(); // we do not want to run this if the animation ref changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVisible]);
  const themeProperties = getThemeProperties(theme);
  const styles = createStyles({
    themeProperties
  });
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: { ...styles.imageContainer,
      opacity: imageOpacity
    }
  }, /*#__PURE__*/React.createElement(Image, {
    style: styles.image,
    source: {
      uri: imageUrl
    }
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: { ...styles.titleContainer,
      opacity: titleOpacity
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.titleText
  }, title)), /*#__PURE__*/React.createElement(Animated.View, {
    style: { ...styles.spinner,
      opacity: spinnerOpacity
    }
  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: "large",
    color: themeProperties.colors.loadingIndicatorColor
  })));
};

const createStyles = styleProps => {
  const {
    themeProperties
  } = styleProps;
  const {
    colors: themeColors
  } = themeProperties;
  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      backgroundColor: themeColors.backgroundColor
    },
    imageContainer: {
      marginTop: 100,
      padding: 20,
      width: '100%',
      height: 100
    },
    image: {
      width: '100%',
      height: '100%',
      resizeMode: 'contain'
    },
    titleContainer: {
      marginTop: 20
    },
    titleText: {
      fontSize: 26,
      fontWeight: '600',
      color: themeColors.loadingTitleColor
    },
    spinner: {
      position: 'absolute',
      bottom: 100,
      width: '100%',
      height: 80,
      justifyContent: 'center',
      alignItems: 'center'
    }
  });
  return styles;
};

export { LoadingView };
//# sourceMappingURL=index.js.map