i'm using ScrollView for my react native project and my scrollView is scrolling up whenever i update something in its children and i really don't want that can you please help me guys.
1 Answers
this is my code:
<ScrollView >
<View style={styles.containerParent} >
<Text style={styles.textHorodatage} >Services</Text>
<View style={styles.touchable} >
<Block>
<View>
<FontAwesome name="paint-brush" size={22} color={Couleurs.PrimaryHomme} style={{ alignSelf: 'center', marginVertical: 5 }} />
<FlatList
showsVerticalScrollIndicator={false}
scrollEnabled={false}
contentContainerStyle={{
marginHorizontal: 10,
}}
refreshing={isFetching}
data={
// route.params==undefined?
ChoixService
// :route.params[1].details
}
renderItem={(item) => {
return <CartePanier item={item.item} />;
}}
/>
<View style={{ justifyContent: 'space-evenly', flexDirection: 'row' }} >
<View>
<Text style={{ alignSelf: 'center', fontFamily: 'poppins-bold', color: Couleurs.PrimaryFemme, marginBottom: -10, fontSize: 15 }} >Estimation durée:</Text>
<Text style={styles.text} >{toHoursAndMinutes(TotalEstimation)}</Text>
</View>
<View>
<Text style={{ alignSelf: 'center', fontFamily: 'poppins-bold', color: Couleurs.PrimaryFemme, marginBottom: -10, fontSize: 15 }} >Total:</Text>
<Text style={styles.text} >{
// route.params != undefined ? PrixTotalParams :
PrixTotal}Ar
</Text>
</View>
</View>
<LinearGradient
colors={[Couleurs.PrimaryHomme, "#F0FFFF"]}
start={{ x: 0, y: 1 }}
end={{ x: 0, y: 0 }}
locations={[0.4, 1]}
style={styles.gradient}>
<Button icon={() => <Ionicons name={route.params == undefined ? "add-circle" : "pencil-sharp"} size={25} color={Couleurs.Blanc} style={{ right: -4 }} />}
onPress={() => setopenService(!openService)} mode='contained' color='transparent' labelStyle={styles.labelStyle} style={styles.buttonHorodatage} >
{route.params == undefined ? "Ajouter" : "Modifier"}
</Button>
</LinearGradient>
</View>
</Block>
</View>
{
openService &&
<>
<Carousel
data={categories}
renderItem={CarteCategory}
sliderWidth={SLIDER_WIDTH / 1.05}
itemWidth={150}
loop={true}
layout={"default"}
firstItem={indexUseProth}
containerCustomStyle={{ marginVertical: 5, left: 1.3 }}
/>
</>
}
</View>
<View>
</View>
<View style={styles.containerParent} >
<Text style={styles.textHorodatage} > Horodatage du rendez-vous </Text>
<View style={styles.containerHorodatage}>
<TouchableOpacity onPress={() => setOpenDate(true)} style={styles.touchable} >
<FontAwesome5 name="calendar-day" size={20} color={Couleurs.PrimaryHomme} style={{ alignSelf: 'center' }} />
<Text style={styles.text}>
{getFormatedDate(date, "DD MMMM YYYY")}
</Text>
</TouchableOpacity>
{/* } */}
{openDate && <DatePicker
options={{
backgroundColor: Couleurs.Blanc,
textHeaderColor: Couleurs.PrimaryHomme,
textSecondaryColor: Couleurs.PrimaryFemme,
mainColor: Couleurs.PrimaryHomme,
defaultFont: 'montserrat-bold',
headerFont: 'montserrat-bold',
headerAnimationDistance: 50,
daysAnimationDistance: 300
}}
mode="calendar"
style={styles.datePicker}
selected={date}
onDateChange={HandleDate}
locale='fr'
/>}
<TouchableOpacity onPress={() => setopenTime(true)} style={styles.touchable} >
<MaterialCommunityIcons name="clock" size={25} color={Couleurs.PrimaryHomme} style={{ alignSelf: 'center' }} />
<Text style={styles.text}>
{time}
</Text>
</TouchableOpacity>
</View>
{
openTime
&&
<DatePicker
options={{
backgroundColor: Couleurs.Blanc,
textHeaderColor: '#FFA25B',
textDefaultColor: Couleurs.PrimaryFemme,
selectedTextColor: '#fff',
mainColor: Couleurs.PrimaryHomme,
textSecondaryColor: '#D6C7A1',
defaultFont: 'montserrat-bold',
headerFont: 'montserrat-bold',
}}
mode="time"
style={styles.datePicker}
minuteInterval={30}
onTimeChange={HandleTime}
/>}
</View>
<Toast config={toastConfig} />
<View style={styles.containerParent} >
<Text style={styles.textHorodatage} >Salon</Text>
<TouchableOpacity onPress={() => setOpenSalonCaroussel(!openSalonCaroussel)} style={styles.touchable} >
<MaterialCommunityIcons name="home-city" size={25} color={Couleurs.PrimaryHomme} style={{ alignSelf: 'center', marginVertical: 5 }} />
<Text style={styles.textSalon} >
{selectedSalon}
</Text>
</TouchableOpacity>
{openSalonCaroussel &&
<>
<Text style={styles.textHorodatage} >Glissez et Cliquez votre choix</Text>
<Carousel
data={salon}
renderItem={CarteSalon}
sliderWidth={SLIDER_WIDTH / 1.042}
itemWidth={170}
loop={true}
layout={"default"}
firstItem={indexUse}
autoplayDelay={2000}
autoplayInterval={9000}
onSnapToItem={(slideIndex: number) => {
setindexUse(slideIndex)
}
}
/>
</>
}
</View>
<View style={styles.containerParent} >
<Text style={styles.textHorodatage} >Esthéticien(ne)</Text>
<TouchableOpacity onPress={() => setopenProthCaroussel(true)} style={styles.touchable} >
<Ionicons name="ios-person-circle-sharp" size={35} color={Couleurs.PrimaryHomme} style={{ alignSelf: 'center' }} />
<CarteProthesiste item={selectionProth} style={{ alignSelf: 'center', top: -15 }} />
</TouchableOpacity>
{openProthCaroussel &&
<>
<Text style={styles.textHorodatage} >Glissez et Cliquez votre choix</Text>
<Carousel
data={prothesiste}
renderItem={CarteProthesiste}
sliderWidth={SLIDER_WIDTH / 1.042}
itemWidth={170}
layout={"default"}
firstItem={indexUseProth}
autoplayDelay={2000}
autoplayInterval={9000}
onSnapToItem={(slideIndex: number) => {
setindexUseProth(slideIndex)
}
}
/>
</>
}
</View>
<Text style={{ alignSelf: 'center', fontFamily: 'poppins-bold', color: Couleurs.PrimaryFemme, marginBottom: -10, fontSize: 15 }} >Total:</Text>
<Text style={styles.text} >{
// route.params != undefined ? PrixTotalParams :
PrixTotal}Ar
</Text>
<View style={{ flexDirection: 'row', alignSelf: 'center', justifyContent: 'space-evenly', width: '100%' }} >
<Button onPress={() => {
route.params == undefined
?
this.goBack()
:
SetShowAlert(true)
}} mode='contained' style={{ width: 150, borderColor: Couleurs.PrimaryHomme, borderWidth: 1, height: 40, top: 5, borderRadius: 12 }} color={Couleurs.Blanc} labelStyle={[styles.labelStyle, { color: Couleurs.PrimaryHomme }]} >
{route.params != undefined ? "Annuler" : "Retour"}
</Button>
<LinearGradient
colors={[Couleurs.PrimaryHomme, "#F0FFFF"]}
start={{ x: 0, y: 1 }}
end={{ x: 0, y: 0 }}
locations={[0.4, 1]}
style={styles.gradient2}>
<Button
// icon={()=> <FontAwesome5 name="check" size={23} color={Couleurs.Blanc} style={{alignSelf:'center'}}/>}
labelStyle={styles.labelStyle}
theme={{ animation: { scale: 2 } }}
onPress={() => {
!time || !date || !selectedSalon || selectionProth.length == 0 || ChoixService.length == 0
?
Toast.show({
type: 'info',
text1: 'Information incomplete',
text2: openDate || openProthCaroussel || openSalonCaroussel || openService || openTime ? 'completez votre selection' : `choisissez ${!date ? 'une date' : !time ? 'une heure' : !selectedSalon ? 'le salon' : selectionProth.length == 0 ? "l'éstheticien(ne)" : ChoixService.length == 0 ? 'le service' : null}`,
visibilityTime: 5000,
autoHide: true,
position: 'bottom',
bottomOffset: 130,
onPress: () => { Toast.hide() }
})
: route.params != undefined && TotalPrixParams < PrixTotal ?
SetShowAlert(true)
: route.params != undefined && TotalPrixParams == PrixTotal ?
[navigation.navigate('Réservations'), route.params = undefined] :
[ navigation.navigate('PayementGeneral'),,setDate(''), setTime(''), setSelectedSalon(''), setSelectionProth([]), viderCHoixService(), setOpenRDV(!openRVD)]
}}
mode='contained' color='transparent' style={{ width: '100%', borderRadius: 20 }} >
{route.params != undefined ? " Modifier " : " Réserver "}
</Button>
</LinearGradient>
</View>
{
route.params != undefined
?
<Button onPress={() => {
setshowAlertAnnulation(true)
}}
mode='contained' uppercase={false} style={{ width: 320, borderColor: Couleurs.PrimaryFemme, borderWidth: 1, height: 40, top: 5, borderRadius: 12, alignSelf: 'center', }} color={Couleurs.Blanc} labelStyle={[styles.labelStyle, { color: Couleurs.PrimaryFemme }]} >
Annuler le Rendez-vous
</Button>
:
null}
<View style={{ marginVertical: 100 }} />
</ScrollView>
Related