To create a view that grows with content, and when it reaches the height of the screen, it starts to scroll using the native reaction?

Question

I want to build a box with a list of items using a responsive native. I want the window to enlarge as additional elements are added, and when it becomes high, when on the device screen the contents of the window become scrollable. This way I can always have a header and footer on the screen.

In other words, I want the container to match its contents, and if there is more content on the screen than fits, I want the container to scroll.

Is it possible?

Here is a game that can be played: https://rnplay.org/apps/KrOk6w

Here is what I want to do with more elements than fit on the screen:

This is what I want to do with just a few points:

This is what I DO NOT want to happen with just a few points:

Here is the code that I use in this example. You can change rowCount to increase the number of rows.

 var React = require('react-native'); var { View, Text, StyleSheet, ScrollView, } = React; var styles = StyleSheet.create({ container: { flex: 1, padding: 20, flexDirection: 'column', backgroundColor: "blue", }, contentContainer: { }, headerContainer: { padding: 20, backgroundColor: "#EEE", }, footerContainer: { padding: 20, backgroundColor: "#EEE", }, rowContainer: { borderTopWidth: 1, borderColor: "#EEE", padding: 30, backgroundColor: "red", }, }); class Test extends React.Component { render() { var rowCount = 20; var rows = []; for(i = 0; i < rowCount; i++) { rows.push(<View style={styles.rowContainer}> <Text> {"Some text"} </Text> </View>); } return ( <View style={styles.container}> <View style={styles.headerContainer}> <Text> {"Header text"} </Text> </View> <ScrollView contentContainerStyle={styles.contentContainer}> {rows} </ScrollView> <View style={styles.footerContainer}> <Text> {"Footer text"} </Text> </View> </View> ); } }; module.exports = Test; 

Answer 1

set property for container view: justify-content: flex-start

Answer 2

You must save the content using the details. Suppose there are two files, index.ios.js and test.js

index.ios.js :

 'use strict'; var React = require('react-native'); var Test = require('./test'); var { AppRegistry, StyleSheet, Text, TouchableHighlight, View, } = React; class PNTest extends React.Component{ constructor(props){ super(props) } render(){ var content = [<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>,<Text style={styles.welcome}>Text 1</Text>, <Text style={styles.welcome}>Text 2</Text>]; return( <Test content={content}/> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, buttonContainer: { backgroundColor: 'blue', padding: 10, margin: 10, }, button: { textAlign: 'center', color: 'white', fontSize: 20, }, }); AppRegistry.registerComponent('PNTest', () => PNTest); 

test.js :

 'use strict'; var React = require('react-native'); var { StyleSheet, Text, TouchableHighlight, View, ScrollView } = React; class Test extends React.Component{ constructor(props){ super(props) var _content = (<ScrollView automaticallyAdjustContentInsets={false} horizontal={false} style={styles.scrollView}> <View style={styles.container}> {this.props.content} </View> </ScrollView>); this.state = { content: _content } } render(){ return( this.state.content ); } } var styles = StyleSheet.create({ container: { margin: 30, flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10 }, buttonContainer: { backgroundColor: 'blue', padding: 10, margin: 10, }, button: { textAlign: 'center', color: 'white', fontSize: 20, }, scrollView: { backgroundColor: '#6A85B1', height: 300, }, }); module.exports = Test; 

screenshots:

top:

bottom:

Answer 3

Use flexGrow: 0 , otherwise ScrollView will accept all available height, even if there is no content.