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 >