The Error is coming for Svg and Linear gradient when they are being used in Factory from Native-Base.
This was working before I implemented Stack Navigation.
Libraries used:-react navigation/nativereact navigation/native-stackreact navigation/stackreact hook formreact nativereact native gesture handlerreact native linear gradientreact native safe area contextreact native screensreact native svg
Login.tsx
import React from 'react';import {Defs, Stop, Rect, Svg, LinearGradient} from 'react-native-svg';import { Center, NativeBaseProvider, View, Image, KeyboardAvoidingView, Factory, Input,} from 'native-base';import NativeBaseIcon from './src/components/NativeBaseIcon';import des from './styles';import {theme} from './src/theme';import {Dimensions} from 'react-native';import AForm from './form';function Login() { const FactorySvg = Factory(Svg); const FactoryLinearGrad = Factory(LinearGradient); return (<NativeBaseProvider theme={theme}><View flex="1"><FactorySvg style={des.Gradient}><Defs><FactoryLinearGrad id="grad" x1="0" y1="1" x2="1" y2="0"><Stop offset="0" stopColor="#0ea5e9" stopOpacity="1" /><Stop offset="1" stopColor="#1e3a8a" stopOpacity="1" /></FactoryLinearGrad><Center alignSelf={'auto'}><Image source={require('./android/app/src/img/vmpslogo.png')} alt="Secure Parking" width={'50%'} height={'70%'} position={'relative'} resizeMode={'contain'} /></Center></Defs><Rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" /></FactorySvg></View><KeyboardAvoidingView flex={2} position={'relative'} marginTop={'6%'} alignSelf={'center'} w={'90%'}><AForm /></KeyboardAvoidingView></NativeBaseProvider> );}export default Login;Here is where I have implemented Stack Navigation.
App.tsx
import React from 'react';import {createNativeStackNavigator} from '@react-navigation/native-stack';import Login from './Login';import {NativeBaseProvider} from 'native-base';import {NavigationContainer} from '@react-navigation/native';import {createStackNavigator} from '@react-navigation/stack';import Svg from 'react-native-svg';const Stack = createStackNavigator();function MyStack() { return (<NativeBaseProvider><Stack.Navigator initialRouteName="Log" screenOptions={{ headerShown: false, }}><Stack.Screen name="Log" component={Login} /></Stack.Navigator></NativeBaseProvider> );}const App = () => { return (<NavigationContainer><NativeBaseProvider><MyStack /></NativeBaseProvider></NavigationContainer> );};export default App;Package.json
{"name": "projectname","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint . --ext .js,.jsx,.ts,.tsx" },"dependencies": {"@hookform/devtools": "^4.1.0","@native-base/icons": "^0.0.11","@react-navigation/native": "^6.0.10","@react-navigation/native-stack": "^6.6.2","@react-navigation/stack": "^6.2.1","moment": "^2.29.3","native-base": "3.4.0","react": "17.0.1","react-hook-form": "^7.31.1","react-native": "0.64.1","react-native-gesture-handler": "^2.4.2","react-native-linear-gradient": "^2.5.6","react-native-safe-area-context": "^4.2.5","react-native-screens": "^3.13.1","react-native-svg": "^12.1.1" },"devDependencies": {"@babel/core": "^7.12.9","@babel/runtime": "^7.12.5","@react-native-community/eslint-config": "^2.0.0","@types/jest": "^26.0.23","@types/react": "^18.0.9","@types/react-native": "^0.64.5","@types/react-native-vector-icons": "^6.4.10","@types/react-test-renderer": "^16.9.2","babel-jest": "^26.6.3","eslint": "^7.14.0","jest": "^26.6.3","metro-react-native-babel-preset": "^0.64.0","react-test-renderer": "17.0.1","typescript": "^3.8.3" },"resolutions": {"@types/react": "^17.0.38","@types/react-dom": "^17.0.2" },"jest": {"preset": "react-native","moduleFileExtensions": ["ts","tsx","js","jsx","json","node" ] }}Here are the 2 Errors that I am unable to solve:-
For Svg
Argument of type 'ComponentClass<SvgProps, any>' is not assignable to parameter of type 'ComponentType<SvgProps>'. Type 'React.ComponentClass<import("D:/project/VPMS/node_modules/react-native-svg/src/index").SvgProps, any>' is not assignable to type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").ComponentClass<import("D:/project/VPMS/node_modules/react-native-svg/src/index").SvgProps, any>'. Types of property 'contextType' are incompatible. Type 'React.Context<any> | undefined' is not assignable to type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").Context<any> | undefined'. Type 'React.Context<any>' is not assignable to type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").Context<any>'. Types of property 'Provider' are incompatible. Type 'React.Provider<any>' is not assignable to type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").Provider<any>'. Types of parameters 'props' and 'props' are incompatible. Type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").ProviderProps<any>' is not assignable to type 'React.ProviderProps<any>'. Types of property 'children' are incompatible. Type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'. Type '{}' is not assignable to type 'ReactNode'.For LinearGradient
Argument of type 'ComponentClass<LinearGradientProps, any>' is not assignable to parameter of type 'ComponentType<LinearGradientProps>'. Type 'React.ComponentClass<import("D:/project/VPMS/node_modules/react-native-svg/src/index").LinearGradientProps, any>' is not assignable to type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").ComponentClass<import("D:/project/VPMS/node_modules/react-native-svg/src/index").LinearGradientProps, any>'. Types of property 'contextType' are incompatible. Type 'React.Context<any> | undefined' is not assignable to type 'import("D:/project/VPMS/node_modules/@types/react-native/node_modules/@types/react/index").Context<any> | undefined'.