Z-order

[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 ( <Container > <Header>

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