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 says files don't exist

So, I'm new to React Native, and I'm trying to build out a basic app, but every time I launch it on my android emulator, I get a syntax error telling me that 'none of these files exist" and it is referring to an image. Here is a screen capture of the emulator, as well as my vs code workspace.
Here is the code if anyone wants to copy it and mess with it.
WelcomeWindow.js:
import React from 'react';
import { ImageBackground } from 'react-native-web';
function WelcomeWindow(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
}
})
export default WelcomeWindow;
App.js:
import WelcomeWindow from './app/screen/WelcomeWindow';
export default function App() {
return (
<WelcomeWindow />
);
}
I'm certain the path is correct, I'm thinking this is more of a bug somewhere, and I don't really know how to fix it. I've tried looking for a solution, and I've come across a sources saying this is specifically an issue when using android studio, which I am using. Again, I'm not sure about that. If anyone can help me out, it would be greatly appreciated!

I figured out what was going on. For some reason, the automatic import for ImageBackground is from react-native-web.
import React from 'react';
import { ImageBackground } from 'react-native-web';
It should only be react-native.
import React from 'react';
import { ImageBackground } from 'react-native';

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: Cannot Find module './WebpackMissingModule'

I'm currently giving my first steps on React and I'm having some issues when trying to export components.
My current index.js file is as following:
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
const API_KEY = '...';
//Create a new component. It should output some html
const App = function(){
return <div>
<SearchBar />
</div>;
}
ReactDOM.render(<App />, document.querySelector('.container'));
And my search_bar.js file:
import React from 'react';
const SearchBar = function(){
return <input />;
};
export default SearchBar;
My current file structure may be seen in the following image:
The problem is that I'm not being able to import the SearchBar element. I'm having the error that can be seen on the image:
Cannot Find module './WebpackMissingModule'
Any idea on what may be causing this issue?

I was baffled by this too, but refreshing the browser fixed for me.

Extending namespaced JS imports

This is a general ES6 question, but I've encountered it in the context of React Native. The basic problem is that I want to override some components that I usually import from the 'react-native' module with my own components. My method for doing this looks like the following:
Instead of requiring components with import { Text, View, etc } from 'react-native'
require them like this: import { Text, View, etc } from './ui_components'
where ui_components.js looks something like:
export * from 'react-native'
The issue is, how do I add my own components to this export? Ideally I'd be able to add them in ui_components.js by doing something like this:
import * as RN from 'react-native'
RN.Text = myTextComponent
RN.View = myViewComponent
export * from RN
But this doesn't quite work. Any ideas?

You need to import React Native's component and reexport it, with or without extensions from your side - it's up to you.
But remember - don't ever override React's internals (or any other's internals). Components are composable, yay!
For example, here, I am creating my custom Text component cause I want all texts in my app to be red by default. Also I want it to be configurable if I need different color for title/subtitle/whatever...
import React from 'react';
import { Text as NativeText } from 'react-native';
export default function Text({ style, ...props}) {
return <NativeText style={[ { color: 'red' }, style]} {...props} />
}
Got an idea?
Good, now to folder structure...
ui_components
| - index.js
| - Text.js
// Text.js
// See example above...
// index.js
export { default as Text } from './Text';
// In your app
import { Text } from './ui_components';