I'm looking to build something similar to the way Spotify (or other music players) work, where there is a footer element that allows you to control the currently playing music that persists regardless of how you navigate through the app. See the bottom of this image as an example.
See the bottom here with the playing music
Requirements for this are that the different screens must be able to communicate with that component so users can choose music from any screen. The component must persist across screens so that the currently playing music will be controllable even as you use the app.
I'm building in react-native and currently using react-navigation as my navigation solution, in case that makes a difference.
Related
First and most important: I am by no means a developer. We hired an agency to develop an APP for us, and i was given by a developed solution that i am not convinced if it is the best solution, So i would like to ask you guysfor advice.
Unfortunatelly i cannot put pictures nor links to code for the app, but i will do my best to explain myself:
The problems i encountered are mainly two:
All items appear to have fixed sizes applyed to them: When testing the app on different devices, the size of the elements is not responsive at all. In fact on small devices (Moto G5) There are elements that fall behind the bottom navigation bar making them unaccessible.
Lot of stuff fall below that said bottom navigation bar.
My question is the following:
Is react native responsive?
In web development there is a lot of flexibility when it comes to responsiveness with CSS and JS. Is React native any different? or there is a way to prepare the layout so it fits most of the common sizes without losing acces to interactions?
Hope i explained myself correctly. and again, sorry for not asking a technical specific question.
React Native is designed to be responsive, but it requires a different approach compared to web development. In web development, you can use CSS and JavaScript to make your website responsive, but in React Native, you use a different set of tools.
We have many ways to make the app responsive with the device's large screen and small screen.
Use the Dimensions API: React Native provides the Dimensions API, which allows you to get the dimensions of the screen at runtime. You can use this information to adjust the layout of your app based on the size of the screen.
Use third-party libraries ex: react-native-size-matters, react-native-responsive-screen, ...
Use Flexbox: React Native uses Flexbox for layout, just like web development. Flexbox is a powerful tool for creating responsive layouts that adapt to different screen sizes. You can use the flex property to adjust the size and position of elements on the screen.
In terms of your specific issue with elements falling behind the bottom navigation bar, it's likely that the layout is not taking the height of the navigation bar into account. You can use the Dimensions API to get the height of the navigation bar and adjust the layout accordingly.
I want to call an external app that is already installed in the mobile using a deep link and display that on 80% of the screen inside my app. Is it possible to do this in react-native?
You have to use this module for opening other apps but it will open up for the whole screen with deep linking, The Reason is that Other apps are also native apps and have their separate implementation.
You can trigger different apps but opening for 80% of the screen is not possible because this is not a Webview where you can control the height.
Simple as that, You cannot open one app in '20%' of the screen and other for '80%' of the screen.
https://github.com/FiberJW/react-native-app-link
I have seen a lot of tutorials on creating music which can be activated with a button but not on creating background music without a button. Is it possible to create background music which play throughout the app?
I use this link for https://www.youtube.com/watch?v=MpQ1sVku-D0&t=482s to make background music in the page where it is connected to all the route in my app. If yours is local file, go to https://www.youtube.com/watch?v=MpQ1sVku-D0&t=482s and just change the audioclips based on video.(The coding is the same other than it uses url).
This is part of the code to play without using button that need to modify since video mention button.
Hope this helps!
I've got an application in React Native to be developed in Android and iOS, in which I'd like to take the camera stream, make some processing, and render it multiple times.
Imagine an app like Instagram, in which you can add filters to the camera live and it shows the applied filters with on live previews. It would be more or less the same.
I need to get the camera stream and be able to show it on screen multiple times.
I've tried react-native-camera, but it only lets me to get one instance of the camera to be shown.
With this same library, I've tried to take pictures in intervals of the camera and to render them via <Image> container but, of course, it's a performance kill and the app ends up crashing.
How can I achieve what I'm trying to do? Do you know of any module or any approach that allows me to do so?
Thank you.
I am building an app with tab bar using react native's NavigationExperimental API based on the example from github.
One thing I noticed is that tabs' UI states are not preserved when switching between tabs.
All state including fetched data, scroll position, other UI states, etc., are lost when I switch away from one tab to another.
As a result, it ends up refetching the data, and renders everything from the scratch.
The only thing that is preserved is the current navigation state tree.
This is not true for native apps. Native apps keep every state (data, scroll position and other UI states) so that the switch feels instant and lightweight avoiding any network calls or re-renderings.
How can this be implemented in react native?
I was thinking hiding and showing like display: 'none', but display is not available in react-native.