React native background image - styled-components

i am currently learning react-native, very new to it.

i get the below error when i place in the styled-components style background-image: url(${img});:

Invariant Violation: "backgroundImage" is not a valid style property.
StyleSheet generated: {
  "backgroundColor": "#FD5656",
  "backgroundImage": "url(undefined)"
}

could one kindly advise me what i am doing wrong?

File: Login.js screen - sampleApp/rn-sample-app/screens/Login.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Container, InnerContainer, ScrollArea } from './../constants/layout-styles';
import { Text, View } from 'react-native';


const Login = () => {
  return(
    <ScrollArea loginbkgrd={true}>
      <Container>
        <InnerContainer>
          <View>
            <Text>Login page</Text>
            <Text>form</Text>
          </View>
        </InnerContainer> 
      </Container>
    </ScrollArea>
  );
};

export default Login;

File: layout-styles - sampleApp/rn-sample-app/constants/layout-styles.js

import styled from 'styled-components';
import { View, ScrollView  } from 'react-native';
import Constants from 'expo-constants';
import { colors } from './colours';
import { img } from './../assets/images/bkgrd.png';

const StatusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex: 1;
  padding: 25px;
  padding-top: ${StatusBarHeight + 10}px;
  background-color: ${colors.transparent};
`;

export const InnerContainer = styled.View`
  flex: 1;
  width: 100%;
  align-items: center;
`;

export const ScrollArea = styled.ScrollView`
  ${(props) => (props.loginbkgrd == true && `
    background-color: ${colors.primary};
    background-image: url(${img});
  `)};
`;

Solution 1:

If you want to use a background Image, you should go with react-native ImageBackground

<ImageBackground 
          source={{uri: 'YOUR URL HERE'}}
          style={{ flex: 1}}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >