Absolute layout for inner views doesn't work

I need to have backdrop background for some modal views - i.e. inner view overlaps parent using ‘absolute’ position and full-screen dimensions. It worked well with ReactNative 0.6.0, but now doesn’t - it just fills parent view. Here is example - instead of full black screen you will see just 200x100 black area.

How to achieve this goal with new version? Maybe i’ve missed some breaking changes for 0.8.0…

       <View style={{flex:1,alignItems: 'center',justifyContent: 'center'}}>
         <Text>Hello world!</Text>
          <View style={{width:200,height:100,backgroundColor:'red'}}>
            <View style={{position:'absolute',top:0,left:0,bottom:0,right:0, backgroundColor:'black'}}/>
          </View>
       </View>

[ide]

Also I recommend that you use a top-level Navigator instead of Modal. Modal was designed for use in hybrid applications where you have a React Native view embedded in a UINavigationController, and want the React Native code to present a screen on top of the UINavigationController.

With pure React Native, you can simply use a top-level Navigator (wrap your entire app in a scene of this top-level Navigator) and present a modal screen by pushing a scene onto the top-level Navigator’s scene stack with the FloatFromBottom config.

tl;dr: If you are writing a React Native app whose root view is an RCTRootView, do not use Modal. Instead, use Navigator with the “FloatFromBottom” scene config.

[aksonov]

Could you clarify? How to use truly modularized “react” approach with current react-native layout behavior? I want to have “modal” component which could be used from other component. This way i can’t put it to ‘top-view’ as suggested above, it brokes idea of components.