Search code examples
javascriptreact-nativereact-native-flexbox

In React Native, how do I position and slide an element thats bigger than screen view?

In the diagram below, each panel is the be the size of the screen and they are to slide very quickly left and right as one large element. If the slide transition is problematic its okay for time = 0 so it's instantaneous.

The contents of each panel are to stay mounted while off screen because there is a webview in the children and I want to prevent the webpage reloading (which would happen if the panel remounts). How do I do this? (edit: without a plugin or off the shelf navigation system)

explanation

Solution

  • Here's how you can do it with CSS and HTML, you can probably convert it to work with React Native.

    <html>
<header>
  <style>
  #body{
    display: flex;
    justify-content: center;
    width: 200vw;
  }
  #inner{
    width: 100%;
    height: 100%;
    display: flex;
    background: #de9999;
    align-items: center;
  }
  #body #body-left{
    flex: 1 0 50%;
    height: 100%;
    background: green;
  }
  #body #body-right{
    flex: 1 0 50%;
    height: 100%;
    background: lightgrey;
  }
</style>
</header>
<body>
  <div id="body">
    <div id="inner">
      <div id="body-left"></div>
      <div id="body-right"></div>
    </div>
  </div>
</body>
</html>