[$250] [Group 3][Accessible Pressable] Migrate HeaderView

[roryabraham]

HOLD on #16988

Description

Migrate HeaderView to use PressableWithoutFeedback

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01763b84324b17412b
• Upwork Job ID: 1664586780671045632
• Last Price Increase: 2023-06-11

[Skalakid]

Can you assign me to this one, please? :D

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01763b84324b17412b

[melvin-bot]

Triggered auto assignment to @maddylewis (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

📣 @Skalakid You have been assigned to this job by @grgia!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[grgia]

Labels and assignments were acting funky here, sorry for any extra pings!

[TheSonOfSocrates]

Hello, Nice to meet you.
I'm a senior engineer.
I can solve this issue in 2 days.
Allow me to list brief description.

1. Import the PressableWithoutFeedback component from the react-native library.

   import React, { useState } from 'react';
   import { View, Text, PressableWithoutFeedback } from 'react-native';

2. Change the TouchableWithoutFeedback component to PressableWithoutFeedback.

   <PressableWithoutFeedback
   onPress={() => {
   console.log('Header pressed!');
   }}

   Header

3. Test app to make sure that the HeaderView is working properly.

Here is the complete code for the HeaderView component using the PressableWithoutFeedback component:

import React, { useState } from 'react';
import { View, Text, PressableWithoutFeedback } from 'react-native';

const styles = {
header: {
height: 40,
width: 100,
backgroundColor: 'red',
},
headerText: {
fontSize: 20,
color: 'white',
},
};

const HeaderView = () => {
const [isPressed, setIsPressed] = useState(false);

return (
<PressableWithoutFeedback
onPress={() => {
setIsPressed(!isPressed);
console.log('Header pressed!');
}}
>

{isPressed ? 'Pressed' : 'Not pressed'}


);
};

export default HeaderView;

I hope to meet you soon.
Thank you.

[melvin-bot]

📣 @JavaSuperDev! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[TheSonOfSocrates]

Hello, Nice to meet you.
I'm a senior engineer.
I can solve this issue in 2 days.
Allow me to list brief description.

1. Import the PressableWithoutFeedback component from the react-native library.

   import React, { useState } from 'react';
   import { View, Text, PressableWithoutFeedback } from 'react-native';

2. Change the TouchableWithoutFeedback component to PressableWithoutFeedback.

   <PressableWithoutFeedback
   onPress={() => {
   console.log('Header pressed!');
   }}

   Header

3. Test app to make sure that the HeaderView is working properly.

Here is the complete code for the HeaderView component using the PressableWithoutFeedback component:

import React, { useState } from 'react';
import { View, Text, PressableWithoutFeedback } from 'react-native';

const styles = {
header: {
height: 40,
width: 100,
backgroundColor: 'red',
},
headerText: {
fontSize: 20,
color: 'white',
},
};

const HeaderView = () => {
const [isPressed, setIsPressed] = useState(false);

return (
<PressableWithoutFeedback
onPress={() => {
setIsPressed(!isPressed);
console.log('Header pressed!');
}}
>

{isPressed ? 'Pressed' : 'Not pressed'}


);
};

export default HeaderView;

I hope to meet you soon.
Thank you.

[Skalakid]

HI @grgia the PR is ready :D but I think I don't understand why External label was added to this issue after I finished my work

[aimane-chnaif]

why External label was added to this issue

@Skalakid nvm, it's just to pull up C+ and engineer for PR review
In the future, please link issue correctly in PR description in order not to break github automations:

$ https://github.com/Expensify/App/issues/17033

[melvin-bot]

@grgia, @maddylewis, @Skalakid, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Upwork job price has been updated to $250

[melvin-bot]

@grgia, @maddylewis, @Skalakid, @aimane-chnaif 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[maddylewis]

@aimane-chnaif - could you provide an update on where we are with this one? thanks!

also, I am going OOO until June 20. Is the only thing needed from me to issue payment? if so, and payment is due before June 20, please re-apply the BUG label so that another BZ member can process payment.

[aimane-chnaif]

PR hit staging yesterday so payment will be done after June 20 and no need to re-assign

[melvin-bot]

@grgia, @maddylewis, @Skalakid, @aimane-chnaif Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[grgia]

@maddylewis I think this issue is ready for payment

[maddylewis]

great - i can do that 👍

to confirm:

• $250 to @aimane-chnaif
• $250 to @Skalakid

[aimane-chnaif]

@maddylewis @Skalakid is from SWM, I am the only person for upwork payment

[maddylewis]

got it - ty for clarifying. ill get the offer sent over in just a few.

[maddylewis]

this is paid!