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!
Related
PLEASE SEE UPDATE BELOW
This is my first time posting on stack overflow because usually I can find answers but I simply can't this time. I'm using React for the first time in a few months and just trying to show some images on the page. The imports are not working at all.
Here is where I put them
filestructure
I created an index.js inside in order to export all of them at once:
const images =
{
image1: require("./001.jpg").default,
image2: require("./002.jpg").default,
image3: require("./003.jpg").default,
image4: require("./004.jpg").default,
image5: require("./005.jpg").default,
image6: require("./006.jpg").default,
image7: require("./007.jpg").default,
image8: require("./008.jpg").default,
image9: require("./009.jpg").default
}
export default images;
I also tried similar things with an array (which is what I wanted) and with ES6 imports in case that was the issue.
I then have attempted to use them here:
import React from 'react'
import images from "../photos/index.js"
import Photo from "./Photo";
function PhotoList() {
const photoComponents = Object.values(images).map(
image => {
return <Photo photo={image}/>
}
)
return(
<div>
{photoComponents}
</div>
)
}
export default PhotoList
I have also tried to display just a single image using directly here and that also is broken, so it's not the Photo component that's broken, and apparently not the mapping either. It's just the imports.
And here we have the page. Everything else shows:
import React from 'react'
import Navbar from './Navbar';
import "./main.css";
import PhotoList from "./Photo";
function mainPage() {
return (
<div className="mainPage">
<h1>Jei Ganiyeva</h1>
<Navbar/>
<PhotoList/>
</div>
)
}
export default mainPage;
And it shows up like this:
broken image on site
What is up with this? I can't seem to find any answers apart from people importing things wrong which I am not doing. Well, I assume I'm doing something wrong, but not in the way they are.
Thank you in advance for your help.
UPDATE:
It appears the Photo component is not receiving any props no matter what it is. See here, I have replaced the mapping with passing a simple integer variable and simply showing it as a h1 in Photo:
import React from 'react'
import {images} from "../resources/photoInfo.js"
import Photo from "./Photo";
function PhotoList() {
// const photoComponents = images
// .map(image => {
// return(
// <Photo className="photo" source={image}/>
// )
// });
const image = 100;
return <div><Photo source={image}/></div>
}
export default PhotoList
import React from 'react'
function Photo({source}) {
return (
<div>
<h1>{`The props are ${source}`}</h1>
</div>
)
}
export default Photo
This results in the following screen:
Okay, I have found the solution to this and am answering myself just for a reference for anyone who googles this. However, I doubt anyone will have exactly the same problem.
Basically, in the main page, you can see above that I'm actually importing PhotoList from "./Photo" not "./PhotoList" as intended. This means that the logic held within PhotoList that passed the props to Photo was not being used. This also explains why I never saw anything in the console when I tried to console.log from PhotoList. So, if anyone else does have a mystery problem like this, check whether all parts of your code are being reached at all!
I'm trying to use vue-social-sharing, but I get this error "Component is missing template or render function".
this is my main.js file
import {library} from '#fortawesome/fontawesome-svg-core';
import {fas} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import VueSocialShare from 'vue-social-sharing';
window.addEventListener('load', () => {
const VueApp = require('./App.vue').default;
const app = createApp({
components: { VueApp},
template: document.querySelector('#app')!.innerHTML,
});
library.add(fas);
app
.component('font-awesome-icon', FontAwesomeIcon)
.component('VueSocialShare', VueSocialShare)
.mount('#app');
});
And on a vue file I'm using it as a normal component <VueSocialSharing />
What am I doing wrong and turn it into a functional component?
For Nuxt#3 users:
create a plugin. ( ~/plugins/socialShare.ts )
import VueSocialSharing from "vue-social-sharing";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueSocialSharing);
});
then you could use <ShareNetwork> everywhere in your templates to generate your share buttons.
You can't register it as a component.
All you need is:
import VueSocialSharing from 'vue-social-sharing';
const app = createApp(...);
app.use(VueSocialSharing);
And in your component, use like this:
<ShareNetwork
network="facebook"
url="https://news.vuejs.org/issues/180"
title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
quote="The hot reload is so fast it\'s near instant. - Evan You"
hashtags="vuejs,vite"
>
Share on Facebook
</ShareNetwork>
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';
I have a scenario with 2 components:
App
People
I want to test if People gets rendered 10 times inside App. So, I'm trying to test that using Jest. So far, I did this on my src/App.test.js:
import React, { Component } from "react";
import People from "./components/People";
import App from './App';
test('Total people = 10', () => {
expect(App).find(People).toHaveLength(10);
});
But I get a message saying:
TypeError: expect(...).find is not a function.
How can I test how many times a component gets rendered inside another component using React and Jest? Can anyone help me?
For testing react components first you need to render them, there are some tools for doing that, but since your reasoning in this test is to check how many times a component has been rendered inside another component, enzyme does a good job with its shallow method.
import React from "react";
import App from "./App";
import People from "./components/People";
import { shallow } from "enzyme";
it("Total people = 10", () => {
const wrapper = shallow(<App />);
expect(wrapper.find(People)).toHaveLength(10);
});
You'll need to set up enzyme in your project first, read the docs for more details.
The current trend in testing is to check for the things the user actually sees in the page, so most people is using react-testing-library, It'll be good for you to check it out
If you ever switch to react-testing-library, you might write the test something like this:
import React, { Component } from "react";
import App from './App';
import {render} from "#testing-library/react";
test('Total people = 10', async () => {
const { getAllByText } = await render(<App />);
expect(getAllByText('string_in_People')).toHaveLength(10);
});
Basically you'd use one of the library's built-in getAllBy... query methods to query for all instances of an element that appears exactly once in each instance of your <People /> component. The resulting set's length will equal the number of <People /> instances on the page.
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);