Skip to content

Z-order #6

Open
Open
@pkassonss

Description

@pkassonss

I have used this once in an earlier UI and it worked fine.

Now, I need to have it appear over a scroll view (or any component) and the z-order is not working. It appears behind the scrollview. Below is the code

Function called by rendered (to allow conditional rendering):

`
/*

  • get the activity indicator
    */
    getActivityIndicator()
    {

if(this.state.activityVisible)
{

 return (
   <View style={styles.overlayAnimation} >
     <View style>
   
       <BubblesLoader color="red" />
   
       <TextLoader text="Registering" />
   
     </View>
   </View>

   )
}

else
{
return ""
}

}`

The render section which calls this function:

` render()
{
return (

       <Button transparent onPress={() => Actions.pop()}>
         <Icon name="ios-arrow-back" />
       </Button>
  
       <Title>Register</Title>
     </Header>
  
  
     { this.getActivityIndicator() }
  
  
     <ScrollView >
  
            <View>
               <Text style={styles.labelCenter}>
                 Click here to select community
               </Text>
  
               <ModalPicker data={this.getCommunities() }  initValue="Gahanna" onChange={(option)=>{ this.setState({selectedCommunity:option.label})}}>
               </ModalPicker>
            </View>`

Note, I originally had the styling inline, but now using externally:

overlayAnimation:
{
position : 'absolute',
backgroundColor: 'red',
top : 150,
bottom : 0,
left : 165,
right : 0,
zIndex : 1,
},

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions