I'm starting a very basic build.
I'm using `create-react-native-app' and yarn for pm.
From there all I have tried to accomplish is to load in 'native-base' for some UI elements.
From the app.js file the only thing I've added is a Button Component from native-base.
<Button> <Text></Text> </Button>
And have included native-base.
After receiving some errors that it couldn't resolve module '#expo/vector-icons' I went and installed #expo/vector-icons, and for the hell of it ran react-native link.
Now it can find #expo/vector-icons but it can't find the fonts starting with Ionicons.ttf.
SO. From there I downloaded all the fonts to a assets/fonts/ directory and then included this in my app.js file based off some documentation I found on the expo site.
import { Font } from 'exponent';
///
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'ionicons': require('./assets/fonts/Ionicons.ttf'),
});
}
///
They way I load custom fonts is by adding them in the Info.plist file as a list of Font provided by the application:
And they also need to be in the provided resources of the Build Phases:
After that, you can use it in the fontFamily property in CSS in react native. Make sure you also clean and build the project again after adding the fonts so they are copied to the device.
Related
I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/context/Context
That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.
Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.
To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.
In my case, I had an empty file index.js in a folder. Using Nextjs Default Router
It seems to be not declared default export keyword in context component.
Try it as follow:
const Context = ()=>{
...
}
export default Context
I had the same error.
If you comment out all other code but leave this NextJS won't get mad at you:
export default function Home1() {
return <>{/* nothing */}</>;
}
I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:
index1.js
You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:
//good for history of index implementation and associated syntax logic
I'm creating a utility project that will supply React components and resources to my other projects.
I'd like it to include a set of images (mostly .png files for icons) that can then be imported by the child projects.
I can't figure out how to make this work.
I can export the images from the library, and I can see them, name-mangled, in the node_modules of the child project. So, all good so far.
But, import {imgName} from "myLib" does not include the file in the child project's bundle.
It looks to me like my problem is explained by a clue in https://create-react-app.dev/docs/adding-images-fonts-and-files/:
You can import a file right in a JavaScript module. This tells
webpack to include that file in the bundle.
Presumably, CRA is not triggering this webpack behavior in my case, since I'm importing from another module, not from a file.
How can I get things working?
Assume:
I have complete ownership of the library and child projects, so I can change this solution in whatever way works. I just want to have a single common resource for the images.
I don't want to eject my child projects
Ideally, any complexity should be in the library project. The child projects should have minimal complex tooling. (My intent is for this library to be used by a team of other developers, who will want to focus on their own tasks; not on tooling details)
EDIT (ADDED LATER)
Per the comments in the first answer below, I've created a simple example of my problem. See:
Library repo: github.com/deg/media-file-bug-library
Library package: npmjs.com/package/media-file-bug-library
Client repo: github.com/deg/media-file-bug-client
Just pull the client repo and do yarn install and yarn start. This will bring up a little web page that shows the problem:
SCREEN SNAPSHOT:
The Problem is Not in CRA Trigger. Importing Png File like JavaScript Hides a Magic. Here you are importing a Image and Exporting it which then get Processed by bundler and The Bundled Index Actually Exports The name of the Processed Image File Which in Your Case is corss~nAalnlvj.png. That's Why Your Image is Broken but you are able to render name of File, The Case is Same for microbundle or parcel.
How You Can solve it is by separating your assets and components By Placing Images on separate assets folder and place your images there and then add assets to files in your files in package.json
{
.
.
"files": [ "dist", "assets"],
}
And Then Import Image & Using Like This
import React from 'react'
import ico_cross from 'media-file-bug-library-fix/assets/cross.png'
function App() {
return (
<div className="App">
<img src={ico_cross} alt="im"/>
</div>
);
}
For Further Reference Checkout
Here
A Npm Library For Your Fix I Published Npm media-file-bug-library-fix
enter image description here
hey David I found the solution please do check the above screenshot
as in you package just change in index.modern.js
// WebPack doesnt listen as a path it listen
// var cross = "cross~nAalnlvj.png";
// use import rather than simple name as it generate a full absolute path at parent level so that in child level it can be accessible as an Image
import cross from "./cross~nAalnlvj.png"
I am new to react native and am trying to add a google map to my app.
I started by installing react-native-maps and creating a new file with the following code.
import React from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
export default class MapScreen extends React.Component {
render() {
return (
<MapView
provider={ PROVIDER_GOOGLE }
style={{flex: 1}}
region={{
latitude: 54.721344,
longitude: -6.199981
}}
showsUserLocation={true} />
);
}
}
After this I added the following code to the Podfile file found in the ios folder.
target 'MapExample' do
pod 'Yoga', path: "./node_modules/react-native/ReactCommon/yoga/Yoga.podspec"
pod 'GoogleMaps'
end
After getting my api key from google, I opened Xcode and added the AirGoogleMap folder to my project. I then went into my build settings and add 'HAVE_GOOGLE_MAPS+1' to Preprocessor Macros Macros.
Next I went into my AppDelegate.m file and added the following lines
#import GoogleMaps;
[GMSServices provideAPIKey:#"YOUR_API_KEY"]
After all this was done I ran my app in the iOS simulator and when I did this an error appeared as shown below.
I am unsure as to why I am getting this error as I have added the AirGoogleMap to my project via Xcode. Is there any way to fix this?
Sometimes pod does not work properly so you might be have to build the app from scratch. In your issue what I can suggest you to read the instructions in the link below carefully and create a new project by using react-native-init if necessary. Then try it again. Lastly, please be aware of that if you're using pod and when you open the project with xCode, Libraries section should be empty and Target/Build Phases/Link Binary With Libraries should contain generally and mostly only libPods-projectname.a
https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md
You can't use import outside a module, also try to restart the entire simulation engine.
On react-native, there's a feature were we can use a components file suffix to build different components according to platform, ie. component.ios.js and component.android.js will build a component module with specific behavior for ios and android.
Is there any way to build different components according to build variants/flavors/schemes? Say, suppose I have a pro and a lite version of my app, I'd like to do something like this:
| some-folder/
| -- component.pro.js
| -- component.lite.js
and so when I import component from 'some-folder/component', the bundler could detect if I'm using a pro or lite build variant and bundle the correct javascript file, in a similar manner that it's done for the OS suffixes.
Do notice that I know that I can just check the build variant at runtime and provide the correct component correctly, but that means bundling the code for the wrong variant in the app - increasing app size needlessly.
Related, is there a way to import images conditionally according to build variant? I know I could just place them in their respective assets folders for each native platform, but I wonder if there are other methods.
Any help is appreciated.
no thats not possible as React Native will detect when a file has a .ios. or .android. extension and load the right file for each platform.
you have to write your own wrapper for each file like
component
--> component.pro.js
--> component.lite.js
--> index.js
in index.js file you have check platform or os from react native and return specific file
for example file
import ComponentPro from './component.pro.js';
import ComponentLite from './component.lite.js';
import {Platform} from 'react-native';
export defualt Component=(props)=>{
if (platform.os==='pro') return <ComponentPro {...props}/>;
else if (platform.os==='lite') return <ComponentLite {...props}/>;
}
Im trying to setup an app using Muicss for styling my components in a React js app.
Below is the code of a very simple example but when I go to my browser the button has no style in it, and I don't know if I'm missing something, I used Material Design before and I had no issues.
import React from 'react';
import Button from 'muicss/lib/react/button';
export default class Example extends React.Component {
render() {
return (
<div>
<Button variant="raised" color="danger">button</Button>
</div>
);
}
}
Can someone help me to get if I'm missing something, I installed the library using NPM and inside my node_modules folder I can see all the files from the Muicss library.
In the console there's no error or something weird, the weird thing is that the components have no styles...
To use MUI React you must include the MUI CSS file in your HTML payload. It can be compiled into your app's CSS or added from the CDN:
<link href="//cdn.muicss.com/mui-0.9.30/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" />
(source: MUICSS documentation)
I know this is old and as it doesn't mention it for future reference for passers-by it can be imported into scss using #import url("//cdn.muicss.com/mui-0.10.1/css/mui.min.css");
Muicss version: 0.10.2
Using the solution of Muicss Docs is ok but not well, because when a developer update muicss and do not update the given link, everything maybe ruins, now with the below solution it became very very better.
I have the same issue and fix it by adding sass-loader to Webpack and also I have CSS Modules so in the root of styles of my project I write just like below:
/* root file of styles.scss */
:global {
#import 'node_modules/muicss/lib/sass/mui';
}
After using this solution, even with hashed class name by using CSS Modules I gave the global names of muicss and every component works well.