Hi everyone I'm in need of some help here with React Native &/or Expo.
The brief version: I built the UI for a streaming app idea of mine. My problem now is finding a way to add content on it!
How can I add music files or MP3 & Videos on React Native (preferably Expo)?
Is there such free database out there or would I have to build something to pass the data to the app itself?
The long version: I had an idea to build a Hybrid Streaming App including music, videos and live events. Now this is my first time building an app ever. I managed to get the UI done in 4 months.
Again I've never done this before so don't crucify me. I managed to use flatlist to create categories which represent: music, videos, podcast, and live events. In those flatlist I passed data which are the artist, image, album & more. I even was able to create a player screen and actually play some random audio file using "Expo-av" using a link. Right now, I'm stuck and still trying to find a way to get an actual library on the app while also figuring out how to pass data from one thing to the next. PLEASE HELP
I'm not sure if there's a good white-label service that would provide metadata and streaming audio/video. Something like MusicBrainz offers an API for metadata, but I don't think they provide audio. There may be companies out there that offer what you're looking for, as I understand it, but licensing for major label music is notoriously thorny, so there may not be a ton of companies that give you drop-in access to something like Spotify's library. If you want people to upload media, you can use something like AWS Amplify to integrate a backend without having to do a lot of devops work.
Related
Ok... I am so confused. I am new to React Native and I have created a simple mobile app that shows a list of news (containing a specific image, title, and description). I have a lot of experience with programming most of which comes from game development. I have created many games and I am familiar to cloud storage systems that you update and retrieve data.
Right now I just have a local json file with an array of 'news' Objects and then I loop through this array to show the news posts. Basically, I want to move this json file to somewhere online where the app just retrieves it. This would make it so that the News json file could be edited in order to change, add or remove new news. So, I don't need account or anything. I don't even need to be able to set/update data from the app. I just need a place to store images and files that can be retrieved from the app.
I have tried using the common react native data base systems like sqlite, realm, mongodb, and firebase, but must not understand how they work because they make no sense. Also, it seems like when making a mobile app all of these services require you to setup a backend and start a server, which from what I can tell doesn't work on mobile... It seems logical that there would be a global data base that I could store storage on and just receive it by a simple fetch or network call. Am I totally crazy here ?:) Any help or guidance is super appreciated. Thanks.
I apologize in advance for how new I am to this all. I have a new business and there are some things I want to code for it myself as proof of concept till we have enough revenue to actually hire real coders.
Our ecosystem will have 4 major areas and I'm not sure if my approach is how to go about it or even possible.
The normal, static, info webpage that just talks about our business. (SEO and load times important)
A React JS / Next JS non-static section of that same website for blog and other dynamic content. (SEO and load times important)
A react JS employee backend for customer tracking and another tracking of customer data. (SEO and load times not as important here).
A customer portal where they can log in and see stats and stuff about their account (this will pull from data we enter in the employee backend and they can access to track progress) (I would eventually like android/ios apps as well as web portal for this so I was thinking using react-native / react-native web for this section to try and maximize code reuse. (SEO not important, but a smooth experience is)
I planed on using firebase to host it all. I'm curious if this seems it can work? Can you combine all of these different frameworks and strategies in one overall project like this without causing over bloat of download and such? Like for example, the employee backend will likely have a lot of packages and dependencies that the static front end would not require. And the static frontend would be in the same project as the dynamic blog but be built on different things (one static HTML, the other react with next.js? is that a bad idea?). Also, it's been hard to find info on exactly how goog react-native-web is so I'm just lost with this all and would love some guidance. Thank you so much in advance for any direction you can offer.
With firebase hosting you can host static sites, and redirect some paths, such as /api/* or /dynamic/* to firebase cloud functions.
On those cloud functions, you can do dynamic rendering, e.g. with remix.run or next.js.
If you use good cache-headers on those cloud functions, firebase hosting caches the results appropriately, making dynamic rendering of all pages feasible too.
I have this project where I have to code a website and ios and android apps.
I have to do this with a very limited team (basically myself). So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
I have come to consider flutter : the logic (and interaction with the backend) in dart can be compiled to both ios and android, and to javascript for the web site to call. I also like how the UI is built using flutter.
For the web site, I know there is flutter web that can be used to do a web app, but I want my website to feel like a web site more than a single page app. I have thought about using React+Gatsby to do the website's ui, while calling the dart compiled js for the logic. That would enable high page loading speed, good seo, while keeping the interactivity of a react app and the single codebase logic through dart to js compilation.
I am wondering if this seems like a good approach to you, and if not, how you would do it.
In this approach, I am wondering if it would be possible to embedded flutter web widgets inside of react js components, always in a concern of maintaining as low platform specific code as possible. I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
Update
Flutter Web is now available in a stable version for production.
Below answer is relevant back to the time when question was asked.
Flutter Web not recommended
At the current date, I would recommend not to use Flutter Web for production as it's in Beta. The Flutter Team is still working on improving quality, performance and browser compatibility. You must be cautious about using it as you may run into bugs and some other complications.
Also, I believe that the community support for Flutter Web might be on a lower side as it's pretty new.
Limited browser support
Another factor which bugs me is that the Flutter web apps can run on limited browsers as of now which would affect the reach to your user base:
Chrome (mobile & desktop)
Safari (mobile & desktop)
Edge (mobile & desktop)
Firefox (desktop)
What would I prefer?
Well, although it might be a hassle to handle different codebases for mobile and web platforms, I would still prefer to stick with React JS as it's much stable with better browser & community support as opposed to Flutter Web.
Good luck with your app! :)
I am unaware of how to use Flutter widgets inside a React app. But to address your other concerns,
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
Given no other restrictions, this leads to a single Flutter app for both web and native. For a team as small as three we still found it easier than having multiple projects.
The key factor in merging our initial projects to one was the notion of mobile browsers. In a mobile browser you website should reduce itself to the look of your mobile app, unless they have different purposes. And this automatically happens with Flutter projects if you derive your layout breakpoints from screen size. Otherwise you would code your same narrow design twice: in Flutter for native apps and in React for web.
Same goes for native apps for tablets in landscape mode. They call for a layout that resembles your desktop browser version, and you automatically get it with Flutter.
Also in web version you may have more tools than in a native app, just because your screen allows it. Naturally, you would code this logic in JS. But then you get an order to migrate this to native apps. Would you then replace your JS logic with Dart logic compiled to JS and embedded into frames? This is a messy road.
Lastly, think of Mac, Linux and Windows platforms that will come to Flutter soon. Should you ever need a desktop native app, you would want the same layout as with web.
I want my website to feel like a web site more than a single page app.
The difference in feeling between a website and a single page app lies mostly in state management and URL handling. You may do the following to reduce it:
Introduce URLs for your pages. By default, in Flutter every piece of action can happen under a single URL of example.com/#/. The window then feels fragile as there is no URL to copy and get back to. Flutter's Router API, released in Oct 2020, allows you to generate URLs on any change in your app's state and parse the state back from URL. If you do it right, then everything on your screen becomes a function of the URL, just like in traditional websites.
Use url_stragegy package for your URLs to be example.com/path rather than example.com/#/path which immediately feels fake.
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
No, it does not. Mostly because you get too narrow a channel of communication of messages between JS windows. How would you listen to Flutter's BLoC's stream in another frame? It would take too much boilerplate code. Also I cannot think of easy debugging process.
To me, Flutter Web still has drawbacks:
It takes awhile to load.
Many specific JS APIs are not implemented yet.
Many services you integrate with may not have Dart SDK, while having JS SDK. For instance, I struggled to get Ably working.
No search engine optimization.
You cannot use em as a screen unit, so scaling elements may get tricky.
Still with limited resources a single codebase outweights everything else.
To be clear, my team has been working on a web+native project the whole 2021. It now has passed most of the testing, but not yet released. For a sense of scale, it is a marketplace of 40+ screens.
We are writing dash board app in React that requires us to fetch data from remote API's asynchronously. Until data s fetched, dashboard widgets need to show a hour glass or something similar. Using hooks, using Redux/Saga, using a local data access service are some of the approaches we considered. We are mostly biased towards using Redux/Saga for this but want to check if there are any standard/recommended patterns used by react community.
Recent days I've seen these two libraries circling around community posts, haven't tried them myself, but maybe will be useful to your project:
https://github.com/zeit/swr
https://github.com/tannerlinsley/react-query
I'm about the create a small single page reactjs app that fetches data from 3rd API (let's say youtube videos, so those will be displayed). So I don't need any backend at all, but I'd like to make it offline first with service workers, so if there is no connection it will still display some cached data by default. For this I will use service workers, but don't really know if I have to add any other library or I can just use it right away.
Could somebody tell me what the best way is to implement this small offline-first react app?
If you're looking for a self-contained starting point, https://github.com/localnerve/react-pwa-reference looks promising.
If you're looking for a functional web app to draw some inspiration from, there's https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which fetches information from the iFixit API, and is conceptually similar to a web app that would fetch information from the YouTube API.
(Just note that YouTube embedded video playback won't work offline, even with service workers.)