am trying tio navigate to SignInScreen i get expected a string (for built-in components)

user_15281411 0
Viewed 26

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;
react-router react-native reactjs components navigation
2 Answers
user_143521410

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'}]}}
/>
user_86908570
Related