1234567891011121314151617181920212223242526272829303132333435
  1. //@flow
  2. import React, { useState, useCallback } from 'react';
  3. import { SafeAreaView, Image } from 'react-native';
  4. import ViewShot from 'react-native-view-shot';
  5. import WebView from 'react-native-webview';
  6. import Desc from './Desc';
  7. const dimension = { width: 300, height: 300 };
  8. const WebViewExample = () => {
  9. const [source, setSource] = useState(null);
  10. const onCapture = useCallback(uri => setSource({ uri }), []);
  11. return (
  12. <SafeAreaView>
  13. <ViewShot onCapture={onCapture} captureMode="continuous" style={dimension}>
  14. <WebView
  15. source={{
  16. uri: 'https://github.com/gre/react-native-view-shot',
  17. }}
  18. />
  19. </ViewShot>
  20. <Desc desc="above is a webview and below is a continuous screenshot of it" />
  21. <Image fadeDuration={0} source={source} style={dimension} />
  22. </SafeAreaView>
  23. );
  24. };
  25. WebViewExample.navigationOptions = {
  26. title: 'react-native-webview',
  27. };
  28. export default WebViewExample;