We Keep Coding

React Native / Expo / Typescript: JSX element type 'Text' does not have any construct or call signatures.ts (2604)

Can anybody help me on my early journey using React Native and Expo?
JSX element type 'Text' does not have any construct or call signatures.ts(2604)
App.tsx
import { StyleSheet, Text, View } from 'react-native';
import FrontCard from './components/FrontCard';
const App = () => {
return (
<View style={styles.container}>
<FrontCard />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
FrontCard.tsx
import React from 'react'
import Text, { View } from 'react-native'
const FrontCard: React.FC = () => {
return (
<View>
<Text>test</Text>
</View>
)
}
export default FrontCard;
package.json
{
"dependencies": {
"expo": "^46.0.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-web": "~0.18.7"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#types/react": "~18.0.0",
"#types/react-native": "~0.69.1",
"typescript": "^4.6.3"
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"version": "1.0.0",
"private": true,
"name": "canumind"
}
I have tried a few different things mentioned in search results from:
https://www.google.com/search?q=JSX+element+type+does+not+have+any+construct+or+call+signatures.ts+(2604)&rlz=1C1PRFI_enGB834GB834&sxsrf=ALiCzsbu2XjELqIQ0dOLQwdnq3sAj_g7PA:1668253602337&source=lnt&tbs=qdr:y&sa=X&ved=2ahUKEwiF8fL6yKj7AhUJZMAKHRf0CqIQpwV6BAgBEBo&biw=1120&bih=972&dpr=1

Text is not a default export, it's a named export.
import Text, { View } from 'react-native'; // wrong
import { Text, View } from 'react-native'; // correct
I wasn't even able to find the default export in react-native package, it's not listed in the react-native docs as well.
If the Text component would be exported from the react-native package with
export default Text;
you would be able then to import it as you actually did. However since it's exported with a named export
export { Text };
it can't be imported with default keyword since it's not a default export.
More information about react-native components: https://reactnative.dev/docs/text

NativeWind not working when used with React Navigation

NativeWind it's not working.
It was working when the content of the file tailwind.config.js was './App,{js,jsx,ts,tsx}' but not anymore since I implemented the React Navigation.
tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
package.json:
{
"name": "inovarlagos",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.12",
"#react-navigation/native-stack": "^6.8.0",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"nativewind": "^2.0.7",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.1.8"
},
"private": true
}
App.js:
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
./screens/HomeScreen.js:
import { View, Text } from 'react-native';
import React from 'react';
const HomeScreen = () => {
return (
<View className="flex-1 items-center justify-center bg-black">
<Text className="text-red-200">Futuristik Lagos- Home</Text>
</View>
);
};
export default HomeScreen;
Project structure:
Result (TailWind not working):

I assume you're using NativeWind, since support for TailwindCSS ended for React Native recently.
First stop the expo server. Then, instead of starting it with expo start, run expo start -c to wipe the cache that NativeWind adds and restart the server.
Source: https://www.nativewind.dev/guides/troubleshooting

To fix this issue, simply clear your project's cache either by expo start -c or react-native start --reset-cache.

How do i get ride of this react native animation Moti error?

I am using moti library for image animation in react native this error is thrown to me.
ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[3], "moti").MotiImage')
Here is my code file
import { StyleSheet, Text, View, Image } from "react-native";
import React from "react";
import { SIZES, images } from "../../constants";
import {MotiImage} from 'moti';
const Walkthrough2 = ({ animate }) => {
console.log("Moti Images",MotiImage);
return (
<View style={{flex:1, overflow:'hidden'}} >
<Text>Walkthrough2:</Text>
</View>
);
};
export default Walkthrough2;
const styles = StyleSheet.create({
image: {
position: "absolute",
width: 86,
height: 102,
zIndex: 0,
borderRadius: SIZES.radius,
},
});
Here is my package.json file
{
"name": "MargaretEcommerceApp",
"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 ."
},
"dependencies": {
"#react-navigation/native": "^6.0.8",
"#react-navigation/stack": "^6.1.1",
"moti": "^0.17.1",
"react": "17.0.2",
"react-native": "0.67.3",
"react-native-gesture-handler": "^2.1.1",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^4.0.1",
"react-native-screens": "^3.12.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Please help me to solve it out Thankyou

Reason for Issue
Reanimated dependency "react-native-reanimated": "^2.0.0" as stated in the official documentation requires some additional configs, including babel, Hermes, and MainApplication.java to work properly with React Native.
I guess Reanimated ^2.0.0 is not yet supported on React Native ^0.64.0
Solution NOTE
After making changes, make sure to clear gradle and yarn caches. Three changes needs to be made:
Add Reanimated's babel plugin to your babel.config.js
module.exports = { ... plugins: [ ... 'react-native-reanimated/plugin', ], };
Turn on Hermes engine by editing android/app/build.gradle
project.ext.react = [ enableHermes: true // <- here | clean and rebuild if changing ]
Plug Reanimated in MainApplication.java
import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add ...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
#Override protected String getJSMainModuleName() {
return "index";
}
#Override protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage(); // <- add
}
};
I tried this but I still got the error: cannot read property ‘useRef’ of null
To resolve the useRef issue, you simply delete the node_modules and package-lock.json files, install node module using npm i --legacy-peer-deps, then run your application again.

