Constants, custom component screen

React Native
1

I tried using ‘npm i expo-constants’ to reuse Screen component. but is is not working.

I am getting following error.

File ‘expo-module-scripts/tsconfig.base’ not found.

Screen Component as follows:

          import React from 'react';
          import { SafeAreaView,StyleSheet } from 'react-native';
          import Constants from 'expo-constants';
          function Screen(props) {
              return (
                  <SafeAreaView style={styles.screen}>
                      {props.children}
                  </SafeAreaView>
                );
          }
          const styles = StyleSheet.create({
              screen:{
                 paddingTop:Constants.statusBarHeight
              }
          })
          
          export default Screen;

Listing screen as Follows:

  import React from 'react';
  import { View,FlatList,StyleSheet} from 'react-native';
  import CustomCardComponent from '../components/CustomCardComponent';
  import colors from '../config/colors';
  import Screen from '../components/Screen';
  import  Constants  from 'expo-constants';
  
  const items = [
      {
          id:1,
          title:'Red Jacket For Sale',
          subtitle:'$200',
          image:require('../assets/jacket.jpg'),
      },
      {
           id :2 ,
           title:'Wrist Watch For Sale' ,
           subtitle:'$250' ,
           image:require('../assets/mosh.jpg'),
      },
      {
           id:3,
           title:'Bike For Sale',
           subtitle:'$650',
           image:require('../assets/dhoni.png'),
      }
  ]
  
  function ProductSaleListScreen(props) {
    
      return (
         <Screen>
          <View style={styles.container}>
              <FlatList 
              data={items} 
              keyExtractor={message=>message.id}  
              renderItem={
                  ({item,index})=>
              <CustomCardComponent title={item.title} price={item.subtitle} image={item.image}/>}
              />
          </View>
  </Screen>
      );
  }
  const styles = StyleSheet.create({
      container:{
          flex:1,
          backgroundColor:colors.gray
      }
  })
  
  export default ProductSaleListScreen;

if I removed tag, the listing working fine. if I add Screen, I am getting blank screen.

Help me to solve this.