I have a screen on which I need to place a transparent round image , the position of the image could be dynamic, I need to render the dynamic view excluding the image with a black overlay colour, such that image and the screen contents below the image remains same... Kind of like when there is an app tutorial , only the required portion is highlighted and the remaining screen is dull..
How can I do it ?
Related
I'm making an app with react native, expo, bottom-tab-bar navigation package, and expo-screen-orientation package.
The app is for reading some text that is inside some View elements in the middle of the screen, and is controlled with the bottom tab bar.
When I rotate the phone, and change the screen orientation (portrait-landscape), it kind of messes with the UI layout.
What I'd like to achieve, is to only have the View element that contains the readable text to rotate when the phone changes orientation, but the rest of the app (The bottom tab bar, background, buttons, etc.) to stay in the 'portrait' orientation.
What I've tried so far is this:
I've tried to lock the screen to portrait with
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
and then listening to orientation changes with eventListeners, Dimentions, useWindowDimentions, and expo-screen-orientation's ScreenOrientation.AddOrientationChangeListener(Listener),
and then maybe rotating the View element manually.
But if the screen is locked and not rotated, the change is not detected.
I've looked but couldn't find an answer.
I want when I touch the image, at that position will show the icon at the touch position, and maybe when zooming, the icon can be enlarged accordingly. In short, I want the icon to stick at that position, but when the image is zoomed or moved, the icon also zooms or moves.
Also is there any way when we take a picture from the phone to get the exact size of it
i tried by position, but i wonder if there is any way that can be attached to it, i want it to always be in that position no matter what the picture is. Help me
As shown in the attached gif, the navigation bar at the bottom and the URL bar at the top are pushed in and out(not just show/hide at once) of view as user scrolls. How can I achieve this 'hiding' effect in React Native? The key point is that the hiding speed of the component should correspond to the scrolling speed.
I have tried giving negative values to the top and bottom, like so:
style={{bottom:dynamicallyChangingScrolledValue()}}
although it does push the view out of the screen, space where the component used to remain in the blank, occupied.
Are they using animations here? or changing some offset value dynamically by incrementing a small amount?
I have a scrollView with a single Image in it. Initially the Image has the same width & heigth as the ScrollView.
I am trying to crop this image based on how the user have zoomed and moved the image. Basically, I want to know what part of the image is visible, so that I can crop it accordingly.
Im using expo's ImageManipulator to crop it, so I have that part covered. But to get the dimensions of what part of the Image is visible after zoom/drag is whats bugging me.
Much appreciated!
The logic here is to first fill the Image component inside the size of the ScrollView. This way, the size of the image will be equal to the size of the ScrollView.
First, you need to set directionalLockEnabled prop to false and horizontal prop to true to make the ScrollView scroll horizontally.
Then, set maximumZoomScale and minimumZoomScale props to make your ScrollView zoomable. Now, every time you zoom and scroll in your ScrollView it will fire onMomentumScrollEnd and onScrollEndDrag with the event parameter from which you can get the visible part of your ScrollView which is usually,
event.nativeEvent.contentOffset
event.nativeEvent.contentSize
event.nativeEvent.layoutMeasurement
Since your Image Component size is same as that of the ScrollView Component, it will give you the exact visible area of the image in the ScrollView.
For Detailed implementation example, you can refer to this file of the react-native-community/react-native-image-editor repository
I am new to React-Native and I have been following this tutorial, http://mindthecode.com/getting-started-with-the-panresponder-in-react-native/ along with this How to make draggable remember it's location in React Native , which create a draggable image that remember the current location.
I want to know if it is possible to create a draggable image with a pinch gesture for zooming in and out (that doesn't goes back to the original size or position).