Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.
Check the render method of SignInScreen
.
import React from 'react';
import {
SafeAreaView,
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import LoginSVG from '../assets/images/login.svg';
import GoogleSVG from '../assets/images/google.svg';
import FacebookSVG from '../assets/images/facebook.svg';
import TwitterSVG from '../assets/images/twitter.svg';
import CustomButton from '../components/CustomButton';
import InputField from '../components/InputField';
const SignInScreen = ({navigation}) => {
return (
<SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
<View style={{paddingHorizontal: 25}}>
<View style={{alignItems: 'center'}}>
<LoginSVG
height={300}
width={300}
style={{transform: [{rotate: '-5deg'}]}}
/>
</View>
<Text
style={{
fontFamily: 'Roboto-Medium',
fontSize: 28,
fontWeight: '500',
color: '#333',
marginBottom: 30,
}}>
Login
</Text>
<InputField
label={'Email ID'}
icon={
<MaterialIcons
name="alternate-email"
size={20}
color="#666"
style={{marginRight: 5}}
/>
}
keyboardType="email-address"
/>
<InputField
label={'Password'}
icon={
<Ionicons
name="ios-lock-closed-outline"
size={20}
color="#666"
style={{marginRight: 5}}
/>
}
inputType="password"
fieldButtonLabel={"Forgot?"}
fieldButtonFunction={() => {}}
/>
<CustomButton label={"Login"} onPress={() => {}} />
<Text style={{textAlign: 'center', color: '#666', marginBottom: 30}}>
Or, login with ...
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 30,
}}>
<TouchableOpacity
onPress={() => {}}
style={{
borderColor: '#ddd',
borderWidth: 2,
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 10,
}}>
<GoogleSVG height={24} width={24} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {}}
style={{
borderColor: '#ddd',
borderWidth: 2,
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 10,
}}>
<FacebookSVG height={24} width={24} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {}}
style={{
borderColor: '#ddd',
borderWidth: 2,
borderRadius: 10,
paddingHorizontal: 30,
paddingVertical: 10,
}}>
<TwitterSVG height={24} width={24} />
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
marginBottom: 30,
}}>
<Text>New to the app?</Text>
<TouchableOpacity>
<Text style={{color: '#AD40AF', fontWeight: '700'}}> Register</Text>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
};
export default SignInScreen;
CodePudding user response:
This may be due to the SVGs that you are importing. If you're using react-native-svg
, you may need to implement react-native-svg-transformer as well. See the top answer to this question for more info
CodePudding user response:
It seems when SVG files are imported like this, they are made available as image sources for img
tags, not as React components. They need to be converted into React components.
See Adding SVGs from the create-react-app
docs.
One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
import { ReactComponent as Logo } from './logo.svg'; function App() { return ( <div> {/* Logo is an actual React component */} <Logo /> </div> ); }
For your code:
import { ReactComponent as LoginSVG } from '../assets/images/login.svg';
import { ReactComponent as GoogleSVG } from '../assets/images/google.svg';
import { ReactComponent as FacebookSVG } from '../assets/images/facebook.svg';
import { ReactComponent as TwitterSVG } from '../assets/images/twitter.svg';
...
<LoginSVG
height={300}
width={300}
style={{transform: [{rotate: '-5deg'}]}}
/>