Skip to content

Z-order #6

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,
},

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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