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!

Write JSX outside of a React component (and still transform it into a ReactElement)

I want to define a bunch of data in a constants file which will be used to render a series of React components, including some HTML, which I'd like to be able to write in JSX. Below is a simplified example of what I'd like to do:
// constants.ts
export interface ItemInfo {
title: string;
description: React.ReactElement; // Or whatever this type should be. Just trying to get it working for now, can figure out correct typing later.
}
export const DATA: ItemInfo[] = [
{
title: 'Foo',
// Pseudo code below, how can I get this working?
description: (
<>
<p>Some JSX.</p>
<p>To be rendered in a React component.</p>
</>
),
},
{
title: 'Bar',
description: (
<>
<p>More JSX.</p>
<p>To be rendered in a React component.</p>
</>
),
},
// etc
];
// ItemComponent.tsx
import React from 'react';
import { ItemInfo } from './constants';
const ItemComponent: FC<ItemInfo> = ({title, description}) => (
<div>
<h2>{title}</h2>
<div>{description}</div>
</div>
);
// ListComponent.tsx
import React from 'react';
import { ItemInfo } from './constants';
const ListComponent: FC<ItemInfo[]> = ({items}) => (
<div>
{items.map((item) => <ItemComponent {...item} />)}
</div>
);
I'm using TypeScript, so I've done the simplified example above in TS as well, though I don't think it should matter. I've tried importing React in the constants.ts file, and using React.createElement() on the JSX, but to no avail. I can just move the DATA constant inside of the ListComponent, in which case everything works, but I want to decouple the data from the component, so that it can be used to render different lists of data in different places.
I'm open to suggestions about avoiding using this pattern (in which case please offer reasons why and alternatives), but if it is possible to do this I'd still also like to know how in addition to knowing why I shouldn't and what I should do instead :)
Any insights appreciated, thanks!

Oh, actually I just figured it out. All I had to do was change the constants.ts file to a constants.tsx file.
I'll leave this question up in case it's helpful to anyone else since I didn't find great results when Googling this question (probably because it was such an obvious mistake haha).
If anyone does have comments on whether and why this pattern should or shouldn't be used, I am also still interested.

Is There Any Way to Push React State Into an Import Statement?

So in React, I import a certain file using a statement like so:
import Search from './Pages/search';
However, what if the file I want to import is going to be different every single time I call up a certain function? Would something like this -
import {this.state.fileName} from './Pages/{this.state.extension}';
where the state values are filled in by an outside function, work like I want it to? Say I wanted to download the file that is associated with that dynamic import. Would something like this -
<a href = {this.state.fileName} download> download </a>
allow me to download the file? Is there a better way to go about this? Curious to know.

If the page you want to import is going to change frequently, then may be your component can accept a fileName prop and then you can use that prop to dynamically import that file.
Something like this may be: https://codesandbox.io/s/nervous-bush-xf1zg. Here, the filename changes with each DynamicPage call and the filename that is passed in is imported dynamically within the DynamicPage function.
**Didn't completely understand what you were trying to do but hope this helps
import React, { lazy, Suspense } from "react";
export default function App() {
return (
<div>
<DynamicPage fileName="File1" />
<DynamicPage fileName="File2" />
</div>
);
}
function DynamicPage({ fileName }) {
const DynamicFile = lazy(() => import(`./${fileName}`));
return (
<Suspense fallback={"Loading.."}>
<DynamicFile />
</Suspense>
);
}
import React from "react";
export default function File1() {
return (
<div>
<h1>File 1</h1>
</div>
);
}
import React from "react";
export default function File2() {
return (
<div>
<h1>File 2</h1>
</div>
);
}

It seems like you need to share state between components.
You can:
Pass it as props manually from the parent to each child
or use React ContextApi library
or use some library such as
Recoil
Redux (more complex)

Instance of a functional component is said to be unrecognized in browser. Why is that?

I am using a JSON format text file to import items from there to another js file using react. I am using the map method in JS to iterate through the item in the JSON file. However an error keeps popping up that my functional component is unrecognized.
import React from "react"
import products from "./vschoolProducts"
import product from "./product"
function App() {
const listofp = products.map(function(pro){
return <product key={pro.id} product= {pro} />
})
return (
<div>
{listofp}
</div>
)
}
export default App
Any ideas of why it is unrecognized ?

It's silly of me, but the error can be resolved simply by making the first letter of the react component in upper caps.
The product component in product.js needs to be changed to Product.
Subsequently every instance of product must be changed to Product.
Functional components must always start with Caps.

How to I get access to data from other functions in React component?

What are some of the best practices to get access to data from other functions to my React Component?
I have a very simple component as :
/* eslint-disable */
import React from 'react'
import { test } from './FunctionTest'
function Component() {
return (
<div>
<h1>This is from Component</h1>
<p>{test()}</p>
</div>
)
}
export default Component
I am importing a function called test from a file called FunctionTest. The file is as follows :
export function test() {
let a = 2
return a
}
My goal is to access the data a from which is returning from FunctionTest file, to my component.js file. Clearly, by doing <p>{test()}</p> is totally not the right way.
I would like to ask what are best practices to do this, and how does it relate to props as FunctionTest is simply a JS function and not a React Component
I have seen other answers over here, but they are much more complicated, so in case of closing this question, please make sure I am getting pointed to the right resources.
Any help would be great.
Thank you for reading!