After installing react-native-elements and its dependencies, I'm unable to get the SearchBar component to render as it should
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Ionicons, MaterialIcons } from '#expo/vector-icons';
import { SearchBar } from 'react-native-elements';
const HomeScreen = () => {
const [search, setSearch] = useState('');
return (
<View>
<SearchBar
placeholder="Search, organisations, projects, and more"
value={search}
onChangeText={(searchTerm) => setSearch(searchTerm)}
/>
</View>
);
};
In the terminal console I get the following warnings
fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Font.loadAsync.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at src/context/index.js:29:19 in loginUser
Here is my package.json dependencies
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"expo": "~44.0.0",
"expo-camera": "~12.1.0",
"expo-image-picker": "^12.0.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "^3.10.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "~0.17.5"
},
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-typescript": "^7.16.7"
},
All the resource on the matter I've found so far are a couple of years old and don't solve my problem, for example:
fontFamily Material Icons is not a system font and has to be Loaded through Exponent
and
console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync
The icons need to be preloaded at the start of the App.
Reference here
This is what I had to do in App.js:
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
export default () => {
const [fontsLoaded] = useFonts({
Ionicons: require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
MaterialIcons: require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
'Material Icons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<Main />
);
};
Related
I'm working on a ReactJs (v18.2.0) project that requires integration with CkEditor5.
Following the official documentation here, I've imported and set up the CkEditor.
Somehow, it's not working. A log of the editor returns null
CreateProduct.jsx
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CKEditor } from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
<div>
<CKEditor
editor={ClassicEditor}
data="<p>Hello World</p>"
onReady={editor => {
console.log(editor)
}}
onChange={(event, editor) => {
console.log(editor.getData())
}}
onBlur={(event, editor) => {}}
onFocus={(event, editor) => {}}
/>
</div>
...
export default CreateProduct;
if (document.getElementById('createProduct')) {
const container = document.getElementById('createProduct');
const root = createRoot(container);
root.render(
<React.StrictMode>
<CreateProduct />
</React.StrictMode>
);
}
package.json
...
"devDependencies": {
"#babel/preset-react": "^7.13.13",
"#ckeditor/ckeditor5-build-classic": "^34.2.0",
"#ckeditor/ckeditor5-react": "^5.0.2",
"#fortawesome/fontawesome-free": "^6.1.1",
"#popperjs/core": "^2.10.2",
"#table-library/react-table-library": "^4.0.10",
"#tailwindcss/forms": "^0.5.2",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"check-npm": "^1.0.0",
"formik": "^2.2.9",
"laravel-mix": "^6.0.49",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"sweetalert2": "^11.4.23",
"sweetalert2-react-content": "^5.0.1",
"tailwindcss": "^3.1.6",
"yup": "^0.32.11"
}
...
Console Error
Browser Output not display toolsbar
In my case CKEditor wasn't showing at all.
I fixed it by removing <React.StrictMode>
Hope it helps :)
enter image description here
the file is available as you can see. i have no idea whyh this error is coming up. the error says that this file can not be found in the folder, but it is clearly there
import { nanoid } from 'nanoid/non-secure';
import * as React from 'react';
import { SingleNavigatorContext } from './EnsureSingleNavigator';
/**
* Register a navigator in the parent context (either a navigation container or a screen).
* This is used to prevent multiple navigators under a single container or screen.
*/
export default function useRegisterNavigator() {
const [key] = React.useState(() => nanoid());
const container = React.useContext(SingleNavigatorContext);
if (container === undefined) {
throw new Error(
"Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?\n\nThis can also happen if there are multiple copies of '#react-navigation' packages installed."
);
}
React.useEffect(() => {
const { register, unregister } = container;
register(key);
return () => unregister(key);
}, [container, key]);
return key;
}
this is the list of my dependencies
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"expo": "~44.0.0",
"expo-app-loading": "^1.3.0",
"expo-font": "^10.0.5",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-reanimated": "~2.3.1",
"react-native-web": "0.17.1",
"react-navigation": "^3.0.0",
"react-navigation-header-buttons": "^8.0.0",
"react-redux": "^7.2.8",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9"
},
So I was building my application on browser and it works completely fine, but when I tried to run it on my phone nothing were showing. This is how it looks like on my browser
but on my phone I got nothing
here're my dependencies
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"formik": "^2.2.9",
"react": "17.0.1",
"react-bootstrap": "^2.0.4",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-paper": "^4.11.1",
"react-native-svg": "^12.1.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1", <-- I didn't even use this I always use "react-native"
"react-router-dom": "^6.2.1",
"react-router-native": "^6.2.1"
}
I also checked the logs on browser and nothing were showing.
the code
import { View, Text } from 'react-native';
import React, { Component } from 'react';
class HomePage extends Component {
render(){
return (
<View>
<View>
<Text style={{fontSize: 100}}>Tested application</Text>
</View>
</View>
);
}
}
export default Homepage;
I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)
from npm And from the Documentation, they say we must add these instructions to import the CSS
my component
import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
export function Features() {
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
return (
<div>
<ImageGallery items={images} />;
</div>
)
}
my packeg json
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.4",
"#mui/material": "^5.2.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-image-gallery": "^1.2.7",
"react-material-ui-carousel": "^3.1.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
But when I add this in my Component it gives me this ERROR
If there is no solution, please suggest to me the name of a library similar to this
Thanks everyone, the issue is resolved
I added this to the component
import "react-image-gallery/styles/css/image-gallery.css";
import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import {ImgGallery} from "./Styled.js"
export function ShopDetails() {
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
return (
<ImgGallery>
<ImageGallery thumbnailPosition="left" useBrowserFullscreen={false}
showPlayButton={false} autoPlay={true} items={images} />;
</ImgGallery>
)
}
You must import only the components from the library, not the css or scss files.
For example import ImageGallery from 'react-image-gallery' and use it below like <ImageGallery/> as usual.
If it's not successful than try to import css/scss files to index.js
I have faced a problem. I have used "jquery.counterup": "^2.1.0" in my react project. But showing some errors. I am new in this environment. I have tried but can't be understood why showing these errors? Also, a similar error is showing when I have tried to add owl-carousel.
CounterUp NPM Source
import React, { Component } from "react";
import $ from "jquery";
import CountUp from "jquery.counterup";
class FunFactCOunter extends Component {
componentDidMount() {
Counter
$(".count").CountUp({
delay: 20,
time: 1500
});
}
render() {
return (
<React.Fragment>
<span className="count">500</span>K
<span className="count">450</span>K
</React.Fragment>
);
}
}
export default FunFactCOunter;
dependencies
"dependencies": {
"animate.css": "^3.7.0",
"bootstrap": "^4.1.3",
"jquery": "^2.1.4",
"jquery.counterup": "^2.1.0",
"popper.js": "^1.14.3",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-icofont": "0.0.6",
"react-scripts": "2.1.3",
"waypoints": "^4.0.1"
},