I have the following code which is returned in a render function in my react-native app. container have its flex property set to 1.
Even when the content is overflowing the scroll is not working. What am I doing wrong?
Also tried setting flex for ScrollView to 1. Still not working.
<View style={globalStyle.container}>
{flashMessage}
<ScrollView>
<View style={globalStyle.header}>
<Text style={globalStyle.title}> {localization.categories} </Text>
</View>
<ListView style={{marginTop: 10}}
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID)=> this.renderRow(rowData, sectionID, rowID)}
/>
</ScrollView>
<View style={{position: 'absolute', height: 70, left: 0, right: 0, bottom: 0, flexDirection:'row', justifyContent:'center'}}>
<TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('home'); }} >
<View>
<Image style={globalStyle.footerIcons} source={require('./Thumbnails/ -button-selected.png')}/>
<Text style={globalStyle.footerText,globalStyle.selected} > {localization.meditate} </Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('profile');}} >
<View>
<Image style={globalStyle.footerIcons} source={require('./Thumbnails/user.png')} />
<Text style={globalStyle.footerText} > {localization.me} </Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('settings');}}>
<View>
<Image style={globalStyle.footerIcons} source={require('./Thumbnails/settings.png')} />
<Text style={globalStyle.footerText} > {localization.settings} </Text>
</View>
</TouchableHighlight>
</View>
</View>
I believe you shouldn't use ListView inside ScrollView.
You can use renderHeader function and put there
your header:
<View style={globalStyle.header}>
<Text style={globalStyle.title}> {localization.categories} </Text>
</View>
Related
I'm currently making a registration form using React Native. When I implement into the application, a scroll bar doesn't work.
return (
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}>
<View style={styles.container}>
<ScrollView>
<View style={styles.formContainer}>
<View style={styles.registerTextContainer}>
{/* <Text style={styles.registerText}>Register for an account</Text> */}
</View>
<Form type={User} ref={c => (this._form = c)} options={options} />
<TouchableOpacity
style={styles.registerButtonContainer}
onPress={this.handleSubmit}>
<Text style={styles.registerButtonText}>REGISTER</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
</TouchableWithoutFeedback>
);
}
This is how the application currently looks
Trying wrapping the whole page with ScrollView instead of TouchableWithoutFeedback and set flex to 1
return (
<ScrollView style={{ flex: 1 }}>
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.container}>
<View style={styles.formContainer}>
<View style={styles.registerTextContainer}>
{/* <Text style={styles.registerText}>Register for an account</Text> */}
</View>
<Form type={User} ref={(c) => (this._form = c)} options={options} />
<TouchableOpacity
style={styles.registerButtonContainer}
onPress={this.handleSubmit}
>
<Text style={styles.registerButtonText}>REGISTER</Text>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
</ScrollView>
);
Don't set flex:1 in scroll view, instead try
<ScrollView contentContainerStyle={{ flexGrow: 1}}>
so im generating a pdf using some data and rendering the pdf with the PDFViewer, but im generating more than 10 pages and i want to show a loading state before the document generated, i cannot find anything related to loading state, im I missing something ??? here is my component
<PDFViewer width={1000} height={1000}>
<Document>
{products &&
chunks.map((ele, i) => {
return (
<Page size="A4" style={styles.page}>
<View style={styles.container}>
<View style={styles.head}>
<View style={styles.head1}>
<Text style={styles.title}>Pharmacie Salim</Text>
<View style={styles.headCard}>
<Image
style={styles.image}
src={require("../assets/phone-icon.png").default}
/>
<Text style={styles.cardText}>05 30 50 05 00</Text>
</View>
<View style={styles.headCard}>
<Image
style={styles.image}
src={require("../assets/email-icon.png").default}
/>
<Text style={styles.cardText}>demointern#sobrus.com</Text>
</View>
<View style={styles.headCard}>
<Image
style={styles.image}
src={require("../assets/gps-icon.png").default}
/>
<Text style={styles.cardText}>Villa No 222, Rue Tetouan</Text>
</View>
</View>
<View style={styles.head2}>
<Text style={styles.type}>
Chiffre d'affaires par famille tarifaire (Catégorie et TVA)
</Text>
<View style={styles.head2Cards}>
<View style={styles.headCard}>
<Image
style={styles.image2}
src={require("../assets/timer-icon.png").default}
/>
<View style={styles.cardInfo}>
<Text style={styles.cardTextHead}>Période</Text>
<Text style={styles.cardTextBody}>
De 2021-03-02 à 2021-04-05
</Text>
</View>
</View>
<View style={styles.headCard}>
<Image
style={styles.image2}
src={require("../assets/printer-icon.png").default}
/>
<View style={styles.cardInfo}>
<Text style={styles.cardTextHead}>Imprimé le</Text>
<Text style={styles.cardTextBody}>2021-03-02</Text>
</View>
</View>
</View>
</View>
</View>
<View style={styles.table}>
<View style={styles.rowHeader}>
<View style={styles.colFirst}>
<Text style={styles.th}>Période</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>No de transaction</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Client</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Total avant remise</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Remise</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Total</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Non payé</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Gestionnaire</Text>
</View>
</View>
{ele.map((prod) => (
<View style={styles.row}>
<View style={styles.colFirst}>
<Text style={styles.th}>{prod.name}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>{prod.purchase_price}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>{prod.salePrice}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>{prod.supplier?.name}</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Remise</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Total</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Non payé</Text>
</View>
<View style={styles.col}>
<Text style={styles.th}>Gestionnaire</Text>
</View>
</View>
))}
</View>
</View>
</Page>
);
})}
</Document>
</PDFViewer>
so how can i show a loader before the document finish rendering ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div style={{position:"relative"}}>
<div style={{margin: "auto",fontSize:"2rem", color:"#000",width:"100%",height:"70vh",display:"flex",justifyContent:"center",alignItems:"center"}}>Your loading message...</div>
<PDFViewer showToolbar={false} style={{width:"100%",height:"100%",height:"70vh",border:"none",backgroundColor:"transparent",position:"absolute",left:"0",top:"0"}} >
//Your content
</PDFViewer>
</div>
This is normal Screen :
This is abnormal Screen :
The property borderRadius affect backgroundColor , I really don't know what the problem is.
Please help me solve this problem.
This is my components Panel.js
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#ffffff',
margin:$F.scale(10),
// borderRadius:$F.scale(3),
paddingLeft:$F.scale(8),
paddingRight:$F.scale(8),
},
contTitle:{
flexDirection:'row',
paddingTop:$F.scale(10),
paddingBottom:$F.scale(10),
marginBottom:$F.scale(10),
alignItems:'center',
borderBottomWidth:$F.compatiblePixel*1,
borderBottomColor:'#DFDFDF',
},
cont:{
flex:1,
paddingBottom:$F.scale(10),
},
rightHeader:{
flex:1,
flexDirection:"row",
justifyContent:'flex-end',
// backgroundColor:"#444444",
}
});
<View style={styles.container}>
<View style={styles.contTitle}>
<Text style={{fontSize:$F.scale(13),color:"#000000",flex:1}}>{this.state.titleCont}</Text>
<SelectOption
options={this.state.selOptions}
onSelectOptions={this._ChooseList.bind(this)}
selectShow={this.props.rightHeader?false:this.props.selectShow}
/>
<View style={[{display:this.props.rightHeader?"flex":"none"},styles.rightHeader]}>
{
this.props.rightHeader
}
</View>
</View>
<View style={styles.cont} >
{this.props.children}
</View>
</View>
I use in learnning.js
<ScrollView style={[this.props.style,styles.container]}>
<Panel titleCont="学习轨迹" selectShow={false}>
<View style={styles.progressItems}>
<View style={styles.Line}></View>
<View style={styles.progressBox}>
{this.state.learningData.map((v,i)=>{
return (
<ProcessBox key={v.id}>
<TouchableHighlight underlayColor="rgba(0,0,0,0)" activeOpacity={1} onPress={()=>{this._getClassifyId(v.secondClassifyId,v.id)}}>
<View style={styles.learnLesson}>
<View style={styles.lessonImg} >
<Image source={{uri:IMGHEADURL+v.cover}} style={styles.Image}/>
</View>
<View style={styles.lessonMsg}>
<Text style={{fontSize:$F.scale(7.7),color:"#4A4A4A"}}>{v.name}</Text>
<Text style={{fontSize:$F.scale(6),color:"#BBBBBB",marginBottom:$F.scale(5.5)}}>{formatTime(v.hasStudy?v.study_time:v.create_time,"full")}</Text>
<View style={styles.lessonStatus}>
<View style={[styles.statusItems,styles.status1]}>
<Text style={{fontSize:$F.scale(6.1),color:"#E5E0D0"}}>{v.hasStudy?"练习中":"未练习"}</Text>
</View>
<View style={[styles.statusItems,styles.status2]}>
<Text style={{fontSize:$F.scale(6.1)}}>{v.firstClassifyName}</Text>
</View>
<View style={[styles.statusItems,styles.status2]}>
<Text style={{fontSize:$F.scale(6.1)}}>{v.secondClassifyName}</Text>
</View>
<View style={styles.shareBtn}>
<ICON name="uniE917" size={$F.scale(8.8)} color="#C8C8C8" />
</View>
</View>
</View>
</View>
</TouchableHighlight>
</ProcessBox>
)
})}
</View>
</View>
</Panel>
</ScrollView>
The number of cycles is within ten, the style is good, and more than ten the backgroundColor is transeparents.
I have the following horizontal scrollView and I would like to scroll to X position.
<ScrollView horizontal={true} ref={ref => this.scrollView = ref} showsHorizontalScrollIndicator={false}>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month1"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth1?'#000':'#9B9B9B'}]}>{I18n.t("month1")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth1?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month2"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth2?'#000':'#9B9B9B'}]}>{I18n.t("month2")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth2?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month3"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth3?'#000':'#9B9B9B'}]}>{I18n.t("month3")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth3?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month4"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth4?'#000':'#9B9B9B'}]}>{I18n.t("month4")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth4?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month5"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth5?'#000':'#9B9B9B'}]}>{I18n.t("month5")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth5?100:0} ]}/>
</View>
</TouchableOpacity>
</ScrollView>
I used scrollTo in the ComponentDidMount() but it did't work and the scrollView dose't come up with the moved position. Here is the code:
componentDidMount=()=>{
this.scrollView.scrollTo({ X:0, Y:100 });
}
Can you help me to solve the problem?
Scrolling to a position can be achieved by using the scrollTo({x: 0, y: 0, animated: true}) method.
Just set a x: value for horizontal scrolling or y: value for vertical.
In your case it should be:
scrollTo({x: 100, y: 0, animated: true})
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>
);
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>