I have a scorm content and I play it inside a webview in my react native application, but I want to change the style of the buttons which appear at bottom of the webview and which control stop/play/resume video ...
So is there a way to do that ?
There are a couple of ways you could approach this.
You can execute JavaScript directly on the WebView; so, you could use document.getElementById('...') to obtain a reference to the buttons you want to change, and then update the button styles, making sure to retain the onPress behaviour.
Slightly nicer; you could hide the buttons on the page altogether, and instead define some <Button />s inside of your React layout. In the onPress of your React buttons, you could execute the JavaScript you'd normally expect the WebPage buttons to execute. This would require figuring out how to trigger those handlers.
Both of these require some inspection, understanding and experimentation with the source you're trying to manipulate. I'd recommend opening up the page in your browser and using:
javascript:console.log('your');console.log('js');console.log('here);
inside your URL bar to find the commands you want to run before trying to pass them into the WebView. Alternatively, you can also inject JavaScript directly into the page if you use the browser's Inspector pane.
See: Execute JavaScript inside WebView source
Related
I have a react native app that we are implementing the react native web version using: React native web, the app uses the latests react native navigation library.
So far, mostly everything is working except for modals, the problem that i have is that when i open a modal, the URL path on web updates (I.E: from /signup if i open a modal it switch to /legalAgreementModal?QUERY_PARAMS....), so if i refresh the page the modal works but i can't close the modal anymore. I thought about adding a conditional on the modal to goBack if there is anything to go back to, but the problem is that i have too many modals that can go back to different screens so it will be a huge change if i have to add that logic to every modal.
My question is, is there a way to avoid modals to update my path? So if user refresh they lost the modal but they are on the original screen? Perhaps another workaround that you guys may know could help also!.
Thanks!
I tried adding a conditional on modal close action, adding empty string as the modal path.
I have the next layout on the page:
And I'm trying to add popup menu like on youtube mobile app:
but I can't place it above other elements. React Navive for web creates own stacking context for each block. So that z-index doesn't make any sense. Is there any ways how to handle that?
I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks
I am writing a custom component for a Windows 8.1 tablet application our team are mostly developing in React Native.
I've realised that some of the custom code we need doesn't naturally belong to any specific UI element. For example, we want a button to trigger the native Camera UI dialog (as in this CameraUICapture element sample). However, there's no reason this would necessarily be triggered from a button. It could be a callback from something else, it could be a click event on an image. I don't want to lock the function calls to a specific UI piece.
All the tutorials and demos I have managed to find so far for React Custom Components are explicitly for UI pieces, and require implementing a React View manager subclass to interact with React when the piece is loaded. Is this the only way to write native code accessible from a React page? Do I need at least a dummy UI element even to hook into functional code in the native layer, or is there another way?
It turns out the phrase I'm yearning for is "Native Modules".
iOS:
https://facebook.github.io/react-native/docs/native-modules-ios.html
Android:
https://facebook.github.io/react-native/docs/native-modules-android.html
Windows:
https://github.com/Microsoft/react-native-windows/blob/master/docs/NativeModulesWindows.md
I am new to React Native and want to be able to make my code where the user clicks on text and it takes them from an initial page and am very confused as to how I am supposed to do this and where to put what. Am I supposed to have separate files for separate pages? Thanks!
The Navigator or NavigatorIOS components are what you're looking for. Basically, your text elements need to be wrapped in an element like TouchableHighlight that has an onPress handler that utilizes the navigator.push() to navigate. Or you could jThis tutorial does a pretty good job describing how Navigation works on a basic level within React Native apps.
As to separate files for separate pages - it's not necessary, but as you develop your own custom components and your apps become more complicated, having them in separate files helps with keeping you