ScreenFooter - add zIndex to styles for proper stacking order

[ZivSa1]

Description

ScreenFooter's container had no zIndex, so any sibling rendered after it in the tree would intercept touches — button visible but not tappable. zIndex: 1 fixes it.

import React, {useState} from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Colors, FloatingButton, Switch, Text, View} from 'react-native-ui-lib';

export default function PlaygroundScreen() {
  const [showSibling, setShowSibling] = useState(false);
  const [pressCount, setPressCount] = useState(0);

  return (
    <SafeAreaProvider>
      <View flex>
        <ScrollView contentContainerStyle={styles.scrollContent}>
          <View style={styles.eventHeader} bg-$backgroundNeutralMedium centerV centerH>
            <Text headingM>Summer Networking Event</Text>
            <Text bodyM $textNeutral>No cover image</Text>
          </View>

          <View padding-page>
            <Text headingM marginB-s4>Summer Networking Event</Text>

            <View marginB-s3>
              <Text bodyLBold>Thursday, June 19, 2025</Text>
              <Text bodyM $textNeutral>7:00 PM – 10:00 PM</Text>
            </View>

            <View marginB-s3>
              <Text bodyLBold>Wix Tel Aviv HQ</Text>
              <Text bodyM $textNeutral>40 Namal Tel Aviv St, Tel Aviv</Text>
            </View>

            <Text bodyM $textNeutral marginB-s5>142 going · 38 spots left</Text>

            <Text bodyLBold marginB-s2>About this event</Text>
            <Text bodyM $textNeutral marginB-s5>
              Join us for an evening of networking, demos, and great conversations with fellow developers and designers.
              Light refreshments will be served. Spots are limited!
            </Text>

            <View row centerV spread marginB-s3>
              <Text bodyM>Add elevated sibling</Text>
              <Switch value={showSibling} onValueChange={setShowSibling}/>
            </View>

            <Text bodyM>FloatingButton pressed: {pressCount}</Text>
          </View>
        </ScrollView>

        <FloatingButton
          visible
          withoutAnimation
          button={{label: 'RSVP', onPress: () => setPressCount(prev => prev + 1)}}
        />

        {showSibling && <View style={styles.sibling}/>}
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  scrollContent: {
    paddingBottom: 120
  },
  eventHeader: {
    height: 180,
    justifyContent: 'center',
    alignItems: 'center'
  },
  sibling: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 100,
    zIndex: 10,
    backgroundColor: Colors.red70
  }
});

Changelog

ScreenFooter / FloatingButton - fix button not being tappable when a sibling View is rendered after it in the component tree.

Additional info

Slack thred

[github-actions]

✅ PR Description Validation Passed

All required sections are properly filled out:

• ✅ Description
• ✅ Changelog
• ✅ Additional info

Your PR is good for review! 🚀

---

This validation ensures all sections from the PR template are properly filled.

[M-i-k-e-l]

What if the user adds a zIndex to the component below?

[M-i-k-e-l]

Too specific