CODEWITHSUNDEEP
iosreact-native
TIMEX
TIMEX

Reputation: 271884

How could I perform a pan to Camera in React Native?

In apps such as Instagram, you can pan left (on home screen) to show the camera VC. The camera comes in as you pan. How can I implement this in React Native?

Upvotes: 4

Views: 564

Answers (3)

Jason Gaare
Jason Gaare

Reputation: 1511

Likely the simplest way to accomplish this would be to render a view offscreen which has the same dimensions as your current view. Presumably using Dimensions.get('window') but your use case might differ slightly.

The key to setting it offscreen would be to position it absolutely, and set the value for left to the negative value of your screen width. However, to accomplish the transition, you'd want to have this value be an Animated.Value initialized to that negative screen width I'd mentioned.

Finally, as others have suggested, you'll need to implement a PanResponder on your initially visible view that would change the value of the left style on the absolutely positioned view with the camera. You'd want that camera view to be already active so your transition would look smooth.

Here's some pseudocode, I could help with a more fleshed out solution if this is the path you'd want to pursue for this question

// in constructor
this.state = {
  leftValue: new Animated.Value(-screenWidth)
}

// in render
<View style={styles.initialView} />
<Animated.View
  style={{
    position: 'absolute',
    top: 0,
    left: this.state.leftValue,
    width: screenWidth,
    height: screenHeight,
  }}
>
  {cameraImplementation}
</Animated.View>

Upvotes: 0

Roy Wang
Roy Wang

Reputation: 11260

You can use PanResponder's onPanResponderGrant and onPanResponderRelease events to check if the movement is a left pan, then open the camera with react-native-camera or Expo's Camera / ImagePicker modules.

Working demo: https://snack.expo.io/SJCGFC477

import React, { Component } from 'react';
import { Text, PanResponder, Alert } from 'react-native';
import { ImagePicker, Permissions } from 'expo';

export default class App extends Component {
  panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: e => {
      this.start = e.nativeEvent.pageX;
    },
    onPanResponderRelease: e => {
      if (this.start - e.nativeEvent.pageX > 100) {
        Promise.all([
          Permissions.askAsync(Permissions.CAMERA),
          Permissions.askAsync(Permissions.CAMERA_ROLL),
        ]).then(([{ status: status1 }, { status: status2 }]) => {
          if (status1 !== 'granted' && status2 !== 'granted') {
            Alert.alert('Permission not granted');
            return;
          }
          ImagePicker.launchCameraAsync().catch(e =>
            Alert.alert('Failed to launch camera', e.message)
          );
        });
      }
    },
  });

  render() {
    return (
      <Text
        {...this.panResponder.panHandlers}
        style={{ flex: 1, paddingTop: '50%' }}>
        Pan left to open camera
      </Text>
    );
  }
}

Upvotes: 0

bennygenel
bennygenel

Reputation: 24670

You can listen for pan events with PanResponder and navigate to desired screen or run an action or similar to open up the camera.

PanResponder

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.

By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.

It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object:

onPanResponderMove: (event, gestureState) => {}

Upvotes: 2

Related Questions