metro
react-native-web
Our great sponsors
metro | react-native-web | |
---|---|---|
16 | 62 | |
5,054 | 21,326 | |
0.9% | - | |
9.4 | 6.4 | |
7 days ago | 16 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
metro
-
Dynamic imports supported in react native
For details on the implementation you can see Evan's PR to metro here.
- React Native bundler improvement! 🔥
-
React vs React Native: How Different Are They, Really?
Some development tools for the web are similar (Chrome debugger, mostly) to those for React Native, but other aspects are very different (working with the metro bundler, using Flipper, AsyncStorage debugging, more). Some techniques developers will use are the same (breakpoints and console logging), but others are different (knowing when to restart the packager vs reinstall the app on device).
-
Setting up React Native Monorepo with Yarn Workspaces
We’re almost done with setting up the project. The last thing in the React Native app is to add watchFolders so metro knows where the linked node_modules are. The shared modules are symlinked by yarn, and since metro doesn’t follow symlinks we need to explicitly say it where the linked node_modules are.
-
Debugging RN + Expo bare using WebStorm? Would I be better off just killing myself now?
Unfortunately it is what it is... I use intellij instead of webstorm since they're the same thing basically. I spent a shitton of time figuring out how to link a local package i was creating for my app only to discover about this issue that is almost as old as react native itself. (luckily there's rnx-kit that solves the problem). Not to talk about the impossibility to have one goddamn IDE to write both typescript, java and c++. Currently i have to write ts/js in intellij, then i have to switch to android studio to write java/c++.
-
Do you know where the __DEV__ flag is set?
React Native packager. Override instructions here.
-
React Native Monorepo
React Native doesn't play nicely with most monorepo tools out of the box as Metro doesn't support symlinking.
-
Running React Native everywhere: The Web
Because React Native for Web is a React website, you can use front-end tools to build and run it. For example, you can build it with Webpack or Rollup instead of Metro bundler.
-
Running React Native everywhere: Android & iOS
Before we can run the app, we still need do one more thing: make metro bundler compatible with Yarn workspaces' hoisting.
-
Running React Native everywhere: Yarn Workspaces monorepo
Second, sharing code with other projects (e.g., backend code, web apps) may get complicated. Out-of-the-box, React Native's metro bundler cannot reference code outside of the project's root directory. You can configure it to do so (and we'll do it as well later on). Still, once you do it, you'll also need to ensure dependencies resolution works correctly (to avoid loading two different versions of the same library, for example); which might not be as easy as it may sound.
react-native-web
-
NextJS on iOS & Android????? How???
maybe https://necolas.github.io/react-native-web/? https://github.com/vercel/next.js/blob/canary/examples/with-react-native-web/README.md
-
What version of react native is compatible with react native web?
I am following a tutorial that is 4 years old that states that react native 0.55.4 is last compatible with react native web and anything later is not compatible yet. He showed the documentation page in the video as his source.
-
Rust and Next.js everywhere?
Personally, if you're trying to find a stack that can be applied everywhere with Next.js as your chosen framework, best bet would be React Native Web or similar. Which would let you share the maximum amount of frontend code between Web, iOS, and Android. Then you could reach for electron (barf) or something to bundle it for desktop if that was a requirement.
-
Here's what I'd like to do as a hobby project... what should I learn?
Some of the top cross-platform frameworks do have support for web targets. React-Native-Web and Flutter on the Web are both ways to target the web with your cross-platform app.
-
How do i intergrate vite.js with my current react-native project?
https://github.com/necolas/react-native-web/discussions/2201 it can be done.
-
Which is the best lib/framework option for a single code base for web, Android & iOS?
If you want a single codebase for web and mobile I would look into react-native and react-native-web. You could probably code the web app with react-native-web, make it responsive and build it through react-native for mobile. Designing an app for mobile and for web can lead to significant difference though since the experience is quite different. Some things might make sense for a mobile and not for a desktop or the opposite. So I wouldn't discard completely the idea of having separate codebases. Highly depends on the app though, totally valid for many use cases.
-
Need an advice for frontend framework (beginner in frontend development)
Another fun thing you could do is build it for mobile + web using React-Native through Expo or manually with https://necolas.github.io/react-native-web/
-
I lost $209,640 of my own money trying to start a business
If you're using Expo (which I assume most are on RN) they have web support. This is via React Native Web, which is a separate project if you wanted to use that directly too.
Personally though, I've found the DX of Flutter far above RN. I always had random packages break on RN that I had to fix every time, while with Flutter most of what you need is already included in the framework, including a component UI library for Android and iOS.
-
I made a template for making full-stack universal(web + mobile) apps! (tRPC, Expo, Next, Solito, Tamagui, Clerk Auth, Prisma!)
So the RN-R part is done by https://necolas.github.io/react-native-web/ and it's really good! However, there are some code that is kind of outside of the scope of React. Ie. Navigation, that's more in the realm of Next.
-
No, React Native is not the future
I don't have personal experience with this, but React Native Web claims to solve this issue: https://necolas.github.io/react-native-web/, not sure if anyone has had experience with this. Of course, you will have issues with dependency hell/package maintenance.
Another great option seems to be Flutter web. I was really impressed by the "batteries included" approach to Flutter, and Dart has a pretty comprehensive standard library. This is in contrast to React's "just find a random package on npm and pray it doesn't bite you in the future."
Obviously rewrites are expensive, but I personally think both approaches are worth considering versus abandoning native components completely. WebView isn't without problems (and also, you don't need React Native to use WebView).
What are some alternatives?
expo-cli - Tools for creating, running, and deploying universal Expo and React Native apps
react-native-keyboard-aware-scroll-view - A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
react-native-monorepo-tools - Tools and utils to support a React Native monorepo built with Yarn Workspaces
sciter-js-sdk - Sciter.JS - Sciter but with QuickJS on board instead of my TIScript
react-native-elements - Cross-Platform React Native UI Toolkit
nx - Smart Monorepos · Fast CI
react-native-material-ui - Highly customizable material design components for React Native
minimatch - a glob matcher in javascript
NativeBase - Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.