TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function

Question

I have created a react-native app using expo-cli but makes me confuse to connected the styles.

node version: v15.14.0; npm version: 7.19.1; expo version: 4.8.1

The Code is given below,

import styled from 'styled-components';
import {View, Text, Image, TextInput, TouchableOpacity} from 'react-native';
import Constants from 'expo-constants';

const StatusBarHeight = Constants.statusBarHeight;

//colors
export const Colors={
          primary: '#ffffff',
          secondary: '$E5E7EB',
          tertiary: '#1F2937',
          darkLight: '#9CA3AF',
          brand: '#6D28D9',
          green: '#10B981',
          red: '#EF4444',
};

const { primary, secondary, tertiary, darkLight, brand, green, red } = Colors;

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

The error:

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function
Module.../../../../../../../../../home/imdadul/Documents/CovidVisa/components/styles.js
/home/imdadul/Documents/CovidVisa/components/styles.js:20
  17 | 
  18 | const { primary, secondary, tertiary, darkLight, brand, green, red } = Colors;
  19 | 
> 20 | export const StyledContainer = styled.View`
  21 |           flex: 1;
  22 |           padding: 25px;
  23 |           padding-top: ${StatusBarHeight + 10}px;

Please concern on attached file to show error screenshot,

I will be gratefully them who helps me and try to help me. Advanced Thanks!

Answer 1

Please do

import styled from 'styled-components/native'