Use transparent fragment by default

On my react native App, I have a section that have look like this:

When you go to the next page, the blue image background remains fixed while the page go over.

We achieved this by doing something like that:

const ChapterWrapper = createStackNavigator(
  {
    "A": {
      screen: Question,
    },
    "B": {
      screen: Question,
    },
  },
  {
    cardStyle: {
      backgroundColor: 'transparent',
    },
    transitionConfig: () => ({
      // some custom animation, simplified because not impacting the issue
      containerStyle: {
        backgroundColor: 'transparent',
      },
    }),
  }
);

class QuestionsWrapper extends Component<
  IProps & IProfileCaptureContainerProps
> {
  public render() {
    return (
      <Fragment>
        <BackgroundContainer>
          <BackgroundImage chapter={this.getBackgroundChapterImage()} />
        </BackgroundContainer>
        <PageContainer>
          <ChapterWrapper navigation={this.props.navigation} />
        </PageContainer>
      </Fragment>
    );
  }
  private getBackgroundChapterImage = () => {
    const chapterLabel = this.props.navigation.getParam('chapterLabel');
  };
}

When installing react-native screen the Screen container have the default light grey android background that looks like this:

The explanation is that there is then this view hierarchie:

in this image, the background (in green) is between the first and the second view container (red). Since the background of them are not transparent (they have android default), the image is not shown. (my hypothesis, maybe I’m completely wrong).

I fixed this using patch package:

patch-package
--- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.java
+++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/Screen.java
@@ -2,6 +2,7 @@ package com.swmansion.rnscreens;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.graphics.Color;
 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
@@ -29,6 +30,7 @@ public class Screen extends ViewGroup {
     public View onCreateView(LayoutInflater inflater,
                              @Nullable ViewGroup container,
                              @Nullable Bundle savedInstanceState) {
+      mScreenView.setBackgroundColor(Color.TRANSPARENT);
       return mScreenView;
     }
   }

I’m happy to contribute to this repo but I will first discuss the solution

• are transparent fragment hacky ?
• should it be configurable somehow ?

[kmagiera]

I think you’ll have to do it here -> https://github.com/kmagiera/react-native-screens/blob/master/src/screens.native.js#L65

This could actually be the root cause, we seem to only pass styles to the wrapped Animated.View there and so the background isn’t set on the AnimatedNativeScreen component.

If you are on RN 0.57 you could try removing the whole wrapping bit and just do:

return <AnimatedNativeScreen {...this.props} />;

The whole wrapping code is workaround for one issue in react-native core that’s been fixed in 0.57 already with this change https://github.com/facebook/react-native/commit/75505993f0523ebf5f1ad68ee30e91e6879b28a3

[tychota]

(note, by default in iOS, it works, probably because the présentation mode is UIModalPresentationOverCurrentContext)