React Native Background image doesn't display on actual device

Question

I have a project on React Native CLI. There is a login screen, that contains a bg image. It works on simulator as Xcode or Android Studio but on real device background image doesnt display. How can it be fixed? Image should be local, not as url

import { StyleSheet, View, TouchableOpacity, ImageBackground } from 'react-native';
import { Text } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { FormProvider, useForm } from 'react-hook-form';
import { loginValidateSchema } from '@utils/validation';
import { LoginSection } from './components/LoginSection';
import { zodResolver } from '@hookform/resolvers/zod';
import { useUserManagementApi } from '@service/UserManagementApi';
import { Button } from '@components/Button';
import { theme } from '@theme/theme';
import { Loading } from '@screens/loading/Loading';
import { ScreenNames } from '@router/CustomStack';

export type AuthenticationCredentials = {
  email: string;
  password: string;
};

const LoginForm = () => {
  const methods = useForm<AuthenticationCredentials>({
    resolver: zodResolver(loginValidateSchema),
  });

  const navigation = useNavigation<any>();

  const { loginUser } = useUserManagementApi();

  const handleSubmitCredentials = methods.handleSubmit((values: AuthenticationCredentials) => {
    loginUser.mutateAsync({ email: values.email, password: values.password });
  });

  return (
    <ImageBackground
      source={require('../../assets/authenticate_bg.jpg')}
      style={styles.background}
      resizeMode="cover">
      <View style={styles.container}>
        <FormProvider {...methods}>
          <LoginSection />
        </FormProvider>
      </View>
      {loginUser.isPending ? (
        <Loading marginTop={24} />
      ) : (
        <>
          <View style={styles.buttonContainer}>
            <Button variant="secondary" action={handleSubmitCredentials}>
              Log in
            </Button>
            <TouchableOpacity onPress={() => navigation.navigate(ScreenNames.Registration)}>
              <Text style={styles.registration}>Go to Registration</Text>
            </TouchableOpacity>
          </View>
        </>
      )}
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    marginTop: 24,
    marginHorizontal: 50,
    gap: 10,
  },
  registration: {
    textAlign: 'center',
    color: theme.criticalColor.color,
    marginTop: 10,
  },
  container: {
    marginTop: 50,
    marginHorizontal: 30,
    gap: 10,
  },
  background: {
    flex: 1,
    width: "100%",
    height:"100%"
  },
});

export { LoginForm };

I tried preload image asynchronously, declared image as variable but it didnt help