Wrap in TouchableWithoutFeedback (discussed over chat)

TouchableWithoutFeedback should generally be avoided - it doesn't give a user any feedback. It was used initially here so that we can get an event from a disabled control - but that was just a workaround. In this case we should probably use TouchableOpacity.

Maybe we should give a more specific message here that explains that since notifications are not enabled on this device, you can't modify push notif settings?

Instead of having this defined here, I think it is better to have hasPushPermissions in Props, and to directly select hasPushPermissions using useSelector in ConnectedThreadSettingsPushNotifs:

const hasPushPermissions = useSelector(state => state.deviceToken !== null);

In push-handler.js, we clearly use different copy for iOS and Android. Why did you get rid of the Android message? Was it inaccurate, perhaps?

You have a single word threadPlease here. Did you test this?

Let me just rewrite it for you, that will probably be faster. I think it would be good to have several different texts depending on iOS vs. Android and on this.state.currentValue.

If it's iOS and notifs are enabled, we can say:

Notifs for this thread are enabled, but cannot be delivered to this device because you haven't granted notif permissions to Comm. Please enable them in Settings App → Notifications → Comm

If it's iOS and notifs are disabled, we can say:

In order to enable push notifs for this thread, you need to first grant notif permissions to Comm. Please enable them in Settings App → Notifications → Comm

(Note the use of Unicode →, and the removal of the period at the end)

If it's Android, we can probably just use the copy in push-handler.js.

This is a really long text for a button... let's go with just "Go to settings"

I'm not sure if we should use icon from @expo/vector-icons here. We don't use this icon pack anywhere in mobile app. We even don't have dependency to that package in package.json - it's dependency of expo package.
Instead, I think we should use <SWMansionIcon> component with icons selected from IcoMoon.
We could use e.g. info-circle icon here - it should also better match design with other icons used in the app, as it's not filled like currently used one.

Let's avoid functions that implicitly return undefined like this, unless they have no return statements.

So a function that does not use return is okay... but if the function does use return something anywhere, then we should avoid implicit return or even the keyword return;, but instead should explicitly annotate return undefined;.

Additionally, we can invert the condition to return indentation. You should always try to do that

Interesting, I didn't realize we even had @expo/vector-icons installed. Turns out it got added in the unimodules -> expo migration. I think it is basically the same thing as react-native-vector-icons... we should dedup them. I created a backlog task to track.

As for the question of which icon to use – can you upload screenshots of each so we can compare?

Not super clear to me why you defined a function for this... why not just use the basic formulation:

let node = undefined;
if (condition) {
  node = (
    <JSX />
  );
}

Can you use a Unicode apostrophe character here? ’