We Keep Coding

Exporting Text is showing a Render Error in React Native

I have made a components library for ReactNative using react-native-builder-bob for packaging. With some components like Button, Image, etc is working great, but when I try to import a Text component is failing and showing this error:
View config getter callback for component 'RCTTEXT' must be a function
(receive undefined)
If in the project where I import this component do some change, the view is refreshed and the error dissapears, but every time I run the project for first time this error is shown.
Here is the imported component:
import {Text} from 'react-native';
export const MyText = ({...props}) => <Text {...props} />;
And after, this is the way I import this component in another app:
import { MyText } from 'my-library'
export const Example = () => {
return <MyText>Hello</MyText>
}
I was searching for the error of 'View config getter....' and the only I found is, provocated by importing error, but only happens with this component.
What thing could be provocating this error?
Thanks in advance

Try using your custom text component like this.
import {Text} from 'react-native';
export const MyText = ({children, ...props}) => <Text {...props}>{children}</Text>;
Hope it will solve your problem.

well....finally I found the error. Everything is all great from my library of components, but, apparently, in my component library I have the react-native version 0.68.0 and, in the app where I was importing this components I had a lower version (0.67.3). If I use the same version, it is working!

react native Component Exception Element type is invalid

I have a simple code which I can not get to run, the code is as follows:
import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen.js';
export default function App() {
return <WelcomeScreen/>
}
with the WelcomeScreen.js file being:
import React from 'react'
import { StyleSheet, ImageBackground } from 'react-native'
function WelcomeScreen(props) {
return (
<ImageBackground
styles={styles.background}
source={require("../assets/background.png")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1
}
})
Each time this is run the console is filled with error messages and upon looking at the app I see the message:
"Component Exception
Element type is invalid: expected a string or a class/function but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of 'App'."
I'm new to native react but the previous code I had before attempting to import the welcome screen file ran correctly. I've tried to change the default to object in app.js but that didn't work, I've looked around for a while now and just can't figure out what's going on. Any and all help is greatly appreciated
Thank you for your time

Update your Welcome screen to:
export default function WelcomeScreen(props) {
return (
<ImageBackground
styles={styles.background}
source={require("../assets/background.png")}
></ImageBackground>
);
}
Now you are good to go :)

React Native - unable to solve module - even if path is correct

So I tried to use some image inside my javascript code in React Native. This is are my folders:
enter image description here
As soon as I try to import it with:
import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { SimpleAnimation } from 'react-native-simple-animations';
//here i try to import my picture
import iconBright from 'testproject/pictures/iconBright.png';
export default function Welcome() {
return (
<View style={styles.container}>
<SimpleAnimation delay={500} duration={1000} fade staticType='zoom'>
//also here i am trying to import it but same error
<Image source={require('testproject/pictures/iconBright.png')}></Image>
</SimpleAnimation>
</View>
);
}
const styles = StyleSheet.create({
container: {
},
});
And whe I compile it I get always this error:
Unable to resolve "pictures/iconBright.png" from "screens\Welcome.js"
I tried many different ways from the internet and other stackoverlow suggestions but nothing worked. I also tried:
./pictures/iconBright.png
../pictures/iconBright.png
But nothing works. Can someone help me or explain me how this path-system works, because I havent found any usefull guides for it yet.
EDIT:
here the error on the device:
Unable to resolve module `../pictures/iconBright.PNG` from `screens\Welcome.js`:
None of these files exist:
* pictures\iconBright.PNG(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
* pictures\iconBright.PNG\index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)

You images are in .PNG capital and in the import it's .png
I would rename the images to .png and try

VSCode bad javascript formatting

I am editing some javascript files (particularly, reactjs coed) in VS Code on Ubuntu 18.04. However, the "formatting" is really terrible.
Before:
import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return (
<div className="App">
<Dropzone onDrop={this.onDrop} />
</div>
);
}
}
export default App;
After:
import React, {
Component
} from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return ( <
div className = "App" >
<
Dropzone onDrop = {
this.onDrop
}
/> <
/div>
);
}
}
export default App;
Previously, I was editing these files on Windows 10 in VS Code, and the formatter was great. Is there an extension I am missing? Or what am I doing wrong here. To format, I am using the "Format Document" keyboard shortcut.
Here are my current extensions:

The culprit for this behavior was Beatify extension on Vscode in my case. Disabling resolved the issue.

Here is the solution,
change the language manually to "javaScript React"
try with your favorite formatter(you can install vs code extensions such as "Prettier","beautify")
Cheers !

I personally use Prettier for JS and CSS formatting, and JS JSX Snippets for JSX in React. I have tried a lot of others, but with those 2 I can assure you your React code will look beautiful.

React native error in index,js and app.js

Kinda new to React I am writing the following code in index.js and app.js and this error message is coming.Kindly help
index.js--[error screnshot][1]
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('albums', () => App);
App.js--
import React from 'react';
import { Text } from 'react-native';
const App = () => {
return (
<Text>HEELLO WORLD</Text>
);
};
export default App;
ERROR
Can't find variable: __d (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1)
Can't find variable: __d (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1)
global code#http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1:4

You probably need a view before text component. Something like this:
import React from 'react';
import { View, Text } from 'react-native';
const App = () => (
<View>
<Text>some text</Text>
</View>
);
export default App;

Suggestion 1 : Instead of a Functional Component, try converting to your App component to a Class Based Component and then try running the app again.
Suggestion 2 : Wrap your Text element inside a react native element in the App component.

You get this error because the native app can't find the packager that's running. What I found is that the IP address shown in the app differed from my actual IP address, which was correct: I had closed my macbook overnight and switched networks by the time I re-opened it.
The fix for me was to remove the app from the device and then re-install it (using a normal react-native run-android). That way the app uses the correct IP address, and will search for a running packager on that IP.

It looks like we are working on a similar tut(just picking up React Native as well)! Anyway, I did get this to work, and there was one issue - The view background color == black, and text color was black.
I looked at your files and I have the same but I will post it here. Keep in mind this isn't styled yet so your text will be upper left corner(0,0) for iOS at least. I haven't tested Android.
App.js
import React from 'react';
import { Text } from 'react-native';
const App = () => {
return(
<Text style={{color: 'white'}}>Some Text</Text>
);
};
export default App;
index.js
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);