I want to build a box with a list of elements using react native. I want the box to grow as more elements are added and once the box is a tall as the device screen the contents of the box bee scrollable. That way I can have a header and footer always on screen.
In other words, I want a container to fit it's contents and if there is more content than will fit on the screen, I want the container to be scrollable.
Is that possible?
Here is a rnplay:
This is what I want to happen with more items than will fit on the screen:
This is what I DO want to happen with only a few items:
This is what I DO NOT want to happen with only a few items:
Here's the code I'm using in this example, You can change rowCount to increase the 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;
I want to build a box with a list of elements using react native. I want the box to grow as more elements are added and once the box is a tall as the device screen the contents of the box bee scrollable. That way I can have a header and footer always on screen.
In other words, I want a container to fit it's contents and if there is more content than will fit on the screen, I want the container to be scrollable.
Is that possible?
Here is a rnplay: https://rnplay/apps/KrOk6w
This is what I want to happen with more items than will fit on the screen:
This is what I DO want to happen with only a few items:
This is what I DO NOT want to happen with only a few items:
Here's the code I'm using in this example, You can change rowCount to increase the 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;
- 2 Possible duplicate of Is it possible to keep a Scrollview scrolled to the bottom? – Tjorriemorrie Commented Oct 12, 2015 at 10:57
- Thanks for the ment @Tjorriemorrie but that user is wanting the scrollview to scroll to the bottom as content is added. That's not what I want. I want the container to fit it's contents and if there is more content than will fit on the screen, I want the container to be scrollable. – Dev01 Commented Oct 12, 2015 at 15:08
- probably you should add a fiddle / plunker to reproduce the problem / show what you tried – smnbbrv Commented Oct 17, 2015 at 17:39
3 Answers
Reset to default 1set a property to the container view of: justify-content: flex-start
Use flexGrow: 0, otherwise the ScrollView will take all the height available even when there is no content.
You should keep content by using props. assume that 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.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>,<Text style={styles.wele}>Text 1</Text>,
<Text style={styles.wele}>Text 2</Text>];
return(
<Test content={content}/>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
wele: {
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',
},
wele: {
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: