I'm encountering an issue with the "z-index: -1" property in React

After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research indicates that changes in React v17 may affect z-index behavior, and attempts to use elevation have also proven ineffective.

Dependencies:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Dimensions,TextInput, Pressable } from 'react-native';
import styles from './styles';
import Svg, { Image, Ellipse, ClipPath } from 'react-native-svg';
import  Animated, {useSharedValue, useAnimatedStyle, interpolate, withTiming, withDelay, 
color}  from 'react-native-reanimated';

Form code:

<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
    <TextInput placeholder="Email"
     placeholderTextColor="#9b1306"
      style={styles.textinput}/>
    <TextInput placeholder="Full Name"
     placeholderTextColor="#9b1306"
      style={styles.textinput}/>
    <TextInput placeholder="Password"
     placeholderTextColor="#9b1306"
      style={styles.textinput}/>
    <View style = {styles.formButton}>
      <Text style={styles.buttontext}> LOG IN </Text>
    </View>
  </Animated.View>   

Functions used

const formAnimatedStyle = useAnimatedStyle(() => {
return{
  opacity : imagePosition.value === 0 ? withDelay(400,withTiming(1,{duration:800})) :   withTiming(0,{duration: 300})
}

})

CSS:

 inputformcontainer:{
    backgroundColor:'grey',
    color: '#000',
    marginBottom: 70,
    justifyContent : "center",
    zindex: -1,
    ...StyleSheet.absoluteFill,
    
}

Answer №1

If you want to utilize the z-index property in CSS, you must first specify the position of the element. The simplest approach is to include position: relative in your CSS (unless another position property like StyleSheet.absoluteFill is already present).

Additionally, it seems that the CSS you are using does not use camel case for zindex. This could potentially be causing an issue due to a typo. It would be best to switch to zIndex instead.

Here is a suggestion:

 inputformcontainer:{
    backgroundColor:'grey',
    color: '#000',
    marginBottom: 70,
    justifyContent : "center",
    position: relative;
    zIndex: -1,
    ...StyleSheet.absoluteFill,
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing getServerSideProps in the new app router (app/blah/page.tsx) for maximum functionality

I am a beginner in Next.js and I am currently experimenting with the new app router feature by placing my pages under app/.../page.tsx The code snippet provided works when using the page router (pages/blah.tsx) but encounters issues when used in app/blah/ ...

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

Tips for adding an offset to a #link located on a different webpage

I have a website that consists mainly of an index.html file with a few additional subpages. The index.html file is divided into sections, but the navigation has a fixed position and a height of 100px, which requires a 100px offset for links like <a hre ...

Parameters in functions are received by value

When working with JavaScript, one common point of confusion is the way variables are treated based on their data type. Variables of primitives are passed by value, while variables of objects are passed by reference. However, in function arguments, both pri ...

The redirect function is failing to carry the "req" parameter

Express Routes Troubleshooting app.get('/auth/google/redirect', passport.authenticate('google'), (req, res) => { console.log('req.user:', req.user) //>>>>>Outputs {username: 'bob', id: '.. ...

Error: Unable to access the 'display' property of an undefined object [react-native-payment]

I am attempting to process a payment using Android-Pay. To do so, I need the following object: global.PaymentRequest = require('react-native-payments').PaymentRequest; const METHOD_DATA = [ { supportedMethods: ['android-pay'], ...

Is there a correct way to accomplish this task? How could I go about achieving it?

Currently, I am delving into the world of react. While following along with some video tutorials, I encountered a roadblock in the request.js file. The issue popped up during the build process ./src/Row.js Line 16:45: 'fetchUrl' is not define ...

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

Error encountered: X.setValue is not a valid function and cannot be used to set the value. However, manually inputting the value as a

When I try to use the line sseTopicString.setValue(sseValueNumber), a Type error is thrown: Uncaught TypeError: sseTopicString.setValue is not a function. Interestingly, if I output the value (string) of sseTopicString before the dot, everything works fin ...

Transferring files via Bluetooth on PhoneGap

As someone new to phonegap, I'm interested in transferring text files from one device to another using Bluetooth within the platform. I've looked at several examples but haven't found a solution yet. I've come across some examples that ...

Padding the body of a single-page Angular application to ensure proper spacing and

How do I add padding to the body of a template in an angular ng-app? Where is the best place to include CSS for a ng-app rendered template? please refer to this fiddle for an example https://jsfiddle.net/aghsqnpa/ div.ngview { padding: 25px 50px 75p ...

When attempting to capture an element screenshot as PNG, a TypeError occurs indicating that the 'bytes' object is not callable

Can someone please help me figure out how to save a screenshot of a specific element in Selenium using Python3? Here is the code I am trying: from selenium import webdriver import pyautogui as pog import time options = webdriver.ChromeOptions() options ...

The alignment of two responsive divs is off

My goal is to create two responsive columns of divs that stack on top of each other as the screen size decreases. The challenge I am facing is getting these divs to always be centered and sit next to each other, using only inline CSS. <div id="containe ...

Find the value of the nearest input field using jQuery

I'm working with HTML code that looks like this: <tr> <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td> < ...

Guide on assigning a callback function in JavaScript

In this code snippet, I am initializing a new object variable and passing an object as an argument: const newObj = new customObject({ first : $('#fname').val(), last : $('#lname').val(), fn : function() { alert(this ...

Information backed by the HTML5 Local Storage feature

Is it possible to use a Local Storage object to store another Local Storage object? Thank you in advance. ...

Tips for utilizing the "this" keyword in JavaScript in conjunction with the change function

I'm currently facing an issue with the change function. I have two dropdowns that are dependent on each other. Whenever the first dropdown changes, it triggers a change in the second dropdown as well. I achieved this functionality using jQuery AJAX. H ...

Unable to host Express app on Firebase functions emulator due to a port conflict with error code EADDRINUSE: address already in use :::3000

Testing the deployment of an express app on Firebase using Firebase functions has presented a challenge for me. Upon running the command firebase serve, I encountered the error EADDRINUSE: address already in use :::3000. Below is my index.js file: const fu ...

Guide to showing an uploaded image in a child component using Vue.js

Using the v-file-input component from Vuetify, I am able to upload images with the following code: <v-file-input label="Image" filled accept="image/png, image/jpeg, image/bmp" prepend-icon="mdi-camera" v-mod ...

Create-react-app fails to generate a template even though the react framework is fully updated

I attempted to set up a fresh react directory using npx create-react-app. Unfortunately, every solution I tried resulted in the template not being provided, with the common suggestion being that my version of create-react-app may be outdated. I verified t ...