Closed Vasault closed 4 years ago
peacechen
commented
4 years ago Please post a Snack or code snippet that reproduces the behavior. You can also use the sample app in the example folder to place your code into to recreate it.
Guessing from your screenshots, are you changing the height of the container housing CalendarStrip? It may be trying to responsively resize its contents as the container shrinks.
Vasault
commented
4 years ago oh, truly sorry, i forgot to post the code, give me a min
Vasault
commented
4 years ago return (
<>
<StatusBar translucent backgroundColor="transparent" />
<Header
backgroundImage={Images.header_nav}
backgroundImageStyle={styles.HeaderImagen}
rightComponent={
<TouchableOpacity onPress={() => {Validation.CloseSesion(); this.props.navigation.navigate('Login')}}>
<Image source={Images.logout}/>
</TouchableOpacity>
}
centerComponent={{text: Constants.HeaderTitle, style: styles.HeaderHoursReport }}
placement='left'/>
<View style={styles.ContainerBackground}>
<CalendarStrip
calendarHeaderStyle={{
fontSize: rfv(18),
fontWeight: "normal",
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: "#707070",
paddingBottom: hp('4.5%')
}}
selectedDate={this.state.selectedDate}
onDateSelected={(date) => {
this.setState({ selectedDate: date });
}}
minDate={moment().subtract(3, 'days')}
maxDate={moment().add(3,'days')}
startingDate={moment().subtract(3, 'days')}
useIsoWeekday={false}
style={{paddingTop: hp('1.5%'), paddingBottom: hp('2.7%'), backgroundColor: '#ffffff'}}
highlightDateNameStyle={{color: '#1062cc'}}
highlightDateNumberStyle={{color: '#1062cc'}}
disabledDateNumberStyle={{color: '#f21927'}}
disabledDateNameStyle={{color: '#f21927'}}
customDatesStyles={this.customDatesStyle}
dateNameStyle={{color: '#c4c4c4'}}
dateNumberStyle={{color: '#c4c4c4'}}
disabledDateOpacity={1}
/>
<KeyboardAwareScrollView
contentInsetAdjustmentBehavior="automatic"
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
//onRefresh={this._onRefresh}
/>
}>
<View>
{
this.items[moment(this.state.selectedDate).format('YYYY-MM-DD')] != null ?
<View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: hp('1.8%')}}>
<View style={{alignItems: 'flex-start', justifyContent: 'flex-start', alignSelf: 'flex-start', marginLeft: wp('4.6%')}}>
<Text style={{
fontSize: rfv(18),
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 35,
letterSpacing: 0,
textAlign: "left",
color: "#c4c4c4"
}}>Proyectos favoritos</Text>
</View>
<TouchableOpacity style={{alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end', marginRight: wp('5.3%')}} onPress={() => {this.props.navigation.navigate('ClientProyects')}}>
<Text style={{
fontSize: rfv(16),
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 35,
letterSpacing: 0,
textAlign: "right",
color: "#1062cc"
}}>Editar favoritos</Text>
</TouchableOpacity>
</View>
<FlatList
extraData = {this.state}
data = {this.items[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
renderItem = {({item, index}) => {
return (
<View style={{marginTop: hp('2%')}}>
<TouchableOpacity style={{
alignSelf: 'center',
width: wp('95.7%'),
height: hp('10%'),
backgroundColor: "#ffffff",
}} onPress={() => this.toggle()}>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{flexDirection: 'column', justifyContent: 'center'}}>
<Text style={{
marginLeft: wp('5%'),
fontSize: rfv(16),
fontWeight: "500",
fontStyle: "normal",
textAlign: "left",
color: "#707070"
}}>Nombre del Proyecto</Text>
<Text style={{
marginLeft: wp('5%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#c4c4c4"
}}>{`ID ${item.key} - ${item.client}`}</Text>
<Text style={{
marginLeft: wp('5%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "italic",
textAlign: "left",
color: "#c4c4c4"
}}>{`${item.fav == true ? `No favorito` : ''}`}</Text>
</View>
<View style={{flexDirection: 'column', justifyContent: 'center'}}>
<View style={{flexDirection: 'row', marginRight: wp('3.4%')}}>
<Text style={{
fontSize: rfv(18),
fontWeight: "300",
fontStyle: "normal",
textAlign: "right",
color: "#707070"}}>{`${item.horas}h`}</Text>
<Image style={{marginTop: hp('1%'), marginLeft: wp('3.7%')}} source={this.state.isCollapsed ? Images.expandible : Images.collapsible}/>
</View>
</View>
</View>
</TouchableOpacity>
<Collapsible style={{
alignSelf: 'center',
width: wp('95.7%'),
backgroundColor: "#ffffff",}} collapsed={this.state.isCollapsed}>
<View>
<View style={{flexDirection: 'row'}}>
<Text style={{
marginLeft: wp('5%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#717171"
}}>Etapa</Text>
<Text style={{
marginLeft: wp('42.5%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#717171"
}}>Horas</Text>
</View>
<View style={{flexDirection: 'row'}}>
<ModalDropdown
adjustFrame={style => {
style.top =(Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
return style;
}}
dropdownTextStyle={styles.dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
dropdownStyle={styles.dropdownStageStyle}
defaultValue={'Seleccionar'}
style={styles.dropStageStyle}
textStyle={{
padding: 0,
margin: 0,
fontSize: rfv(16),
paddingVertical: hp('1.2%'),
fontWeight: 'normal',
fontStyle: 'normal',
textAlign: 'left',
color: item.etapa != '' ? '#1a1a1a' : '#c4c4c4',
}}
//onSelect={(index, value) => this.setState({SeleccionClientes: value})}
//options={Object.keys(this.state.items)}
onSelect={(index, value) => this.setState({SeleccionClientes: value})}
options={DataManager.ListHoliday}
/>
<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{item.horas}</Text>
</View>
<TouchableOpacity style={{marginTop: hp('1.5%'), marginLeft: wp('5.5%')}} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora}/>
</TouchableOpacity>
<TouchableOpacity style={{marginTop: hp('1.5%'), marginLeft: wp('2%')}} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora}/>
</TouchableOpacity>
</View>
<Text style={{
fontSize: rfv(14),
marginLeft: wp('5%'),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#717171"
}}>Observaciones</Text>
<Input
autoCapitalize="none"
maxLength={100}
inputContainerStyle={styles.InputContainerComentarioOnBlur}
containerStyle={styles.InputComentario}
inputStyle={styles.InputTextHoursRInput}
placeholderTextColor={'#c4c4c4'}
placeholder="(Opcional)"
onChangeText={value => this.setState({})}
/>
<TouchableOpacity style={{alignItems: 'flex-end', alignSelf: 'flex-end'}}>
<Text style={{
marginRight: wp('3.4%'),
marginBottom: hp('3%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#1062cc"
}}>Agregar etapa</Text>
</TouchableOpacity>
</View>
</Collapsible>
</View>
)
}}
/>
<View style={{alignItems: 'center', justifyContent: 'center', marginTop: hp('2.4%')}}>
{
this.state.isError == true ?
<View>
<View style={{
width: wp('95.7%'),
height: 69,
borderStyle: "solid",
borderWidth: 2,
borderColor: "#fb263c"
}}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center'
}}>
<Image source={Images.error}/>
<Text style={{
marginLeft: wp('4%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#fb263c"
}}>
{`Tienes un total de ${22}h imputadas hoy. \nPuedes ingresar máximo 20h diarias.`}
</Text>
</View>
</View>
<View style={{alignItems: 'center', marginTop: hp('3%')}}>
<TouchableOpacity
style={styles.ButtonDisabled}
disabled={true}>
<Text style={{
fontSize: rfv(17),
fontWeight: "bold",
fontStyle: "normal",
textAlign: "center",
color: "#a7a7a7"
}}>
GUARDAR CAMBIOS
</Text>
</TouchableOpacity>
</View>
</View>
: this.state.isAlert == true ?
<View>
<View style={{
width: wp('95.7%'),
height: 69,
borderStyle: "solid",
borderWidth: 2,
borderColor: "#f66a00"
}}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center'
}}>
<Image source={Images.alert}/>
<Text style={{
marginLeft: wp('4%'),
fontSize: rfv(14),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#f66a00"
}}>
{`Tienes un total de ${2}h imputadas hoy. \nDebes ingresar mínimo 8h diarias.`}
</Text>
</View>
</View>
<View style={{alignItems: 'center', marginTop: hp('3%')}}>
<TouchableOpacity
style={styles.ButtonDisabled}
disabled={true}>
<Text style={{
fontSize: rfv(17),
fontWeight: "bold",
fontStyle: "normal",
textAlign: "center",
color: "#a7a7a7"
}}>
GUARDAR CAMBIOS
</Text>
</TouchableOpacity>
</View>
</View>
: this.state.isButtonLoading == true ?
<View>
<Text style={{
marginBottom: hp('2.5%'),
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#707070"
}}>{`Tienes un total de ${9}h imputadas hoy`}</Text>
<TouchableOpacity
style={styles.ButtonGuardando}
disabled={this.state.isDisabled}>
<ActivityIndicator size="small" color="white" />
</TouchableOpacity>
</View>
: this.state.isDone == true ?
<View>
<Text style={{
marginBottom: hp('2.5%'),
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#707070"
}}>{`Tienes un total de ${9}h imputadas hoy`}</Text>
<TouchableOpacity
style={styles.ButtonGuardado}
disabled={this.state.isDisabled}>
<Text style={{
marginBottom: hp('2.5%'),
fontSize: rfv(17),
fontWeight: "bold",
fontStyle: "normal",
textAlign: "center",
color: "#ffffff"
}}>
✓ CAMBIOS GUARDADOS
</Text>
</TouchableOpacity>
</View>
:
<View>
<Text style={{
marginBottom: hp('2.5%'),
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#707070"
}}>{`Tienes un total de ${9}h imputadas hoy`}</Text>
<TouchableOpacity
style={styles.ButtonGuardar}
disabled={this.state.isDisabled}>
<Text style={{
fontSize: rfv(17),
fontWeight: "bold",
fontStyle: "normal",
textAlign: "center",
color: "#ffffff"
}}>
GUARDAR CAMBIOS
</Text>
</TouchableOpacity>
</View>
}
</View>
</View>
:
<View>
<View style={{alignItems: 'flex-start', justifyContent: 'flex-start', marginTop: hp('2.1%'), marginLeft: wp('4.6%')}}>
<Text style={{
fontSize: rfv(18),
fontWeight: "normal",
fontStyle: "normal",
textAlign: "left",
color: "#c4c4c4"
}}>Proyectos favoritos</Text>
</View>
<View style={{marginTop: hp('16.5%'), alignItems: 'center', justifyContent: 'center'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('ClientProyects', {
currentDate: this.state.selectedDate.format('YYYY-MM-DD')
})}>
<Image source={Images.plus}/>
</TouchableOpacity>
<Text style={{
fontSize: rfv(22),
fontWeight: "300",
fontStyle: "normal",
textAlign: "center",
color: "#1062cc"
}}>Agregar proyectos favoritos</Text>
</View>
</View>
}
</View>
</KeyboardAwareScrollView>
</View>
</>
);the keyboardawarescrollview is my scrollview, is the only component i found that works well with terrible components like react-native-modal-dropdown
peacechen
commented
4 years ago That's a lot of state variables and methods that I don't have access to. Would you adapt your code and place it into the example project in this repo? I can only debug this if there's a way to recreate the behavior.
I pushed a fix for a different a responsive sizing bug to master. If you'd like to see if that fixes your issue, point to this repo directly in package.json. Run npm install after changing it.
"dependencies": {
"react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip",
...
}i just realize even after commenting the keyboardawarescrollview, i'm still getting that glitch, i no longer know exactly what's happening, i also replace it with a scrollview and still nothing, here is the code for the upper part of calendarstrip
return (
<>
<StatusBar translucent backgroundColor="transparent" />
<Header
backgroundImage={Images.header_nav}
backgroundImageStyle={styles.HeaderImagen}
rightComponent={
<TouchableOpacity onPress={() => {Validation.CloseSesion(); this.props.navigation.navigate('Login')}}>
<Image source={Images.logout}/>
</TouchableOpacity>
}
centerComponent={{text: Constants.HeaderTitle, style: styles.HeaderHoursReport }}
placement='left'/>
<View style={styles.ContainerBackground}>
<CalendarStrip
calendarHeaderStyle={{
fontSize: rfv(18),
fontWeight: "normal",
fontStyle: "normal",
letterSpacing: 0,
textAlign: "left",
color: "#707070",
paddingBottom: hp('4.5%')
}}
selectedDate={this.state.selectedDate}
onDateSelected={(date) => {
var currentDay = moment(date).format('YYYY/MM/DD');
this.setState({ selectedDate: currentDay });
this.setState({ listaImputacionDia: HoursReportHistoryBusiness.GetInstance().getInfoHoursReport(this.state.dataSource, this.state.selectedDate) });
this.dataList = HoursReportHistoryBusiness.GetInstance().getInfoHoursReport(this.state.dataSource, this.state.selectedDate);
}}
minDate={this.state.minimumDay}
maxDate={this.state.maximumDay}
startingDate={this.state.dayOne}
useIsoWeekday={false}
style={{paddingTop: hp('1.5%'), paddingBottom: hp('2.7%'), backgroundColor: '#ffffff'}}
highlightDateNameStyle={{color: '#1062cc'}}
highlightDateNumberStyle={{color: '#1062cc'}}
disabledDateNumberStyle={{color: '#f21927'}}
disabledDateNameStyle={{color: '#f21927'}}
customDatesStyles={this.customDatesStyle}
dateNameStyle={{color: '#c4c4c4'}}
dateNumberStyle={{color: '#c4c4c4'}}
disabledDateOpacity={1}
/>
{/*
<KeyboardAwareScrollView
contentInsetAdjustmentBehavior="automatic"
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
//onRefresh={this._onRefresh}
/>
}>
*/}CalendarStrip needs a height set for its style. Try this:
style={{height: 200, paddingTop: hp('1.5%'), paddingBottom: hp('2.7%'), backgroundColor: '#ffffff'}}solved! that was the issue, i never set the height, thanks once again peacechen
Vasault
commented
4 years ago actually no, is not working on ios, i just tested this solution and is only working on android :/
Vasault
commented
4 years ago 
peacechen
commented
4 years ago Please create a Snack that recreates the behavior. I've used this library in multiple iOS projects and it renders properly, so will need a repro to debug. A quick change to try in your app is increase the height to 400 or more. It could be that the calendar elements aren't visible because the container height is too small, although in previous projects I've seen them render with the bottom part cut off;
Vasault
commented
4 years ago i increased the height and it worked, but is weird because is a fixed height
i'm trying to get the calendar strip to be in the upper part of the screen and everything below that scrollable, problem is, i'm getting a graphical glitch whenever i put the scrollview below the calendar strip
Scroll on top
Scroll below