[PAID] [$500] Scan - Inconsistency of flashlight/torch behavior in Scan tab

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.24-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Prerequisite: Camera use permission is accepted previously
Android App

1. Login to android Expensify App
2. Tap FAB button
3. Tap Request money
4. Tap on flashlight icon to enable (verify nothing happens)
5. Tap on green circle to take a shoot with camera (verify photo is taken with flashlight is ON)
   Mobile Web
6. Login to ND Expensify
7. Tap FAB button
8. Tap Request money
9. Tap on flashlight icon to enable (verify flashlight is ON)
10. Tap on flashlight icon to disable ((verify flashlight is OFF)

Expected Result:

Flashlight should function exactly same behaviour both mobile apps and mobile web
Flashlight icon should be shown in Scan tab within all devices

Actual Result:

Both Android and IOS apps works similarly; flashlight is only ON while taking a photo shoot
In Mobile Web, tapping on the flash icon turns the flashlight ON&OFF without camera taking a shoot

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6340357_1705077132365.Realme_GT2_Pro_App_Chrome.mp4

Bug6340357_1705077132330.No_flashlight_icon_on_mobile_web.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017684a08e378933c3
• Upwork Job ID: 1745866187913547776
• Last Price Increase: 2024-01-12
• Automatic offers:
• s77rt | Reviewer | 28108708
• tienifr | Contributor | 28108709

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017684a08e378933c3

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt (External)

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Inconsistency of flashlight/torch behavior in Scan tab

What is the root cause of that problem?

We don’t pass the torch param here

What changes do you think we should make in order

We should pass the torch prop like we do for web:

App/src/pages/iou/request/step/IOURequestStepScan/index.js

Line 221 in c8631be

torchOn={isFlashLightOn}

torchOn={flash}

To make sure we have torch available, we may use the onTorchAvailability prop [Ref: here] to set a custom state (to disable the torch button from press):

App/src/pages/iou/request/step/IOURequestStepScan/index.js

Line 222 in c8631be

onTorchAvailability={setIsTorchAvailable}

Alternatively

We may consider renaming flash variable to a more descriptive name like isFlashLightOn like we have on web

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The torch for native only appears when taking a picture, but for mWeb, the torch shows immediately when turned on.

What is the root cause of that problem?

For native, the behavior is the flash is applied when taking the picture.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.js

Lines 187 to 190 in c8631be

	camera.current
	.takePhoto({
	qualityPrioritization: 'speed',
	flash: flash ? 'on' : 'off',

But for web, we set up the torch like this:

App/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.js

Lines 49 to 57 in c8631be

	useEffect(() => {
	if (!trackRef.current) {
	return;
	}
	trackRef.current.applyConstraints({
	advanced: [{torch: torchOn}],
	});
	}, [torchOn]);

What changes do you think we should make in order to solve the problem?

For native, the camera can receive a torch prop that we can set to true.

torch={flash && device.hasTorch}

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Both Android and IOS apps works similarly; flashlight is only ON while taking a photo shoot
In Mobile Web, tapping on the flash icon turns the flashlight ON&OFF without camera taking a shoot

What is the root cause of that problem?

In Android/iOS native, we only apply the torch when the user is taking photo here. So the flash only applies when talking photos.

Meanwhile for web, we'll turn on the flashlight as soon as the user press on it in the app. This is not correct because the flashlight should only be on when taking photos, similar to how native camera works. This is to avoid unintended inconvenience for other people and also save device battery life.

What changes do you think we should make in order to solve the problem?

Similar to native Android, iOS, if the user enable flash, in web we should only apply the torch (by trackRef.current.applyConstraints({ ) right before taking the screenshot here, after that we should turn the torch off (also by trackRef.current.applyConstraints({ ). If the user doesn't enable flash/torch, then we don't need to do anything and can just take the screenshot normally.

What alternative solutions did you explore? (Optional)

NA

[s77rt]

@neonbhai Thanks for the proposal. I think we are looking to achieve the consistency here the other way around i.e. web should behave like native.

[s77rt]

@bernhardoj Thanks for the proposal. Same note as above ^