Gesture recognizer inside of a rn camera working only when background color is set to something

[vibss2397]

Hey, I was making kinda like a snapchat app and used rncamera to show the camera on the whole screen, I tried different configurations but gesture recognizer only works when its background color is set to some color, otherwise it does not.

Also when i try to place gesture recognizer above all the other elements then it only works on a small distance around the text which displays onSwipe callback recieved gesture

this is the rendered part : `` <View style={{flex: 1, flexDirection: 'row', alignItems: 'stretch',backgroundColor: 'black'}}>

<RNCamera ref={ref=> { this.camera = ref; }} style = {styles.preview} type={this.state.cameraType}   flashMode={this.state.flash} autoFocus={this.state.autoFocus} mirrorImage={this.state.mirrorMode} permissionDialogTitle={'Permission to use camera'} permissionDialogMessage={'We need your permission to use your camera phone'} onGoogleVisionBarcodesDetected={({ barcodes }) => { console.log(barcodes) }} >  
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'stretch', }}>  
        <GestureRecognizer onSwipeLeft={(state)=> this.onSwipeLeft(state)} config={config} style={{ flex: 1, backgroundColor: None, }} >  
            <Text>{this.state.myText}</Text>  
            <Text>onSwipe callback received gesture: {this.state.gestureName}</Text>  
            <View style={styles.blehh}>  
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <TouchableOpacity onPress={ this.changeCameraType.bind(this)} style={ [this.state.cameraType=='back' ?styles.backButton:styles.backButtonNew,{marginLeft: '1%'}]}>
                        <Icon name={ "camera"} size={16} color={this.state.cameraType=='back' ? "#ffff": '#000'} />
                    </TouchableOpacity>
                </View>
                <View style={{flex: 1}}>
                    <TouchableOpacity onPress={ this.takePicture.bind(this)} style={ styles.capture}>
                    </TouchableOpacity>
                </View>
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <TouchableOpacity onPress={ this.changeFlashType.bind(this)} style={ [this.state.flashActive?styles.flashOnButton:styles.backButton,{marginLeft: '23%'}]}>
                        <Icon name={ "bolt"} style={{ color: this.state.flashActive? '#000': '#fff'}}size={28} />
                    </TouchableOpacity>
                </View>
            </View>
        </GestureRecognizer>
    </View>
</RNCamera>

``

Any help on how to make gesture swipe cover the whole screen without background color will be appreciated

[jas10022]

I am currently having this same issue, were you able to figure out a resolution to this issue?

[vibss2397]

Hey @jas10022 , so i am not sure entirely what is the issue but you can set the background transparency to an extremely small value making it appear transparent (in my case) : backgroundColor: 'rgba(255, 255, 255, 0.15)'

Also the other difference i noticed was i set the gesture recognizer component directly inside the RNCamera one and the view component inside the gesture recognizer one. Like instead of code above you can do :

<RNCamera>
    <GestureRecognizer>
         <view>...
          .......
          </view>
    </GestureRecognizer>
</RNCamera>

Hope these help :) , again since there has been some time so I'm not sure which will help but these 2 were the major things i changed