Myujth

When the View mounts, I would like the secondary view to be off the screen to the right of the main view.

When the user pan swipes left, the secondary view should follow the pan and eventually cover the main view. (like Instagram camera)

I have a basic structure set up, but I'm not sure how to finalize the <Animated.View> part. For example, do I put the pan handler on the main view or on the secondary view? I don't want the secondary view to cover any interactions on the main view.

import React from 'react';
import PanResponder, Animated, Dimensions, StyleSheet, Text, View from 'react-native';
const winWidth = Dimensions.get('window').width
const winHeight = Dimensions.get('window').height

class Main extends React.Component 
 constructor(props)
 super(props);
 
 translateX = new Animated.Value(0);
 panResponder = PanResponder.create(
 onMoveShouldSetPanResponderCapture: (e, gs) => 
 return gs.dx < 0 //allow left only
 ,
 onPanResponderMove: (e, gs) => 
 if(gs.dx < 0) 
 Animated.event([null, dx: this.translateX])(e, gs) 
 
 ,
 onPanResponderRelease: (e, vx, dx) => 
 //Secondary View should now cover the main View
 ,
 onPanResponderTerminationRequest: (e, gs) => 
 return false 
 ,
 onPanResponderTerminate: (e, vx, dx ) => 
 ,
 )
 render()
 return(
 <View style=styles.main>
 <View style=styles.secondary></View>
 <View><Text>Other components will be displayed</Text></View>
 </View>
 )
 


const styles = StyleSheet.create(
 main:
 flex:1,
 flexDirection:'column',
 backgroundColor: '#ffffff'
 ,
 secondary:
 width: winWidth,
 height: winHeight,
 backgroundColor: 'red',
 position: 'absolute',
 top:0,
 left:winWidth, //start off screen
 ,
)

I am not sure if this is what you are after but the way I did it was nesting two View inside the Animated.View Component which cover the full screen.

<Animated.View style=[this.position.getLayout(), display: 'flex', flex: 1, flexDirection: 'row'] ...this.panResponder.panHandlers>
 <View style=width: '100%', height: '100%', backgroundColor: 'yellow'>
 <Text>
 This is the Main view
 </Text>
 </View>

 <View style= height: '100%', width: '100%', backgroundColor: 'red'>
 <Text>
 This is the invisible View
 </Text> 
 </View>
</Animated.View>

• The styling in the Views is to make each cover the full width




• inside the Animated.View I used the array notation to apply two styles




• this.position.getLayout() is the one that gives the coordinates/position of where the Animated.View component should be




• The other styling object is so we can render the child views next to each other using flexbox particularly setting



• 
  

  Also attach the panHandlers to the Animated.View

  
  
  

  constructor(props)
   super(props)
   position = new Animated.ValueXY()
  
   const panResponder = PanResponder.create(
   onStartShouldSetPanResponder: ()=> true,
   onPanResponderMove: (evt, gesture)=>
   //Need to set theshhold and state.isOpen to determine direction here
   position.setValue(x: gesture.dx, y: 0)
   ,
   onPanResponderGrant: ()=>
   this.position.setOffset(x: this.position.x._value, y: 0)
   this.position.setValue(x: 0, y: 0)
   ,
   onPanResponderRelease: ()=>
   this.openOrClose() 
   
   )
  
   this.state = isOpen: false 
   this.panResponder = panResponder
   this.position = position
  
  

  
  



• I used state to monitor where the View Should move to this.state = isOpen: false depending on which view was visible.




• The functions to move are mainly position.setValue(x: gesture.dx, y: 0) which tracks the movement while the touch/pan is still active and this.openOrClose() which is called when the touch/pan is released.




• The openOrClose function determines how to handle the movement and the main logic should be here. I just did a simple case and did not include any threshHold in this example.




• To understand panHandlers I suggest you read this article as it explains the reasons for onPanResponderGrant best.

Below is the code for the working Component

import React, Component from 'react'
import View, Text, Animated, PanResponder, Dimensions from 'react-native'

const ScreenWidth = Dimensions.get('window').width

//Logic to flattenOffset required
export class Swipable extends Component
	constructor(props)
		super(props)
		position = new Animated.ValueXY()

		const panResponder = PanResponder.create(
			onStartShouldSetPanResponder: ()=> true,
			onPanResponderMove: (evt, gesture)=>
				//Need to set theshhold and state.isOpen to determine direction here
				position.setValue(x: gesture.dx, y: 0)
			,
			onPanResponderGrant: ()=>
				this.position.setOffset(x: this.position.x._value, y: 0)
				this.position.setValue(x: 0, y: 0)
			,
			onPanResponderRelease: ()=>
				this.openOrClose()		
			
		)

		this.state = isOpen: false 
		this.panResponder = panResponder
		this.position = position
	

	openOrClose = ()=>
		this.position.flattenOffset()
		//determine where to move depending onState
		direction = this.state.isOpen ? 0 : -ScreenWidth

		Animated.spring(this.position, 
			toValue: x: direction, y: 0
		).start(()=>
			//Callback when animation is complete to show if open or closed
			this.setState((prevState)=>
			 	return isOpen: !prevState.isOpen
			)
		)
	

	render()
		return(
			<Animated.View style=[this.position.getLayout(), display: 'flex', flex: 1, flexDirection: 'row'] ...this.panResponder.panHandlers>
				<View style=width: '100%', height: '100%', backgroundColor: 'yellow'>
					<Text>
						This is the Main view
					</Text>
				</View>
				
				<View style= height: '100%', width: '100%', backgroundColor: 'red'>
					<Text>
						This is the invisible View
					</Text>		
				</View>
			</Animated.View>
		)
	

I ran the above code on an Android emulator, I am sure it will work on ios. If there is anything I need to clarify or improve please do tell me