How can I hide a lottie element after the animation finishes running?
I've tried playing the animation then playing from frame 0 to 0, but it isn't working.
Related
<ScrollView
onScroll={(event)=>{
const top = event.nativeEvent.contentOffset.y;
setTop(top);
}}
>
With my code above contentOffset y updated only when scroll ScrollView abruptly without holding my finger up to ScrollView but if I hold my finger up when scroll the contentOffset y doesn't updated.
I noticed this happening for all onScroll function.
What I want to achieve:
I want on scroll ScrollView contentOffset y update.
Using Animated.ScrollView instead of ScrollView maybe help you. Have a look at this https://eveningkid.medium.com/animated-and-react-native-scrollviews-de701f1b1ce5
I'm using the Reanimated library(2.2.0), and I have a fairly simple animation to expand a Animated.View , that I call when pressing a TouchableOpacity:
height.value = withTiming(calculatedHeight, {
duration: 300,
easing: Easing.inOut(Easing.ease),
});
On IOS is running very nice on 60fps, but on some Android phones like Samsung S20,S21 Ultra, the animation is lagging a lot. I tried it on an older Samsung(A5) and on it is running fine again. Any suggestions are appreciated.
Animate the Y scale instead of the height. left top width height are slow
i'm using createMaterialTopTabNavigator with a swipeEnabled set to True to navigate between screens, I have a Screen which contains an horizontal scrollView, the problems is that the scrollView isn't working, since whenever i try to scroll it horizontally the screen just changes to the next one.
I'd like to be able to disable the swipeEnabled when i swipe in the scrollView.
PS: i tried doing it dynamically by passing a variable to the Screen and a method that sets it to false using onTouchStart, but it's slower than the swiping event of the screen so it end up swiping to the next screen before onTouchStart event start.
i'm using CameraRoll.getPhotos for get photos from gallery.
import {
CameraRoll,
} from 'react-native';
CameraRoll.getPhotos(fetchParams).then((data) => {
});
I have a problem with the orientation of the images on some android phones. I have been able to detect what happens in most SAMSUNGs.
It has an orientation depending on the way you take the picture.
portrait with home button in bottom position: 90º
landscape with home button left position: 180º
portrait with home button in top position: 270º
landscape with home button right position: 0º
Related with this issue
Base on CameraRoll Documentation the orientation value is not returned by getPhotos.
I'm try with:
transform: [{ rotateX: '0deg' }, { rotateY: '0deg' }] or rotate: '0deg'
Using react-native-media-meta for get metadata info (not works)
Use another image component instead native Image
but notting works. :(
The problem is that the images appear rotated in my application, but in the native gallery ignores the degree of rotation they have and shows them correctly with 0º.
Example:
In this case the image appear with 90º and it's showed perfectly by native gallery but bad in my app.
- Is there any way to detect the current rotation of the image?
- Can the <Image> component be forced in some way to place the orientation at 0º?
UPDATE:
i found a library this module and its possible get the orientation of image and with that can fix this problem. But this process is very delayed and affect considerably the perfomance.
Consider this simple ScrollView.
On iOS, clicking on the text will but the text to the top because scrollTo({ y: 250 }) scrolls even if end of scrollView is reached.
On Android, the text doesn't move.
How to get on Android the same behavior we have on iOS?
You can work around this by adding padding to the contentContainerStyle of the ScrollView. A good starting point would be to add padding equal to the height of the device's screen.
import { Dimensions } from 'react-native';
const ANDROID_SCREEN_HEIGHT_PADDING = Dimensions.get('window').height;
then, when rendering:
<ScrollView
contentContainerStyle={{paddingBottom: ANDROID_SCREEN_HEIGHT_PADDING}}>
...
</ScrollView>
You could use this for necessary extra Android padding in every direction. If you are using horizontal={true}, for example, you could add padding equal to the width of the screen and add it to the paddingLeft style property to get the intended scrolling behavior on Android.
This behavior is due to the underlying implementation of ScrollView on Android in React-Native. See also:
React native Android ScrollView scrollTo not working