gre / react-native-view-shot

Snapshot a React Native view and save it to an image
https://github.com/gre/react-native-view-shot-example
MIT License
2.65k stars 344 forks source link

Need reference of implementing with react function & Hooks way (non class components) #341

Open sudheerpal opened 3 years ago

sudheerpal commented 3 years ago

It will be great if anybody can give me reference where it is implemented function way (non class).

teenoh commented 3 years ago

Class component version

 import ViewShot from "react-native-view-shot";

class ExampleCaptureOnMountManually extends Component {
  componentDidMount () {
    this.refs.viewShot.capture().then(uri => {
      console.log("do something with ", uri);
    });
  }
  render() {
    return (
      <ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }}>
        <Text>...Something to rasterize...</Text>
      </ViewShot>
    );
  }
}

Function component equivalent

function ExampleCaptureOnMountManually() {
  const viewShotRef = useRef(null);

  useEffect(() => {
    viewShotRef.current.capture().then((uri) => {
      console.log('do something with ', uri);
    });
  }, []);

  return (
    <ViewShot ref={viewShotRef} options={{ format: 'jpg', quality: 0.9 }}>
      <Text>...Something to rasterize...</Text>
    </ViewShot>
  );
}