Stack card style on web

[simonjoom]

Current Behavior

• What code are you running and what is happening?

The transition between 2 screen of a StackNavigator put the div to be absolute by default even when it's not animated.
Problem with the absolute the nice 'flex' flow broke
when the div are only in relative mode in the css the flex is well propagated and as well the inheritance of background color

Maybe the behaviour became from react-native-web implementation by default... i don't know but i think it will be more appropriate to force the position in relative when we have no transition

This provide some issues in our style ui.
A simple test to check if the transition is running or not will be great .

So I did this working hack in StackViewLayout

  _renderCard = scene => {
    const { screenInterpolator } = this._getTransitionConfig();

    const style = screenInterpolator && screenInterpolator({ ...this.props.transitionProps, scene });
    // If this screen has "header" set to `null` in it's navigation options, but
    // it exists in a stack with headerMode float, add a negative margin to
    // compensate for the hidden header
    const { options } = scene.descriptor;
    const hasHeader = options.header !== null;
    const headerMode = this._getHeaderMode();
    let marginTop = 0;
    if (!hasHeader && headerMode === 'float') {
      marginTop = -this.state.floatingHeaderHeight;
    }
///  >>>  
var test=scene.isActive&&this.oldkey!==scene.key;
 this.oldkey=scene.key

///  >>>  
    return <Card {...this.props.transitionProps} key={`card_${scene.key}`} style={[style, { marginTop }, this.props.cardStyle,{
///  >>>  
position:test?"absolute":"relative"
///  >>>  
}]} scene={scene}>
        {this._renderInnerScene(scene)}
      </Card>;
  };
}

• Include a screenshot if it makes sense.

see the difference between before and after. This hack put absolute only when the transition occur.

screenshot1

screenshot2

Expected Behavior

• What do you expect should be happening?
• Include a screenshot if it makes sense.

How to reproduce

• You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation.
• Either re-create the bug on Snack or link to a GitHub repository with code that reproduces the bug.
• Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.

Your Environment

software	version
react-navigation	latest
react-native	0,56 with react-native-web
node
npm or yarn

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.