Render off screen area

[timLoewel]

Hi,

is it possible to capture a whole View, even the parts that are not yet on screen (like in a scrollview)?
Or even better: capture a View that has not yet been given to the render method?
e.g.

createView(){ 
		return <View>
			<Text>Hello World</Text>
		</View>
	}
...
RNViewShot.takeSnapshot(this.createView(), {
					 format: 'png',
					result: 'file',
					 });

Is this planned, and would this at all be possible with the current architecture?
Best, Tim

[gre]

you can "render off-screen" by rendering it in a View that is not displayed or absolute "out of the screen".
It's a bit hacky but i've been using it in prod.

just a quick example:

class Stuff extends Component {
  snapIt() { return RNViewShot.takeSnapshot(this.refs.root, {...}) }
  render () {
    return <View ref="root">...</View>;
  }
}
class MyApp extends Component {
  doIt = () => { this.refs.stuff.snapIt().then(...) }
  render () {
    return <View>
      <View style={{ position: "absolute", left: 1000 /* basically should be screenSize.width */ }}>
        <Stuff ref="stuff" />
      </View>
      .. your app content..
      <Button onPress={this.doIt} label="RENDER IT!" />
    </View>
  }
}

[timLoewel]

Cool, This Works. Thanks a lot.

[tza17313]

@gre Have you ever encountered a view outside the Image will have a certain probability can not be captured; I am sure this picture has been loaded . if I set the left to 0, the Image ca be captured.

Platform : android (6.0.1 and 7.0) ;
react-native : 0.43.1
react-native-view-shot : 1.9.1

[hugoh59]

Do you have an exemple for a functional component?