react-native-size-matters
react-native-web
react-native-size-matters | react-native-web | |
---|---|---|
12 | 62 | |
2,222 | 21,345 | |
- | - | |
4.7 | 6.7 | |
7 months ago | 4 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.
react-native-size-matters
- How to achieve a responsive UI in React Native apps in both Android and iOS across wildly different devices?
-
Can someone review my code?
use some of the responsive library like https://github.com/nirsky/react-native-size-matters and https://www.npmjs.com/package/react-native-responsive-screen so your screen will reflect on every screen size
-
Responsiveness; how do you achieve this?
Flex and React Native Size Matters.
-
what is the best way to make app responsive for all devices
You can check out this library: https://github.com/nirsky/react-native-size-matters inspect it and see how they achieve responsiveness :-)
-
Responsive design for react native applications
Always use '%' sizing when possible. When it isn't possible, use https://github.com/nirsky/react-native-size-matters. Not a perfect solution, but the best one out there. I still try to find a better way than this lib.
-
Scalable font size for react native mobile
`moderateScale` function also works, from https://github.com/nirsky/react-native-size-matters library.
- How do I write helper functions for font responsiveness in react native?
-
Hii, I am quite new to React-Native and I am wondering how do you guys make stuff to fit the screen on different phones?
Generally, you need to compute the font size to use based on the size of the screen. A lib like this can make it easy: https://github.com/nirsky/react-native-size-matters
-
Model development of mobile applications React Native + AWS Amplify
When developing with React Native, you need to manually configure your app to look great on different screen sizes. This is a tedious job, so react-native-size-matters provides some simple tools that make scaling a lot easier. The idea is to design once on a standard mobile device with ~ 5 "screen and then just apply the utilities provided, so the artboard size in Sketch for the design is 320x568px.
-
Your process for testing UI on different screen sizes
I mostly get the job done with just flexbox, it's very powerful, as for the few cases where my layouts look huddled up or clip together, I use these functions to scale them to other screen sizes.
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.
[0] https://docs.expo.dev/workflow/web/
[1] https://github.com/necolas/react-native-web
-
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?
react-native-safe-area-context - A flexible way to handle safe area insets in JS. Also works on Android and Web!
react-native-keyboard-aware-scroll-view - A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
react-native-responsive-ui - Building responsive UIs in React Native.
craco - Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
react-native-firebase - 🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
sciter-js-sdk - Sciter.JS - Sciter but with QuickJS on board instead of my TIScript
SvelteScriptServer - Svelte Script Server gives you a way to automate your computer from your phone on the same network.
metro - 🚇 The JavaScript bundler for React Native
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
react-native-elements - Cross-Platform React Native UI Toolkit
storybook - Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
react-native-material-ui - Highly customizable material design components for React Native