Scroll View

index.html

<div id="root"></div>

script.babel

// Example of scroll view adapted to be shown on web, with sanme expected behavior 

class App extends React.Component {
  render() {
    return (
      <div style={{ borderWidth: 2, borderColor: 'black', ...styles.root }}>
        <Header headerText="ScrollView Example" />
        <div style={styles.scrollView}>
          {Array.from({ length: 10 }).map((_, index) => (
            <div key={index} style={styles.item}>
              <p>Item {index + 1}</p>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

const Header = (props) => (
  <div style={{ ...styles.header, borderWidth: 2, borderColor: 'red', borderRadius: 5 }}>
    <p style={{ color: '#fff' }}>{props.headerText}</p>
  </div>
);

// General styles addind flex to scroll view
const styles = {
  root: {
    width: '360px',
    height: '640px',
    backgroundColor: 'blue',
    display: 'flex',
    flexDirection: 'column',
    padding: '8px',
  },
  header: {
    backgroundColor: '#545353',
    alignItems: 'center',
    justifyContent: 'center',
    height: '44px',
    color: '#fff',
    display: 'flex',
    flexDirection: 'column',
    padding: '8px',
  },
  scrollView: {
    flex: 1,
    width: '100%',
    overflowY: 'scroll',
  },
  contentContainer: {
    alignItems: 'center',
    paddingBottom: 0,
  },
  item: {
    backgroundColor: 'white',
    padding: '20px',
    marginVertical: '10px',
    width: '90%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '5px',
    marginBottom: '10px',
    
  },
};

// Replace  ReactDOM.createRoot to work in  CodePen

const root = ReactDOM.createRoot(document.getElementById('root')); 
// render mode to validate that works in codepen
root.render(<App />);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-native-web/0.19.10/index.js"></script>

scroll-view.markdown

Scroll View

A Pen by John on CodePen.

License.

style.css

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}