Styjun

Tear out when plate making w/ a router

What is the use of FullForm in Mathematica?

How can I protect myself in case of a human attack like the murders of the hikers Jespersen and Ueland in Morocco?

Why are some Mac apps not available on AppStore?

CBP interview, how serious should I take it?

Is it appropriate for a professor to require students to sign a non-disclosure agreement before being taught?

How is the Team Scooby Doo funded?

Should I use my toaster oven for slow roasting?

How can I fix a framing mistake so I can drywall?

How should we understand "unobscured by flying friends" in this context?

Georgian capital letter “Ⴒ” (“tar”) in pdfLaTeX

Is there a "right" way to interpret a novel? If so, how do we make sure our novel is interpreted correctly?

What does "synoptic" mean in avionics?

What is negative current?

Have there been any countries that voted themselves out of existence?

A medieval fantasy adventurer lights a torch in a 100% pure oxygen room. What happens?

Two different colors in an Illustrator stroke / line

Can a magnet rip protons from a nucleus?

Random point on a sphere

Do any aircraft carry boats?

Are scroll bars dead in 2019?

Does the mana ability restriction of Pithing Needle refer to the cost or the effect of an activated ability?

Might have gotten a coworker sick, should I address this?

Will replacing a fake visa with a different fake visa cause me problems when applying for a legal study permit?

ReactNative: Element appearing on Top but wont trigger onPress

ScrollView snaps back into place with position: absoluteAbsolute positioning a FlatList item react-nativeOverlaying an effect onto text in scrollview in react native (expo)React Native Android Clipping ChildrenComponent won't stay wrapped within bounds (React Native)React-Native error adding a video using expo to the app.js for backgroundHow to make an image of a <ImageBackground> tag darker (React Native)How to animate fadein fadeout in reactnative with zindex?React Native - Touchable Opacity inside Animated.View is firing event of background list viewReact Native Absolute Positioned Component elements onPress events not working

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.

You guys can see the issue:

Code for the Dropdown is:

 <View style=[styles.container]>
 <TouchableOpacity style=styles.main_container onPress=this.animate>
 <Text style=styles.text>this.state.selectedCategoryText</Text>
 <Image style=styles.image
 source=require('../../assets/icons/dropdown.png')
 />
 </TouchableOpacity>
 <View >
 <Animated.View style=[styles.animated_container,opacity: this.opacity, zIndex:1, elevation:1]>
 <ScrollView style=height:60>
 this.data.map( (item, i)=>
 <TouchableOpacity 
 style=
 disabled=false 
 key=i 
 onPress=()=>this.selectItem(i)>
 <Text style=styles.item_text>item </Text>
 </TouchableOpacity>
 )
 </ScrollView>
 </Animated.View>

 </View>
 </View>

I have applied absolute positioning on the animated view which displays the dropdown items.

animated_container:
 backgroundColor: colors.secondaryWhiteColor,
 position: 'absolute',
 top: '100%',
 width: '100%', height: 70

react-native expo

share|improve this question

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try adding display: block and z-index:9999999 (to verify). Alternatively, add some padding to see if that helps.
  
  – Joel
  Mar 28 at 8:31
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  React native doesn't supports block facebook.github.io/react-native/docs/layout-props#display. zIndex is alsonot making any effect :(
  
  – Rusty
  Mar 28 at 8:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  There is a react-native bug on Android where touch events do not work for elements which are absolutely positioned outside their container element
  
  – dentemm
  Mar 28 at 9:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have managed to know the source of the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.
  
  – Rusty
  Mar 28 at 10:44
  

  
  
  
  

add a comment | 

1

I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.

You guys can see the issue:

