react-native-view-shot icon indicating copy to clipboard operation
react-native-view-shot copied to clipboard

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

Open sudheerpal opened this issue 3 years ago • 1 comments

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

sudheerpal avatar Mar 02 '21 08:03 sudheerpal

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>
  );
}

teenoh avatar Mar 05 '21 01:03 teenoh