react-nativescrollview
Moving the scrollView to specific position dynamically in react native
I am developing an App with rect native. I would like to use an horizental scrollview in order to show the months in my screen as below:
My problem is that when the screen load it should show the current month on the scroll when user comes to the screen.
Here is my code:
<ScrollView horizontal={true} 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>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month6"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth6?'#000':'#9B9B9B'}]}>{I18n.t("month6")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth6?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month7"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold, {color:this.state.underlineMonth7?'#000':'#9B9B9B'}]}>{I18n.t("month7")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth7?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month8"))}}style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth8?'#000':'#9B9B9B'}]}>{I18n.t("month8")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth8?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month9"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth9?'#000':'#9B9B9B'}]}>{I18n.t("month9")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth9?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month10"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth10?'#000':'#9B9B9B'}]}>{I18n.t("month10")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth10?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month11"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth11?'#000':'#9B9B9B'}]}>{I18n.t("month11")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth11?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month12"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth12?'#000':'#9B9B9B'}]}>{I18n.t("month12")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth12?100:0} ]}/>
</View>
</TouchableOpacity>
</ScrollView>
</View>
<View style={styles.body}>
</View>
I used the following method in order to highlight the selected month and it works fine.
onPressDate=(date)=>{
console.log("datedatedatedate11111", date);
if (date==I18n.t("month1") || date=='1') {
this.setState({underlineMonth1: true,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 1,
});
currentMonth= 1;
}
else if (date==I18n.t("month2")|| date=='2') {
console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: true,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 2,
});
currentMonth= 2;
}
else if (date==I18n.t("month3")|| date=='3') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: true,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 3,
});
currentMonth= 3;
}
else if (date==I18n.t("month4")|| date=='4') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: true,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 4,
});
currentMonth= 4;
}
else if (date==I18n.t("month5")|| date=='5') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: true,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 5,
});
currentMonth= 5;
}
else if (date==I18n.t("month6")|| date=='6') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: true,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 6,
});
currentMonth= 6;
}
else if (date==I18n.t("month7")|| date=='7') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: true,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 7,
});
currentMonth= 7;
}
else if (date==I18n.t("month8")|| date=='8') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: true,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 8,
});
currentMonth= 8;
}
else if (date==I18n.t("month9")|| date=='9') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: true,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 9,
});
currentMonth= 9;
}
else if (date==I18n.t("month10")|| date=='10') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: true,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 10,
});
currentMonth= 10;
}
else if (date==I18n.t("month11")|| date=='11') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: true,
underlineMonth12: false,
// currentMonth: 11,
});
currentMonth= 11;
}
else if (date==I18n.t("month12")|| date=='12') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: true,
//currentMonth: 12,
});
currentMonth= 12;
}
}
I also call the function in the componentDidMount like in order to fill it:
componentDidMount(){
var curMonth=moment().month();
console.log('curMonth',curMonth);
this.onPressDate(curMonth);
}
This approach works but if the current month is May as an example, it doesn't show that month in the scrollView. In other words, the position of the scrollview is not changing, so the user needs to scroll it to see the selected month. Can you help me to move the scrollView in a right position according to the current month.
Solution
To do that I used a timer and scrollTo function in ScrollView. Keep in mid that to do that you need to use the ref. (It is present inside the code In fact, in the componentDidMount() I put the timer for one second and after that, I execute the scrollTo function. The amount that I put inside scrollTo to move into the proper place is experimental. You have to check it according to your situation, but with current conditions, it is working fine. It is enough to put this code as a component in your project and call it any wahere that you want. I hope I could help. :)
default class Calender extends React.Component {
constructor(props) {
super(props);
this.calendarSendBack = this.calendarSendBack.bind(this);
this.state = {
isLoading: false,
underlineMonth1:false,
underlineMonth2:false,
underlineMonth3:false,
underlineMonth4:false,
underlineMonth5:false,
underlineMonth6:false,
underlineMonth7:false,
underlineMonth8:false,
underlineMonth9:false,
underlineMonth10:false,
underlineMonth11:false,
underlineMonth12:false,
// currentMonth:1,
year:moment().format('YYYY'),
firstTab:true,
EmailColor: '#9B9B9B',
textEmailColor:'#FFF',
};
this.scrollView = null;
this.height=Dimensions.get('window').width>310?160:40;
}
calendarSendBack(info) {
// console.log("Key is :", info);
this.props.callback(info);
}
onPress=(param)=>{
///console.log("rthrethreh 1234");
if (param=="tickets") {
this.setState({firstTab: true, textStampaColor:'#000', textEmailColor:'#FFF', EmailColor:'#9B9B9B', StampaColor: 'transparent'});
}
else {//stampa gift
this.setState({firstTab: false, textStampaColor:'#FFF', textEmailColor:'#000', EmailColor:'transparent', StampaColor: '#9B9B9B'});
}
}
onPressDate=(date)=>{
if (date==I18n.t("month1") || date=='1') {
this.setState({underlineMonth1: true,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 1,
});
currentMonth= 1;
}
else if (date==I18n.t("month2")|| date=='2') {
this.setState({underlineMonth1: false,
underlineMonth2: true,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 2,
});
currentMonth= 2;
}
else if (date==I18n.t("month3")|| date=='3') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: true,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 3,
});
currentMonth= 3;
}
else if (date==I18n.t("month4")|| date=='4') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: true,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 4,
});
currentMonth= 4;
}
else if (date==I18n.t("month5")|| date=='5') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: true,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 5,
});
currentMonth= 5;
}
else if (date==I18n.t("month6")|| date=='6') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: true,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 6,
});
currentMonth= 6;
}
else if (date==I18n.t("month7")|| date=='7') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: true,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 7,
});
currentMonth= 7;
}
else if (date==I18n.t("month8")|| date=='8') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: true,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 8,
});
currentMonth= 8;
}
else if (date==I18n.t("month9")|| date=='9') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: true,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 9,
});
currentMonth= 9;
}
else if (date==I18n.t("month10")|| date=='10') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: true,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 10,
});
currentMonth= 10;
}
else if (date==I18n.t("month11")|| date=='11') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: true,
underlineMonth12: false,
// currentMonth: 11,
});
currentMonth= 11;
}
else if (date==I18n.t("month12")|| date=='12') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: true,
//currentMonth: 12,
});
currentMonth= 12;
}
this.getHistoricData(currentMonth);
this.calendarSendBack(currentMonth);
}
componentDidMount=()=>{
var curMonth=moment().month();
if (curMonth==0) {
curMonth=1;
}
else {
curMonth=curMonth+1;
}
//curMonth=12
var passX;
if (curMonth==1) passX=0;
else if (curMonth==2) passX=120;
else if (curMonth==3) passX=240;
else if (curMonth==4) passX=360;
else if (curMonth==5) passX=480;
else if (curMonth==6) passX=600;
else if (curMonth==7) passX=720;
else if (curMonth==8) passX=830;
else if (curMonth==9) passX=940;
else if (curMonth==10) passX=1080;
else if (curMonth==11) passX=1180;
else if (curMonth==12) passX=1300;
Timer.setTimeout(
this, 'scrollView', () => this.scrollView.scrollTo({x: passX, y: 0, animated: true}), 1000
);
console.log('curMonth',curMonth);
this.onPressDate(curMonth);
this.getHistoricData(curMonth);
}
onBackPress = () => {
const {goBack} = this.props.navigation;
goBack();
}
render() {
//console.log('Home state: ', this.state);
return (
<View style={styles.mainContainer}>
<View style={styles.rollHeader}>
<ScrollView ref={scrollView => this.scrollView = scrollView} horizontal={true} showsHorizontalScrollIndicator={false} >
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month1"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth1?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth2?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth3?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth4?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth5?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month5")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth5?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month6"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth6?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month6")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth6?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month7"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17, {color:this.state.underlineMonth7?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month7")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth7?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month8"))}}style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth8?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month8")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth8?100:0}]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month9"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth9?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month9")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth9?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month10"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth10?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month10")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth10?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month11"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{ color:this.state.underlineMonth11?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month11")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth11?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month12"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth12?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month12")}</Text>
<View style={[styles.rowSep, { opacity: this.state.underlineMonth12?100:0} ]}/>
</View>
</TouchableOpacity>
</ScrollView>
</View>
<View style={[CommonStyle.rowSep, {height:1}]}/>
</View>
);
}
};
const styles = StyleSheet.create({
mainContainer: {
flex:1,
flexDirection: 'column',
backgroundColor: "#F7F7F7"
},
row: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
rowSep: {
height: 4,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#BD9941',
marginBottom:20,
//marginTop:20,
},
rowSepMain : {
height: 3,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#000',
marginBottom:12,
//marginTop:20,
},
rollHeader: {
//flex:2,
//height:100,
//marginTop:40,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
//backgroundColor: '#c8d6e5',
},
month: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
width: 100,
height:40,
marginTop:25,
marginLeft:10,
marginRight: 10,
// backgroundColor: 'red'
},
});
- React native victory chart gives error value undefined
- How to hide bottom navigation bar on a specific screen in react native?
- Can we create custom blur in react native?
- How do I use the reverse border radius at the top of a card? (react native)
- Convert content:// uri to file:// uri using react native
- How to change placeholder color React Native RNPickerSelect
- Custom styles aren't loading on expo
- Google Analytics 4 integration in react native
- onPress in functional react native component not working
- How to create a react native ios share extension app
- Android-studio ERROR: Cannot add task 'copyDebugIconFonts' as a task with that name already exists
- Firestore orderBy Timestamp DESC
- How to unit test PanResponder in React Native?
- How to avoid multiple event listeners from being attached?
- Not able to pass an event parameter with my this.handleChange in react-native
- Setting environment variable in react-native?
- Scroll View inside view not working react native
- How to hide specific tab with conditional statement React Native
- How to scroll FlatList in Modal component?
- Could not find 'ffi' (>= 1.3.0) among 85 total gem(s) (Gem::MissingSpecError) React native IOS on pod install
- WARN Sending `onAnimatedValueUpdate` with no listeners registered
- React Native FlatList with object
- How can I center the title in Appbar.Header in react-native-paper?
- Change app background color in React Native
- IOS react-native-ble-plx background scanning works only after toggling bluetooth on/off in settings
- react-native-config not working on android - RNCConfig Module tried to override RNCConfigModule
- ./gradlew assembleRelease BUILD FAILED with Could not find com.linkedin.dexmaker:dexmaker:2.21.0
- How do I add gap in between items in flatlist?
- React native get refresh token with Social login with Auth0
- Google play console submit permissions error