react-native-view-shot-fabric

react-native-view-shot-fabric

capture image from view

Installation

npm install react-native-view-shot-fabric

  // add view shot package
        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new ViewShotFabricViewPackage());
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

Important!!

    Make sure you already specified snapshotViewNativeId
    snapshotViewNativeId: Native view id of capture view 

Usage

import * as React from 'react';
import { Button, Image} from 'react-native';

import { StyleSheet, View } from 'react-native';
import { ViewShotComponent,capture } from 'react-native-view-shot-fabric';


export default function App() {
  const viewShotComponentRef = React.useRef<ViewShotComponent>(null);
  return (
    <View style={styles.container}>
      <ViewShotComponent onCaptureEvent={ (filePath)=>{
        console.log(`Result ${filePath.nativeEvent.filePath}`)
      }} color="#11a853" ref={viewShotComponentRef} style={styles.box} snapshotViewNativeId= "snapshotViewId" captureViewNativeId= "captureView" >

        <View  nativeID= "snapshotViewId" style={styles.snapshotView}>
          <Image source={{uri: "https://image.bongda24h.vn/medias/640x400twebp/standard/2023/04/18/chelsea-vs-real-madrid-1804073724.jpg"}} style={{width:200,height:200}}></Image>
          </View>
      
      </ViewShotComponent>
      <Button title='Capture'onPress={
        () => {
          viewShotComponentRef.current?.capture();
        }
      }/>

    <Button title='ScreenShot'onPress={
            async () => {
             const filePath = await capture()
             console.log(`screenshot ${filePath}`)
            }
          }/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'green'
  },
  box: {
    width: '100%',
    height:'70%',
    marginVertical: 20,
    backgroundColor:'#224422'
  },
  captureView:{
    width:200,
    height:300,
    backgroundColor:'blue'
  },
  snapshotView:{
    width:'100%',
    backgroundColor:'yellow'
  }
});

Result

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library