i am trying to add touchableOpacity for my flatlist but it isn't working so I used button so now I am getting this error

Viewed 48

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 :

enter image description here

1 Answers

Try this for TouchableOpacity:

import {Image, Text, TouchableOpacity, View} from 'react-native'; 

...

<TouchableOpacity
    style={"row"}
    onPress={() => {
        onClick(params)
    }}>
    <Image
        source={{
            uri: image
        }}
        style={{
            alignSelf: 'center',
            aspectRatio: 1,
            justifyContent: 'flex-end',
            overflow: 'hidden',
            alignItems: 'center',
            position: 'relative',
        }}
    />
    <View>
        <Text>{name}</Text>
    </View>
</TouchableOpacity>

And for Button and title error :

<Button
  onPress={() => onClick(props)}
  title="Press Me"/>
Related