javascript - TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function - Stack Overflow

admin管理员组

文章数量:1391937

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-ponents';
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_ponents__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function
Module.../../../../../../../../../home/imdadul/Documents/CovidVisa/ponents/styles.js
/home/imdadul/Documents/CovidVisa/ponents/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!

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-ponents';
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_ponents__WEBPACK_IMPORTED_MODULE_1__.default.View is not a function
Module.../../../../../../../../../home/imdadul/Documents/CovidVisa/ponents/styles.js
/home/imdadul/Documents/CovidVisa/ponents/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!

• javascript
• react-native
• mobile-application
• expo

Share Improve this question Follow asked Jul 31, 2021 at 10:28 Imdadul HaqueImdadul Haque 1,85588 gold badges2828 silver badges5252 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Please do

import styled from 'styled-ponents/native'

本文标签： javascriptTypeError styledcomponentsWEBPACKIMPORTEDMODULE1defaultView is not a functionStack Overflow