No `render` method found on the returned component instance

I have initialized the basic react-native app by the command react-native init DummyProject and try to compile and run it. but its giving me an error on debug console
Warning: AppContainer(...): No `render` method found on the returned component instance: you may have forgotten to define `render`.
and
TypeError: instance.render is not a function
This error is located at:
in AppContainer (at renderApplication.js:33)
The code and error my application is in this picture
I am experiencing this error even after removing node_modules and again installing the modules.
Making another app won't work either. Same error is occurring in every situation
The code of my App.js
import React, { Component } from "react";
import { Text, View } from "react-native";
export default class App extends Component {
constructor() {
super();
this.state = {
value: 1
};
}
render() {
return (
<View>
<Text>HELLO {this.state.value}</Text>
</View>
);
}
}
index.js
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
package.json
{
"name": "DummyProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.1",
"react-native": "0.57.5"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"react-test-renderer": "16.6.1"
},
"jest": {
"preset": "react-native"
}
}

I tried your code and it work perfectly fine for me.
Maybe you are facing a cache issue, Try this: Delete the node_modules folder and close the packager. Then reinstall using the command npm install from your project directory.
After this try running your code again. It should work.

React-Native - undefined is not an object (“evaluating _react3.default.PropTypes.shape”)

ERROR:
undefined is not an object (“evaluating _react3.default.PropTypes.shape”)
...
<unknown>
App.js 15
...
Refer:
http://rationalappdev.com/react-native-list-app-complete-how-to-guide/
App.js:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import NavigationExperimental from 'react-native-deprecated-custom-components';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
const RouteMapper = (route, navigationOperations, onComponentRef) => {
if (route.name === 'list') {
return (
// TODO: Add List component
<Text>The list is going to be here</Text>
);
} else if (route.name === 'movie') {
// TODO: Add Movie component for a movie detail screen
}
};
export default class App extends Component<{}> {
render() {
return (
<NavigationExperimental.Navigator
// Default to list route
initialRoute={{name: 'list'}}
// Use FloatFromBottom transition between screens
configureScene={(route, routeStack) => NavigationExperimental.Navigator.SceneConfigs.FloatFromBottom}
// Pass a route mapper functions
renderScene={RouteMapper}
/>
);
}
}
package.json
{
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-deprecated-custom-components": "^0.1.1"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-beta.5"
},
"jest": {
"preset": "react-native"
}
}
Any ideas? Thanks
UPDATE
still not working after install prop-types

PropTypes has been moved out of react and into it's own component:
https://www.npmjs.com/package/prop-types
According to the README, they recommend adding prop-types to your dependencies block in package.json
npm install --save prop-types
Then to use it:
import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm