Can't find variable StyleSheet - React Native

Question

I've two files that have a const style = StyleSheet.create({...}) And when I run the project on expo (expo start) it says that it can't find variable StyleSheet. Below I'll paste the two files that have the stylesheet

Some context: the Home.js is the main page, where the user will land when open de app. As you can see it has little information, just a simple text (it's in Portuguese, so if you want, I can translate it). The drawer.js is the drawer menu with some effects, nothing too complicated. By the way, yesterday I was testing the app and it worked perfectly, and today it stopped working.

Can anyone help me? I've looked a thousand times for simple errors like not importing or a typo.

Home.js

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { Block, Text } from 'expo-ui-kit';

export default ({ style }) => {
  return (
    <Block
      color="#A8A7A4"
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
      }}>
      <Image
            source={(require('../assets/about_pic.jpg'))}
            style={styles.homePic}
      />
      <Text h3 center>
         Seja bem-vindo ao nosso App!
      </Text>
        <Text>Aqui você poderá agendar seu horário com muito mais facilidade e ainda será avisado quando estiver
    próximo do seu horário para que não perca seu corte!
        </Text>
</Block>
);
};

const styles = StyleSheet.create({
  homePic: {
  height: 30,
  },
});

drawer.js

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  DrawerItem,
  createDrawerNavigator,
  DrawerContentScrollView,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';
import { Feather, AntDesign } from '@expo/vector-icons';
import { Block, Button, Text } from 'expo-ui-kit';
import { LinearGradient } from 'expo-linear-gradient';

// screens
import Home from '../screens/Home';
import About from '../screens/About';
import Location from '../screens/Location';
import Book from '../screens/Book';
import Contact from '../screens/Contact';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const Screens = ({ navigation, style }) => {
  return (
    <Animated.View style={StyleSheet.flatten([styles.stack, style])}>
      <Stack.Navigator
        screenOptions={{
          headerTransparent: true,
          headerTitle: null,
          headerLeft: () => (
            <Button transparent onPress={() => navigation.openDrawer()}>
              <Feather name="menu" size={18} color="black" style={{ paddingHorizontal: 10 }} />
            </Button>
          ),
        }}>
        <Stack.Screen name="Home">{props => <Home {...props} />}</Stack.Screen>
        <Stack.Screen name="About">{props => <About {...props} />}</Stack.Screen>
        <Stack.Screen name="Location">{props => <Location {...props} />}</Stack.Screen>
        <Stack.Screen name="Book">{props => <Book {...props} />}</Stack.Screen>
        <Stack.Screen name="Contact">{props => <Contact {...props} />}</Stack.Screen>

      </Stack.Navigator>
    </Animated.View>
  );
};

const DrawerContent = props => {
  return (
    <DrawerContentScrollView {...props} scrollEnabled={false} contentContainerStyle={{ flex: 1 }}>
      <Block>
        <Block flex={0.5} bottom>
          <Image
            source={(require('../assets/logo.jpeg'))}
            style={styles.avatar}
          />
          <Text white title center size={30}>
            Alan Eluard
          </Text>
          <Text white size={15} center style={{marginBottom: 20}}>
            Prefixo19
          </Text>
        </Block>
        <Block>
          <DrawerItem
            label="Inicial"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Home')}
            icon={() => <AntDesign name="home" color="white" size={24} />}
          />
          <DrawerItem
            label="Sobre"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Messages')}
            icon={() => <AntDesign name="user" size={24} color="white" />}
          />
          <DrawerItem
            label="Localização"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Contact')}
            icon={() => <AntDesign name="enviromento" size={24} color="white" />}
          />
          <DrawerItem
            label="Agendar"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Contact')}
            icon={() => <AntDesign name="calendar" size={24} color="white" />}
          />
          <DrawerItem
            label="Contato"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Contact')}
            icon={() => <AntDesign name="phone" size={24} color="white" />}
          />
        </Block>
      </Block>
    </DrawerContentScrollView>
  );
};

export default () => {
  const [progress, setProgress] = React.useState(new Animated.Value(0));
  const scale = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });
  const borderRadius = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, 16],
  });

  const animatedStyle = { borderRadius, transform: [{ scale }] };

  return (
    <LinearGradient style={{ flex: 1 }} colors={['#171218', '#F5F4F2']} start={{x: 0, y: 0.5  }}>
      <Drawer.Navigator
        // hideStatusBar
        drawerType="slide"
        overlayColor="transparent"
        drawerStyle={styles.drawerStyles}
        contentContainerStyle={{ flex: 1 }}
        drawerContentOptions={{
          activeBackgroundColor: 'transparent',
          activeTintColor: 'white',
          inactiveTintColor: 'white',
        }}
        sceneContainerStyle={{ backgroundColor: 'transparent' }}
        drawerContent={props => {
          setProgress(props.progress);
          return <DrawerContent {...props} />;
        }}>
        <Drawer.Screen name="Screens">
          {props => <Screens {...props} style={animatedStyle} />}
        </Drawer.Screen>
      </Drawer.Navigator>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  stack: {
    flex: 1,
    shadowColor: '#FFF',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.44,
    shadowRadius: 10.32,
    elevation: 5,
    // overflow: 'scroll',
    // borderWidth: 1,
  },
  drawerStyles: { 
      flex: 1, 
      width: '50%', 
      backgroundColor: 'transparent' 
    },
  drawerItem: { 
        alignItems: 'flex-start', 
        marginVertical: 10,
    },
  drawerLabel: { 
      color: 'white', 
      marginLeft: -16,
      width: 100,
    },
  avatar: {
    marginBottom: 16,
    width: '100%',
    height: '70%',
    resizeMode: 'center',
  },
});

Error:

Exception
Can't find variable: StyleSheet
C:\...\node_modules\metro\src\lib\polyfillszrequire.js (321:12)

Update: I deleted the Flatten Style like @Oleskii said but nothing changed.

Minimal reproducible example:

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  DrawerItem,
  createDrawerNavigator,
  DrawerContentScrollView,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';
import { Feather, AntDesign } from '@expo/vector-icons';
import { Block, Button, Text } from 'expo-ui-kit';
import { LinearGradient } from 'expo-linear-gradient';

// screens
import Home from '../screens/Home';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const Screens = ({ navigation, style }) => {
  return (
    <Animated.View>
      <Stack.Navigator
        screenOptions={{
          headerTransparent: true,
          headerTitle: null,
          headerLeft: () => (
            <Button transparent onPress={() => navigation.openDrawer()}>
              <Feather name="menu" size={18} color="black" style={{ paddingHorizontal: 10 }} />
            </Button>
          ),
        }}>
        <Stack.Screen name="Home">{props => <Home {...props} />}</Stack.Screen>
      </Stack.Navigator>
    </Animated.View>
  );
};

const DrawerContent = props => {
  return (
    <DrawerContentScrollView>
      <Block>
        <Block flex={0.5} bottom>
          <Text white size={15} center style={{marginBottom: 20}}>
            Prefixo19
          </Text>
        </Block>
        <Block>
          <DrawerItem
            label="Inicial"
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('Home')}
            icon={() => <AntDesign name="home" color="white" size={24} />}
          />
        </Block>
      </Block>
    </DrawerContentScrollView>
  );
};

Answer 1

I think the problem is in your Animated.View, where you try to call StyleSheet.flatten in component style property, try doing it as described here

Update
as it turned out, the problem seemed to be in missing StyleSheet in one of the components, as OP mentioned in comments below.