Status-react: Add 'Selectable' to a Text component on profile and wallet screens

[denis-sharypin]

User Story

As a user, I want to have an opportunity to copy contact codes and wallet address manually.

Description

Type: Feature

Afer a long press, I would like to have an opportunity to copy contact codes and wallet adress through a native platform instrument for iOS and Android. I believe it could be done by adding props Selectable to a Text component. Docs: https://facebook.github.io/react-native/docs/text.html#selectable

(pic for iOS, on Android it should show its native instrument)

Reproduction

All three codes that have to be copyable could be found here:

1. User contact code
2. Open Status
3. Tap Profile tab
4. Tap Share my contact code button

5. See Contact code below QR code

6. Wallet address

7. Open Status
8. Tap Wallet tab
9. Tap Receive transaction button

10. See Wallet address below QR code

11. Friends contact code

12. Open Status
13. Tap plus button on a Home tab
14. Tap Start new chat
15. Choose contact ex. Jarrad
16. See contact profile and contact code on it

Additional Information

• Operating System: Android|iOS

[status-open-bounty]

Balance: 0.000000 ETH
Tokens: SNT: 1000.00
Contract address: 0xb2fc4379141bc90d5e24b5458730ba10078529f4
Network: Mainnet
Paid to: go1t
Visit https://openbounty.status.im to learn more.

[denis-sharypin]

@foopang Do you feel like you can fix this? :) I really like your contribution!

[foopang]

@denis-sharypin Thanks! I will keep an eye on it. I feel that it is a very beginner-friendly task, I guess you may wanna let new contributors work on it first.
I will quickly submit a PR after a couple of days if no one else is picking up the task :)

[go1t]

@denis-sharypin I can pick this up but just wondering one thing, wouldn't it be a better experience to make this text copied-on-tapped (and on tap we show a little small popup with the text "Address copied to clipboard" or something)? It's less tap that way and there are no other possible actions intended for this text too.

[denis-sharypin]

@go1t I thought about that. But decided to go with this solution bc it's simpler and quicker from implementation pov and such behavior consistent and native to the mobile platforms. Otherwise, I need to create a custom alert, then provide animation for this alert and behavior is not consistent with our patterns (it's a button behavior but we don't have buttons here). Later we will probably add a small button to this address which allows to copy this or even replace it with ens username.

Would be great if you pick up this.

[go1t]

Got it. I think the implementation would be about the same since normal selectable prop can't provide the highlight behavior (as far as I've searched), so we would need to use TouchableHighlight either way.

But yeah I agree that adding a copy button would make the most sense. I also have some experience in UI design so I can give this approach a shot as well if you are not available to design this yet. But I can keep going in the original direction as well if you want.

[denis-sharypin]

@go1t thanks! I would happy if we go in the original direction right now.

[flexsurfer]

@go1t @denis-sharypin @jeluard guys lets find some compromise because current solution from @go1t is over complicated for this issue, let's just implement standard os copy paste: long tap, select all, copy, wdyt?

[denis-sharypin]

Let's add only Selectable to the text and that's it

[go1t]

@flexsurfer @denis-sharypin @jeluard There are four ways we can go about here:

1. Add selectable prop only. This gives no highlight in any state.
2. Add selectable prop along with a no-op on-press or on-long-press. This will give the highlight during the press, but the highlight will go away when the touch is released.
3. The way I'm doing right now, which would give the highlight behavior as the design provided. The reason it's so complicated is because I have to provide an unhighlighting behavior. But if we can compromise by having the text stay highlighted until it's tapped again, things will be MUCH simpler.
4. Replace this Text component with a TextInput (with editable = false and multiline = true). This will give a very similar behavior to the OS's. The image below is after a long tap (no styling yet)
   

If we can go with the 3rd option with compromise, it will be just the matter of adding an atom to the text component and that's it (essentially a couple extra lines). The 4th option is as simple as adding a selectable prop as well, as it's just replacing the Text with TextInput. Probably need to add some styles but that's it. That's why I think either the 3rd option or 4th option is the better way to go here.

What do you think?

[jeluard]

@go1t With option 2, can end users still copy the address content?

[go1t]

Yes. It’s just going to be a little confusing since the highlight would show up briefly then go away when the tooltip is there.

But yeah the behavior of option 1 and 2 is an issue on react-native side that has been there for quite a while :/

[jeluard]

Can we disable the tooltip? Essentially we need a simple way to copy the address.
@denis-sharypin WDYT?

[go1t]

We definitely can. You can see our discussion in the comments above as well.

[denis-sharypin]

@jeluard I personally don't want to introduce a new pattern right now (tap on something — get visual confirmation that it's copied with transition animations)
Initially, this task was proposed as a quick fix using native platform instruments.
We will def propose some design updates later when we have resources.

[jeluard]

@go1t Sorry I guess we will go with your option 4. then, if you can make it look like initial screenshots.

[go1t]

got it!