xref: /expo/packages/expo/build/environment/DevLoadingView.js.map (revision ca5301c7)

{"version":3,"file":"DevLoadingView.js","sourceRoot":"","sources":["../../src/environment/DevLoadingView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef, useMemo } from 'react';\nimport { Animated, StyleSheet, Text, NativeModules, NativeEventEmitter, View } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\n\nexport default function DevLoadingView() {\n  const [isDevLoading, setIsDevLoading] = useState(false);\n  const [isAnimating, setIsAnimating] = useState(false);\n  const translateY = useRef(new Animated.Value(0)).current;\n  const emitter = useMemo<NativeEventEmitter>(() => {\n    try {\n      return new NativeEventEmitter(NativeModules.DevLoadingView);\n    } catch (error) {\n      throw new Error(\n        'Failed to instantiate native emitter in `DevLoadingView` because the native module `DevLoadingView` is undefined: ' +\n          error.message\n      );\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!emitter) return;\n\n    function handleShowMessage({ message }) {\n      // \"Refreshing...\" is the standard fast refresh message and it's the\n      // only time we want to display this overlay.\n      if (message !== 'Refreshing...') {\n        return;\n      }\n\n      // TODO: if we show the refreshing banner and don't get a hide message\n      // for 3 seconds, warn the user that it's taking a while and suggest\n      // they reload\n\n      translateY.setValue(0);\n      setIsDevLoading(true);\n    }\n\n    function handleHide() {\n      // TODO: if we showed the 'refreshing' banner less than 250ms ago, delay\n      // switching to the 'finished' banner\n\n      setIsAnimating(true);\n      setIsDevLoading(false);\n      Animated.timing(translateY, {\n        toValue: 150,\n        delay: 1000,\n        duration: 350,\n        useNativeDriver: true,\n      }).start(({ finished }) => {\n        if (finished) {\n          setIsAnimating(false);\n          translateY.setValue(0);\n        }\n      });\n    }\n\n    emitter.addListener('devLoadingView:showMessage', handleShowMessage);\n    emitter.addListener('devLoadingView:hide', handleHide);\n\n    return function cleanup() {\n      emitter.removeListener('devLoadingView:showMessage', handleShowMessage);\n      emitter.removeListener('devLoadingView:hide', handleHide);\n    };\n  }, [translateY, emitter]);\n\n  if (isDevLoading || isAnimating) {\n    return (\n      <Animated.View\n        style={[styles.animatedContainer, { transform: [{ translateY }] }]}\n        pointerEvents=\"none\">\n        <SafeAreaView style={styles.banner} edges={['bottom']}>\n          <View style={styles.contentContainer}>\n            <View style={{ flexDirection: 'row' }}>\n              <Text style={styles.text}>{isDevLoading ? 'Refreshing...' : 'Refreshed'}</Text>\n            </View>\n\n            <View style={{ flex: 1 }}>\n              <Text style={styles.subtitle}>\n                {isDevLoading ? 'Using Fast Refresh' : \"Don't see your changes? Reload the app\"}\n              </Text>\n            </View>\n          </View>\n        </SafeAreaView>\n      </Animated.View>\n    );\n  } else {\n    return null;\n  }\n}\n\nconst styles = StyleSheet.create({\n  animatedContainer: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: 42, // arbitrary\n  },\n  banner: {\n    flex: 1,\n    overflow: 'visible',\n    backgroundColor: 'rgba(0,0,0,0.75)',\n  },\n  contentContainer: {\n    flex: 1,\n    paddingTop: 10,\n    paddingBottom: 5,\n    alignItems: 'center',\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n  text: {\n    color: '#fff',\n    fontSize: 15,\n  },\n  subtitle: {\n    color: 'rgba(255,255,255,0.8)',\n  },\n});\n"]}