NestedTouchables.tsx

import {
  SafeAreaView,
  View,
  StatusBar,
  Text,
  useColorScheme,
  TouchableOpacity,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={{flex:1, alignItems:'center'}}>
      <TouchableOpacity
        style={{width:'90%', backgroundColor:'lightgray', alignItems:'center', justifyContent:'center', height:200, borderRadius:'25'}}
        onPress={() => alert('card tapped')} >
          <TouchableOpacity
          style={{width:150, height:50, alignItems:'center', borderRadius:'25', justifyContent:'center', backgroundColor:'blue'}}
          onPress={() => alert('touchable opacity inside touchable opacity tapped')}
        >
          <Text style={{color:'white'}}>Press Me!</Text>
        </TouchableOpacity>

      </TouchableOpacity>
      </View>


        <TouchableOpacity
          style={{width:150, height:50, alignItems:'center', borderRadius:'25', justifyContent:'center', backgroundColor:'blue'}}
          onPress={() => alert('button tapped')}
        >
          <Text style={{color:'white'}}>Press Me!</Text>
        </TouchableOpacity>


    </SafeAreaView>
  );