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 - is there any performance issue if putting the error dialog in App.js and store error in redux?

I am going to store the current error in redux store, in order to show an Error Dialog.
For the error dialog, it will store in App.js like below:
App.js
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { useSelector } from "react-redux";
import ErrorDialog from "./ErrorDialog";
import ComponentA from "./ComponentA";
export default function App() {
const error = useSelector((state) => state.error);
return (
<div className="App">
<ComponentA />
{Object.keys(error).length !== 0 && (
<ErrorDialog title={error.title} message={error.message} />
)}
</div>
);
}
Every Time I hit an error in any page, dispatch will be used to set the error(such as {title:"myError", message: "134"}) in redux store. The error dialog in App.js will be shown like below:
When I close the dialog, I will use dispatch to set the error to {} so it can be closed.
I am wondering will this lead to performance issue if there are more components? Because the <ErrorDialog/> in App.js need to be re-rendered many time.
Or will there be any better way to handle error?

Next.js 500 Internal Server Error right after calling useEffect Hook inside 404 Page

I am calling the useEffect hook to call a setTimeout function inside it so as to redirect the user back to the home page after 3 seconds using useRouter hook from Next.js and calling the push method on it. The page works fine when i dont call the useEffect hook inside the stateless functional component for 404 page and redirects me to the custom 404 page. But, then i get 500 internal server error every time i call useEffect Hook.
Error
Terminal :next_router__WEBPACK_IMPORTED_MODULE_4___default(...) is not
a function
at PageNotFound (webpack-internal:///./pages/404.js:23:68)
at processChild
import Box from "#material-ui/core/Box";
import Link from "next/link";
import styles from "../styles/Home.module.css";
import useEffect from "react";
import useRouter from "next/router";
const PageNotFound = () => {
const router = useRouter();
useEffect(() => {
setTimeout(() => {
router.push("/");
}, 3000);
}, []);
return (
<Box className="page-not-found">
<h1>Ooops..</h1>
<h2>That page cannot be found</h2>
<p>
Go back to the
<Link href="/">
<a className={styles.notFoundHomePageLink}>Homepage.</a>
</Link>
</p>
</Box>
);
};
export default PageNotFound;
`

It seems like you imported useRouter the wrong way.
According to the docs it needs to be like this:
import { useRouter } from 'next/router';

Without page reloading conditional rendering does not work when session storage changes

import ReactDOM from 'react-dom';
import App from './App';
window.sessionStorage.setItem('doesitwork', '1')
ReactDOM.render(
<App />,
document.getElementById('root')
);
const sessionStorage = Boolean(window.sessionStorage.getItem("doesitwork"));
const App = () => <div>{sessionStorage && <h1>hello world!</h1>}</div>;
export default App;
I expect 'hello world' to appear when I start this application, but nothing happens until I reload the page.
The app is available here: https://codesandbox.io/s/patient-snowflake-tyijo?file=/src/App.js

Your script is currently depending on the order in which the modules load, which leads to fragile code and can make reasoning about the code harder. Retrieve the sessionStorage value not at the top level of the module, but only when App is called:
const App = () => {
const sessionStorage = Boolean(window.sessionStorage.getItem("doesitwork"));
return <div>{sessionStorage && <h1>hello world!</h1>}</div>;
};
export default App;
With your current code, depending on module load order, the App module may run before the other module, resulting in the sessionStorage = line running before the sessionStorage.setItem line running.

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);