BlackScreen on Back action

[dinhhuynhky]

When in Camera screen, press back button on the phone. Black Screen show not back scene !

[ekreutz]

Provide more information if you think there is an issue with the scanning library. :) At first glance, it seems to me as if your app lifecycle management needs improvement..? This library provides some useful helper methods for pausing and resuming the scanner, if you need better control!

[ParthBarot-BoTreeConsulting]

@ekreutz I am using this for barcode scanning for Android, render method of the component has something like this,

return(
       <BarcodeScanner
          style={{flex: 1}}
          onBarcodeRead={({data, type}) => {
              this._onBarCodeRead(data)
              // Alert.alert(`Barcode '${data}' of type '${type}' was scanned.`);
          }}
        />
      )

It works fine on Android 6 and below, but Android 7.x has issues. When I press the back button, it shows the black screen. When we press home and restart the app, the black screen is gone and the app works fine.

Any suggestions?

[kruyvanna]

Hi I fixed it with this pull request. https://github.com/ekreutz/react-native-barcode-scanner-google/pull/6

[ParthBarot-BoTreeConsulting]

@kruyvanna Thanks, for now we have implemented a bridge for zxing library, see here - https://github.com/BoTreeConsultingTeam/react-native-android-zxing-barcode-scanner - This works like charm compared to react-native-open-camera.

Though, We will try the new version!

[ParthBarot-BoTreeConsulting]

@kruyvanna Nopes, its not working for me on Lenovo K6 power having Android 7.0. It's showing black screen when I press application back button (not the hardware back) and uses navigation (using navigator).

Thanks

[dinhhuynhky]

I had overwrite onpause oncomplite method but nothing was change. I used ReactNative with native route. I think it issuse

Vào 01-08-2017 1:00, "Emil Kreutzman" notifications@github.com đã viết:

Provide more information if you think there is an issue with the scanning library. :) At first glance, it seems to me as if your app lifecycle management needs improvement..? This library provides some useful helper methods for pausing and resuming the scanner, if you need better control!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ekreutz/react-native-barcode-scanner-google/issues/4#issuecomment-319147141, or mute the thread https://github.com/notifications/unsubscribe-auth/AR2TxEFLnVJSwHzuWj81eigBtyUY5RcXks5sThYugaJpZM4Ogtof .

[ekreutz]

Some great feedback in here. I'll merge the PR asap!

[kryst4l]

emmmmm.......when i use navigator to this barcode.js it's black sceen.

[srolija]

I had a very similar issue, whenever I would hide (unmount) component based on given property, part of the screen would become black (in some cases entire screen). In my case problem was that BarcodeScanner was overlayed with action buttons view, something like:

<View style={{ flex: 1 }}>
    <BarcodeScanner style={{ flex: 1 }} />
    <View style={{ position: absolute, top: 0, left: 0, right: 0, bottom: 0 }}>buttons</View>
</View>

So when component would unmount, all the space below latest button would not rerender and would be black, if I forced app to rerender native components (exiting and opneing app or rotating it) it would start working again. I suspect there is some issue with absolute positioning and determining which view should render part of the screen, so react-native thinks that camera preview should handle rendering that part of screen so when BarcodeScanner is unmounted it remains black.

After many unsuccessful attempts, a workaround that seems to be working is to add the bottom border borderBottomWidth: 1, borderColor: 'black' (it also works with transparent border) to the absolute positioned component which makes entire screen rerender and work as expected.

One thing that I noticed is that componentWillUnmount method calls pauseScanner, shouldn't it some way release component? I suspect this could cause problems especially with some navigation libraries like react-navigation which do not unmount scenes when stacking navigation that could easily cause multiple instances to be rendered. I did try replacing pauseScanner in componentWillUnmount with new method releaseScanner which calls release() method, but it didn't help with my issue so I am not making pull request since I am not sure whether this is expected behavior.

[kruyvanna]

Hi the fix is here https://github.com/ekreutz/react-native-barcode-scanner-google/pull/6/commits/df3ed0dfc2f4cfcee0957421d450deb3a04d52b7

Read the discussion https://github.com/ekreutz/react-native-barcode-scanner-google/pull/6#issuecomment-339207938

[ekreutz]

Alright everyone. I just spent a fair amount of time debugging this issue and made a (hopefully) thorough fix for it.

Want to try it out?

Download the latest version from master (ece3e0a) and tell me how you feel about it! I didn't yet put a tag on it, but I will if it's determined to work better.

What's in the update that I just made?

First off, big thanks to everyone who put work into fixing this issue. (Especially: @kruyvanna, @srolija) You made some great observations that made it easier to find a fix.

Fix part 1: A better approach to layout This isn't really about fixing the black screen bug, but just a general about to the layouting mechanisms used in this module. You will notice that the module is now a lot better at displaying custom layouts, especially when BarcodeScanner doesn't fill the whole screen.

Fix part 2: Fixing the black box issue Some people noticed that you can fool this view into working by adding a border around the bottom, or by using fitLayout instead of fillLayout natively. Both of these are ok fixes, but they also modify the behaviour of the module to introduce a cheap fix. You see, part of the idea of this module is to enable a beautiful scanning experience by showing the camera stream as big as possible, covering the full view. It's rarely the case that your native camera stream from your phone will be the exact same aspect ratio as the view you're showing it in, so fillLayout will crop out part of the stream (possibly) in order to show more camera stream surface area to the user, nice! The fix itself here comes down to layouting the camera stream smaller than the view it fits inside, so that navigator doesn't get confused, and then stretching it out using Android's view transformations. Same experience without black box hassle! Yay. :)

Fix part 3: Making fill vs fit optional (details in README) Above in fix part 2 I talk about clean UI achieved by filling or covering the container view with the camera stream. However, this might not be ideal for everyone, so I made this an optional value accessible JS-side as a prop for BarcodeScanner. Note that both of these modes should (fingers crossed) work well with navigator, so choose whichever one fits your UI/UX better.

Looking forward to people trying out these fixes and features!

Edit: also starting using new prop-types

[kruyvanna]

Hi @ekreutz,

Thanks for the change. Just have the device to test today. Looks like COVER does not work as expected.

[ekreutz]

@kruyvanna which version of Android would that be? Edit: thanks for the excellent comment style with descriptive picture btw. Quite useful!

[kruyvanna]

@ekreutz

It's Android 6.0.1 Galaxy S5 FYI, the blue color is the BarcodeScanner's background.

 <BarcodeScanner
      style={{ flex: 1, backgroundColor: 'blue' }}
      onBarcodeRead={this.handleBarcode.bind(this)}
      focusMode={FocusMode.AUTO /* could also be TAP or FIXED */}
      cameraFillMode={CameraFillMode.FIT /* could also be FIT */}
    />

[JorgeCeja]

Any updates on this? Thanks!