My code :
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Pressable,
TouchableOpacity,
FlatList,
Button
} from 'react-native';
// import {Card} from 'react-native-material-cards';
import {Card} from 'react-native-paper';
import moment from 'moment';
export default function ScreenA({navigation}) {
const [timeSlots,setTimeSlots]=React.useState([]);
const createTimeSlots =(fromTime,toTime)=>{
let starTime = moment(fromTime,'hh:mm A' );
let endTime = moment(toTime,'hh:mm A' );
if(endTime.isBefore(starTime)){
endTime.add(1,'day');
}
let arr=[];
while(starTime<=endTime){
arr.push(new moment(starTime).format('hh:mm A' ));
starTime.add(30,'minutes');
}
return arr;
}
React.useEffect(() => {
setTimeSlots(createTimeSlots('09:00 AM','05:00 PM'))
// let slots = createTimeSlots('09:00','17:00');
// console.log(slots);
}, [])
const onPressHandler = ()=>{
navigation.navigate('Screen_N');
}
const DATA = timeSlots.map((main,index)=>{
return{
key:main
}
})
return(
<View>
<Text style={[styles.bigBlue]}>Screen_Assss</Text>
<FlatList
style={styles.cards}
contentContainerStyle={{paddingBottom: 45,}}
data={DATA}
keyExtractor={(item) => item.key}
renderItem={({item,index}) => {
return <SafeAreaView style={{flexDirection:'row',padding: 10,marginBottom:10,backgroundColor:'blue',borderRadius: 20,}}>
<Button
onPress={console.log('presses')}>
<Text style={styles.item}>{item.key}{timeSlots[index+1] ? ' - ' + timeSlots[index+1] :''}</Text>
</Button>
</SafeAreaView>
}}
/>
</View>
)
}
const styles = StyleSheet.create({
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
item:{
color:'red',
fontSize:20,
},
cards:{
padding: 10,
}
});
// export default ScreenA;
Error message :
