Transparent background for around Modal 0.10.0rc

[levic92]

I have tried to create a Modal that only takes up part of the screen (on iPad) the problem is that I want the surrounding area to have a transparent background. What I did was wrap the Modal component with a View and applied a background color to the style of that view, this seems to successfully pass down the background color to the area surrounding the modal container. So i tried applying a transparent background to that view and during the animation it is transparent but once the animation stops the area surrounding the modal is black. Is there any way to achieve this behavior?

<View  style={styles.wrapper}>
  <Modal animated={true} ... >
    <View style={styles.container}>
      <Text>Modal content....</Text>
    </View>
  </Modal>
</View>

var styles = StyleSheet.create({
  wrapper: {
    backgroundColor: "transparent",
  },
  container: {
    alignItems: 'center',
    backgroundColor: '#f5fcff',
    flex: 1,
    justifyContent: 'center',
    marginVerical: 100,
    marginHorizontal: 100,
  },
});

[browniefed]

This is solved here but has not yet been synced. https://github.com/nicklockwood/react-native/commit/0f149339487ae68cd740f6295cc94a04ff8cf2f5

[ide]

Should be synced now and published with 0.11-rc.

[y2k-shubham]

See my answer at aksonov/react-native-router-flux#749

I achieved this by the combination of following:

• in your render method where you are rendering Modal, pass a prop transparent={true}
• add a single View child to your modal (put all other things inside this View) and apply style to it with backgroundColor = 'rgba(r, g, b, a)' as described above