Code for the Dropdown is:

 <View style=[styles.container]>
 <TouchableOpacity style=styles.main_container onPress=this.animate>
 <Text style=styles.text>this.state.selectedCategoryText</Text>
 <Image style=styles.image
 source=require('../../assets/icons/dropdown.png')
 />
 </TouchableOpacity>
 <View >
 <Animated.View style=[styles.animated_container,opacity: this.opacity, zIndex:1, elevation:1]>
 <ScrollView style=height:60>
 this.data.map( (item, i)=>
 <TouchableOpacity 
 style=
 disabled=false 
 key=i 
 onPress=()=>this.selectItem(i)>
 <Text style=styles.item_text>item </Text>
 </TouchableOpacity>
 )
 </ScrollView>
 </Animated.View>

 </View>
 </View>

I have applied absolute positioning on the animated view which displays the dropdown items.

animated_container:
 backgroundColor: colors.secondaryWhiteColor,
 position: 'absolute',
 top: '100%',
 width: '100%', height: 70

react-native expo

share|improve this question

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try adding display: block and z-index:9999999 (to verify). Alternatively, add some padding to see if that helps.
  
  – Joel
  Mar 28 at 8:31
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  React native doesn't supports block facebook.github.io/react-native/docs/layout-props#display. zIndex is alsonot making any effect :(
  
  – Rusty
  Mar 28 at 8:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  There is a react-native bug on Android where touch events do not work for elements which are absolutely positioned outside their container element
  
  – dentemm
  Mar 28 at 9:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have managed to know the source of the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.
  
  – Rusty
  Mar 28 at 10:44
  

  
  
  
  

add a comment | 

I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.

You guys can see the issue:

Code for the Dropdown is:

 <View style=[styles.container]>
 <TouchableOpacity style=styles.main_container onPress=this.animate>
 <Text style=styles.text>this.state.selectedCategoryText</Text>
 <Image style=styles.image
 source=require('../../assets/icons/dropdown.png')
 />
 </TouchableOpacity>
 <View >
 <Animated.View style=[styles.animated_container,opacity: this.opacity, zIndex:1, elevation:1]>
 <ScrollView style=height:60>
 this.data.map( (item, i)=>
 <TouchableOpacity 
 style=
 disabled=false 
 key=i 
 onPress=()=>this.selectItem(i)>
 <Text style=styles.item_text>item </Text>
 </TouchableOpacity>
 )
 </ScrollView>
 </Animated.View>

 </View>
 </View>

I have applied absolute positioning on the animated view which displays the dropdown items.

animated_container:
 backgroundColor: colors.secondaryWhiteColor,
 position: 'absolute',
 top: '100%',
 width: '100%', height: 70

react-native expo

share|improve this question

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

 <View style=[styles.container]>
 <TouchableOpacity style=styles.main_container onPress=this.animate>
 <Text style=styles.text>this.state.selectedCategoryText</Text>
 <Image style=styles.image
 source=require('../../assets/icons/dropdown.png')
 />
 </TouchableOpacity>
 <View >
 <Animated.View style=[styles.animated_container,opacity: this.opacity, zIndex:1, elevation:1]>
 <ScrollView style=height:60>
 this.data.map( (item, i)=>
 <TouchableOpacity 
 style=
 disabled=false 
 key=i 
 onPress=()=>this.selectItem(i)>
 <Text style=styles.item_text>item </Text>
 </TouchableOpacity>
 )
 </ScrollView>
 </Animated.View>

 </View>
 </View>

animated_container:
 backgroundColor: colors.secondaryWhiteColor,
 position: 'absolute',
 top: '100%',
 width: '100%', height: 70

share|improve this question

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

share|improve this question

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

asked Mar 28 at 8:26

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

1 Answer
1

active

oldest

votes

0

I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.

share|improve this answer

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55393021%2freactnative-element-appearing-on-top-but-wont-trigger-onpress%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.

share|improve this answer

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

add a comment | 

0

I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.

share|improve this answer

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

add a comment | 

I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.

share|improve this answer

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

share|improve this answer

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges

answered Mar 29 at 5:31

RustyRusty

1,23511 gold badge1515 silver badges2424 bronze badges