React Native View Wont Scroll - reactjs

Question

in my app i cant scroll my view.i have my Texts and buttons bottoms of the screen but i cant scroll my view.is react native doesn't give any default scrolling effect?
render() {
if(this.viewCaseData === true){
var caseList = <View >
<ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}></ListView>
</View>
}else{
var caseList = <ScrollView ref='scrollView' contentContainerStyle={{flex:1}} style={{
marginLeft: 10,
marginRight: 10,
flex:1
}}>
<View>
<View style={{
marginBottom: 10,
flexDirection: 'column'
}}>
<View>
<TextField
label={'Search'}
highlightColor={'#DA4336'}
duration={10}
labelColor={'black'}
borderColor = {'#DA4336'}
onChangeText={(text) => this.setState({searchText: text})}
value = {this.state.searchText}
dense={true}
/>
</View>
<View >
<TouchableOpacity
onPress={this.loadCustomerData.bind(this)}
style={{
marginLeft: 320,
height: 30,
width: 30,
backgroundColor: '#DA4336'
}}>
<Text style={{
color: '#fff'
}}>Search</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Category</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Category Type</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Code Type</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Code</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>BranchLocation</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Title</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Full Name</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Initials</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Lastname</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Preferred Name</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>DateOf Birth</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Gender</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Mother Maiden Name</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Nationality</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Religon</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Marital Status</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Preferred Language</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Mobile01</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Mobile02</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Email</Text>
<Text style={styles.textDetail}>value</Text>
</View>
</View>
</ScrollView>
}
return (
<View style={{flex:1}}>
<View style={styles.headerView}>
<View >
<View style={styles.circle}>
<Text style={{
fontSize: 40,
fontWeight: 'bold',
color: '#fff',
marginLeft: 18
}}>A</Text>
</View>
<Text style={{
fontSize: 18,
color: '#fff',
marginLeft: 15,
marginTop: 5,
marginBottom: 20
}}>User Name</Text>
</View>
<View style={styles.headerButtonMain}>
<View style={styles.headerButton}>
<TouchableOpacity style={{
marginRight: 25
}}
onPress={this.loadListData.bind(this)}
>
<Image style={styles.button} source={require('./img/imgCase.png')}/>
</TouchableOpacity>
<TouchableOpacity style={{
marginRight: 25
}}
onPress={this.openCaseView.bind(this)}
>
<Image style={styles.button} source={require('./img/imgCall.png')}/>
</TouchableOpacity>
<TouchableOpacity style={{
marginRight: 25
}}
//onPress={this._onPressButton}
>
<Image style={styles.button} source={require('./img/imgCase.png')}/>
</TouchableOpacity>
</View>
<Text style={{
fontSize: 18,
color: '#fff',
marginLeft: 15,
marginTop: 38,
marginBottom: 20
}}>My Cases</Text>
</View>
</View>
<View>
{caseList}
</View>
<View>
<ColoredFab>
<Image pointerEvents="none" source={require('./img/plus_white.png')}/>
</ColoredFab>
</View>
</View>
);

Answer 1

Adding ScrollView as my main view Solve My problem
var _scrollView: ScrollView;
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => { console.log('onScroll!'); }}
scrollEventThrottle={200}
style={{height: 300}}>
.....
</ScrollView>