Fix Obscured Timestamp Tooltip in Notifications Page

[liby]

This PR addresses an issue observed in the Notifications Page of our Bluesky Web Interface, where the timestamp tooltip was obscured when trying to view it. This behavior diminished the overall user experience, as users had trouble reading the timestamp which is crucial to understand the chronological context of the notification.

Fix: #1754

Context

The root of this problem is traced back to an inherent issue with React Native FlatList component. Upon further investigation, similar concerns have been discussed widely in the React Native community. For reference, the following are related issues:

• Issue #376 on hossein-zare/react-native-dropdown-picker
• Issue #18616 on facebook/react-native
• Issue #1903 on necolas/react-native-web

Solution

To resolve this, the PR includes a workaround of applying a dynamic z-index to the CellRendererComponent by using index value from props.

CellRendererComponent={({children, index, style, ...props}) => {
    return (
        <View style={[style, {zIndex: -1 * index}]} index={index} {...props}>
            {children}
        </View>
    );
}}

This change effectively brings the tooltip to the forefront, improving its visibility and thereby enhancing the overall user experience.

[pfrazee]

This is because RNW applies z-index: 0 to all views (necolas/react-native-web#689) which I need to wrap my head around a little bit. I'd prefer not to go with this approach unless we have to.