I am new in react-native, and I wanna to rotate entire screen manually in react-native, is it possible?
Inside application, on click button start screen goes in background with floating buttons and it start recording screen, I wanna to rotate screen manually from floating button which was in background. rotate screen over all application.
I have checked react-native-orientation and react-native-orientation-locker npm modules which works only on particular application screen rotation.
Is it possible in react-native or not?
Yes, it is possible to rotate your view based on your requirements. but for this, I think you have to manage it yourself.
You can achieve to by using the transform API.
refer to the official documentation for how to transform the layout.
https://reactnative.dev/docs/transforms
Related
I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app.
So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen
If you scroll down height expands and it acts as ordinary screen with presentation: "modal"
And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image)
That is the behaviour I am looking for.
If it is possible I would like to get similar behaviour on android as well.
I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.
You may try this library react-native-simple-bottom-sheet
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
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
My goal is to program a game assistant - app that runs on the background and does the following:
1) takes screenshot programmatically https://aboutreact.com/take-screenshot-programmatically/
2) analyzes some pixels of it
3) creates programmatical screen touches based on the screenshot
But I am not sure whether it is possible to use react native for creating screen touches. Any ideas? It appears to be possible in java, at least:
How to programmatically trigger the touch event in android?
Thank you!
It is possible to handle screen touches in react native using panResponder. You can more about it here:
https://facebook.github.io/react-native/docs/linking-libraries-ios
Also react-native have animated view that could be coupled by panResponder and I think it is applicable for you because you want to develop a game. You can read about react-native animations here:
https://facebook.github.io/react-native/docs/animations
Beside all of this if your game have many motions and is dependent to screen touches react-native maybe is not a good choice. Because react-native performance in such applications would be low. So I recommend be careful about the tech that you want to use.
I want to hide the screen splah of my app and i'm trying to do this with Cordova function navigator.splashscreen.hide() according to this
function wlEnvInit(){
wlCommonInit();
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("device is ready!");
navigator.splashscreen.hide();
}
}
I placed this code on android/js/myAppName.js and iphone/js/myAppName.js folders. It does not work. There is something wrong?
I assume what you're trying to do is to hide the splash image at a point in time based on your own preference? This is currently not possible.
Worklight bypasses Cordova's splash image mechanism as well as does not provide an API to manipulate its duration programmatically (= choose when to hide it). This is an area that is destined to change in a future release.
If what you're trying to do is to simply not show a splash image at all, then:
In iOS: this is not possible. The splash image is mandatory by Apple
In Android: simply delete the splash.9.png image file from the yourProject\apps\yourApp\android\native\res\drawable folder
BTW, I do not see the use for the deviceready listener, because if you've reached wlCommonInit, then the device (Cordova...) has already been initialized. The app would not have functioned otherwise.
For the time being, a workaround for it would be by replacing the Splash screen image with a complete white background screen/image.