React Native - ScrollView not scrolling - reactjs

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}}>

Related

#react-pdf/renderer how to check the loading state of the document?

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>

Shadow doesn't overflow when using React Native FlatList. It's works without FlatList

Image
https://ibb.co/vJM305f
I am using FlatList to display a horizontal list. Each item has a showdow, which overflows over other items. It works without FlatList. But unfortunality not with FlatList.
I have attached a image above. Its shows a shadow line which is the issue.
Instead is should look like the below image.
https://ibb.co/6NWtcTK
<FlatList
data={[1, 1, 1]}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{padding: RFPercentage(2)}}
renderItem={() => {
return (
<Card style={[infoCardStyle, styles.infoCard]}>
<View style={{flex: 1}}>
<View style={styles.header}>
<View style={{flex: 0.1}}>
<Icon
name={'lightbulb-on-outline'}
size={RFValue(20)}
color="#fff"
/>
</View>
<View style={{flex: 0.9}}>
<Title style={styles.didYouKnow}>Did you know?</Title>
</View>
</View>
<View style={styles.description}>
<View style={{flex: 0.1}} />
<View style={{flex: 0.9}}>
<Text style={styles.descriptionText}>
Your can watch your game clip play by{'\n'}play in REPS
application
</Text>
</View>
</View>
</View>
<View style={styles.trailingText}>
<Text style={styles.getAppNow}>Get the app now...</Text>
</View>
</Card>
);
}}
keyExtractor={item => item.id}
/>

Cannot access the state but i see it on debbugger

I have function to fetch my data, and i do setState to put my data inside my state.
But i dont understand how to use it in my render()
getFixture = async () => {
const url = 'http://127.0.0.1:80/testmatch/get_fixture.php';
fetch(url).then((reponse) => reponse.json())
.then((reponseJson) => {
this.setState({
data:reponseJson,
isLoading:false
})
})
}
componentDidMount(){
this.getFixture()
}
if i do a console.log(this.state.data); in my render is show me this in the console (in image join)
if i do console.log(this.state.data.elapsed); is working and i get the value but if i do console.log(this.state.data.awayTeam.logo); i get Cannot read property 'logo'
I dont understand why.
Screenshot
Here is all the code, that i want is to use all datas from my data State to my render :
getFixture = async () => {
const url = 'http://127.0.0.1:80/testmatch/get_fixture.php';
fetch(url).then((reponse) => reponse.json())
.then((reponseJson) => {
this.setState({
data:reponseJson,
isLoading:false
})
console.log(this.state.data.awayTeam.logo); // WORKING (SHOW ME THE LINK)
})
}
render() {
console.log(this.state.data.awayTeam.logo); // NOT WORKING (CANNOT READ PROPERTY OF UNDEFINED)
return (
<View style={styles.container}>
<View style={styles.containerScore}>
<View style={{flex: 1, flexDirection: 'row', borderColor:'#171F33',borderBottomWidth: 1 }}>
<View style={{flex: 1,paddingTop:7,paddingBottom:7}}>
<View style={{flex: 1}}>
<Image style={{width: 50, height: 50}} source={{uri: "toto"}} />
</View>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, backgroundColor:'#fff'}}>
<Text style={{fontSize:13}}> {this.state.data.elapsed}</Text>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, marginLeft:2, backgroundColor:'#000'}}>
<Text style={{fontSize:13}}></Text>
</View>
</View>
<Text style={{color:"#FFF"}}>{} </Text>
</View>
<View style={styles.containerInfo}>
<ScrollableTabView style={{marginTop: 1}} initialPage={0} renderTabBar={() => <CustomTabBar/>} >
<View tabLabel='Tab #1'>
<Text>My</Text>
</View>
<View tabLabel='Tab #2'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #3'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #4'>
<Text>favorite</Text>
</View>
</ScrollableTabView>
</View>
</View>
);
}
}

In the initial render, the this.state.data is not yet set, so if you try to access it without null checking it will give you an error.
In your jsx, you can check if this.state.data is falsy and if it is falsy return immediately like this:
render() {
if (!this.state.data) {
return (<View><Text>Loading...</Text></View>);
}
console.log(this.state.data.awayTeam.logo);
return (
<View style={styles.container}>
<View style={styles.containerScore}>
<View style={{flex: 1, flexDirection: 'row', borderColor:'#171F33',borderBottomWidth: 1 }}>
<View style={{flex: 1,paddingTop:7,paddingBottom:7}}>
<View style={{flex: 1}}>
<Image style={{width: 50, height: 50}} source={{uri: "toto"}} />
</View>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, backgroundColor:'#fff'}}>
<Text style={{fontSize:13}}> {this.state.data.elapsed}</Text>
</View>
<View style={{flex: 1,paddingTop:7,paddingBottom:7, marginLeft:2, backgroundColor:'#000'}}>
<Text style={{fontSize:13}}></Text>
</View>
</View>
<Text style={{color:"#FFF"}}>{} </Text>
</View>
<View style={styles.containerInfo}>
<ScrollableTabView style={{marginTop: 1}} initialPage={0} renderTabBar={() => <CustomTabBar/>} >
<View tabLabel='Tab #1'>
<Text>My</Text>
</View>
<View tabLabel='Tab #2'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #3'>
<Text>favorite</Text>
</View>
<View tabLabel='Tab #4'>
<Text>favorite</Text>
</View>
</ScrollableTabView>
</View>
</View>
)
}
A simple demo in codesandbox

Try to log in the setState callback like this
this.setState({
data:reponseJson,
isLoading:false
}, () => {
console.log(this.state.data.awayTeam.logo)
})

react-native's borderRadius makes backgroundColor transparent

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.

React native scroll view no scrolling

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>

Resources