regression: lock screen no longer appears full screen (#7118)

Author: Rohit3523

app/containers/Passcode/Base/Base.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+
+import Base, { type IBase } from '.';
+import { TYPE } from '../constants';
+
+export default {
+	title: 'Passcode/Base'
+};
+
+const PasscodeBase = ({ ...props }) => {
+	const ref = useRef<IBase>(null);
+	return <Base ref={ref} type={TYPE.CHOOSE} title='Create Passcode' onEndProcess={() => {}} {...props} />;
+};
+
+export const ChooseType = () => (
+	<View style={{ flex: 1 }}>
+		<PasscodeBase type={TYPE.CHOOSE} title='Create Passcode' />
+	</View>
+);
+
+export const ConfirmType = () => (
+	<View style={{ flex: 1 }}>
+		<PasscodeBase type={TYPE.CONFIRM} title='Confirm Passcode' previousPasscode='123456' onError={() => {}} />
+	</View>
+);
+
+export const EnterType = () => (
+	<View style={{ flex: 1 }}>
+		<PasscodeBase type={TYPE.ENTER} title='Enter Passcode' />
+	</View>
+);
+
+export const WithSubtitle = () => (
+	<View style={{ flex: 1 }}>
+		<PasscodeBase type={TYPE.CHOOSE} title='Create Passcode' subtitle='This passcode will protect your data' />
+	</View>
+);
+
+export const WithBiometry = () => (
+	<View style={{ flex: 1 }}>
+		<PasscodeBase type={TYPE.ENTER} title='Enter Passcode' showBiometry onBiometryPress={() => {}} />
+	</View>
+);
+
+export const EnterWithSubtitleAndBiometry = () => (
+	<View style={{ flex: 1 }}>
+		<PasscodeBase
+			type={TYPE.ENTER}
+			title='Unlock App'
+			subtitle='Authentication required'
+			showBiometry
+			onBiometryPress={() => {}}
+		/>
+	</View>
+);

app/containers/Passcode/Base/Base.test.tsx

@@ -0,0 +1,60 @@
+import React, { createRef } from 'react';
+import { render } from '@testing-library/react-native';
+
+import { generateSnapshots } from '../../../../.rnstorybook/generateSnapshots';
+import Base, { type IBase } from '.';
+import { TYPE } from '../constants';
+import * as stories from './Base.stories';
+
+const onEndProcessMock = jest.fn();
+
+const TestBase = ({ ...props }) => {
+	const ref = createRef<IBase>();
+	return <Base ref={ref} type={TYPE.ENTER} title='Test Title' onEndProcess={onEndProcessMock} {...props} />;
+};
+
+describe('Base Passcode Component', () => {
+	beforeEach(() => {
+		onEndProcessMock.mockClear();
+	});
+
+	test('should render with title', () => {
+		const { getByText } = render(<TestBase title='Enter Passcode' />);
+		expect(getByText('Enter Passcode')).toBeTruthy();
+	});
+
+	test('should render with subtitle when provided', () => {
+		const { getByText } = render(<TestBase title='Enter Passcode' subtitle='Authentication required' />);
+		expect(getByText('Authentication required')).toBeTruthy();
+	});
+
+	test('should not render subtitle when not provided', () => {
+		const { queryByText } = render(<TestBase title='Enter Passcode' />);
+		expect(queryByText('Authentication required')).toBeNull();
+	});
+
+	test('should expose ref methods', () => {
+		const ref = createRef<IBase>();
+		render(<Base ref={ref} type={TYPE.ENTER} title='Enter Passcode' onEndProcess={onEndProcessMock} />);
+		expect(ref.current?.clearPasscode).toBeDefined();
+		expect(ref.current?.wrongPasscode).toBeDefined();
+		expect(ref.current?.animate).toBeDefined();
+	});
+
+	test('should render biometry button when showBiometry is true', () => {
+		const { getByTestId } = render(<TestBase type={TYPE.ENTER} title='Enter Passcode' showBiometry onBiometryPress={() => {}} />);
+		expect(getByTestId('biometry-button')).toBeTruthy();
+	});
+
+	test('should render all passcode buttons with testIDs', () => {
+		const { getByTestId } = render(<TestBase type={TYPE.ENTER} title='Enter Passcode' />);
+		// Number buttons 0-9
+		for (let i = 0; i <= 9; i++) {
+			expect(getByTestId(`passcode-button-${i}`)).toBeTruthy();
+		}
+		// backspace button
+		expect(getByTestId('passcode-button-backspace')).toBeTruthy();
+	});
+});
+
+generateSnapshots(stories);

app/containers/Passcode/Base/Button.tsx

@@ -12,15 +12,17 @@ interface IPasscodeButton {
 	disabled?: boolean;
 	onPress?: Function;
 	style?: StyleProp<ViewStyle>;
+	testID?: string;
 }
 
-const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
+const Button = React.memo(({ style, text, disabled, onPress, icon, testID }: IPasscodeButton) => {
 	const { colors } = useTheme();
 
 	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
+			testID={testID}
 			style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
 			underlayColor={colors.buttonBackgroundSecondaryDefault}
 			rippleColor={colors.buttonBackgroundSecondaryPress}