What I have
I'm trying to create a header animation with Native Stack Navigator. The animation consists of changing the background color from transparent to light gray when the user scrolls down.
The problem
Although the animation works as expected on iOS, on Android the headerTransparent property is causing some issues as the animation is not displayed when the user scrolls down in Android.
Demo
I create a reproducible Snack to easily check the issue. if you run the application on Android and remove the headeTransparent property you will see that the animation now works.
The issue you're experiencing may be related to the way the animation is being set up. One potential problem is that you are setting the background color of the header using the 'interpolateColor' function, which may not work correctly on Android. Another issue may be that you are using the useAnimatedStyle hook to create the style for the header background, which may not work as expected on Android.
One solution that you may try is to use the useNativeDriver option when creating the animation.
const animateHeaderStyle = useAnimatedStyle(() => ({
backgroundColor: interpolateColor(
translationY.value,
[0, 200],
['transparent', 'lightgray'],
'RGB',
),
height: headerHeight,
}), [translationY], {useNativeDriver: true});
Related
I just created react native app with expo init, built for Android. When i open app in landscape mode and after turn to portrait, the height of app is half of screen. https://i.stack.imgur.com/kzIlD.jpg
Here is code: https://github.com/catalin935/reactNativeHeightBug/blob/master/App.js
It looks like your view has been initialised with a height, perhaps Dimensions.get('screen').height?
If you want the view to always fill the screen, add flex: 1 to the styles to get it to flex to it's container rather than using height/width values.
Alternatively, you could attach an event listener to Dimensions to listen for the change event and use that to rerender your views although I'd only really recommend that if you want your UI to change depending on the screen ratio/orientation (eg, set a FlatList to use two columns rather than one in landscape mode. I have a small library called react-native-screenutils that may help you with that.
For a Project I'm workin on, I need to create a component in which users can add entries to an array which lives in state, and a SectionList to display those entries. Also, I need the SectionList to scroll down to the latest entry right after it is entered. Please check out this snack for an example
The list itself displays all entries and updates after a new entry was added, but once the list contains more than the screen can display, it can only scroll down to the second last, and I really need to scroll to the last.
I tried numerous things, containing awaiting setState, defining contentContainerStyle, converting the whole thing to a VirtualizedList and ScrollView, everything I can think of, but I simply can't get it to scroll to the last entry.
Question: How can I get my SectionList to scroll to the last item, which is currently out of bounds of the SectionList component?
UPDATE
I know that this issue is caused by the SectionList not containing the item yet when scrollToLocation is called. The key to the solution seems to be to await the re-render of the list
UPDATE 2
SetState has a callback that does not solve this issue either. However, the solution in this comment works. The problem with it is that it only works in .js files, and I am working with .tsx files all over my project. How could I overcome this?
Apparently this is a bug in React-Native 0.59.6.
On android, when working in the completion block of setState, one needs to set a timeout of 0.2 seconds and after that, SectionList will scroll all the way down. However, the item that is supposed to be there isn't rendered yet and sometimes appears 0.5 seconds later, resulting in a really clunky feel.
I have posted an issue Here, and hope it will be fixed soon
I think the issue is much simpler than that and related to your style.
You ask the list to have height: Dimensions.get('window').height - 50 but this line does nothing since you cannot fix the height of the SectionList.
So you can remove it and add a margin instead:
list: {
top: 50,
marginBottom: 50,
},
I'm beginner in React Native and I want to ask one question. Every time I press reload in Expo and reload my project my MapView set the image with search and TextInput on top start. But it always random (I place pictures for that). I don't have idea what can I do to solve this. I googled, I try to change code to absolute, I try change flex but it don't work. Please can you help me with this?
It would be nice if you made your code available so we could understand how you set things up.
But from what you said, if by what I understood the problem is the positioning, you could try to use the absolute positioning. Here is the react documentation.
https://facebook.github.io/react-native/docs/layout-props#position
You can set absolute positioning at the top.
For example:
const styles = StyleSheet.create({
view: {
position: 'absolute',
top: 40,
}
})
In the link below, you have an example of use.
https://unbug.gitbooks.io/react-native-training/content/32_absolute_&_relative.html
I hope this helps you.
Hugs.
I have a flashcard app I created in React Native. It's currently in the app store for iOS and I'm currently working on the Android version. (Flash Crash)
In the app the user can swipe up or down to flip a flash card. The problem is that it uses BackfaceVisibility: 'hidden' and Android doesn't seem to support it. Is there an effective solution to work around this?
The only one I can think of is to change the opacity of the Animated.View to 0 when a card is flipped at and over 90 degrees. I will probably do it this way, but I wanted to see if a better programmer had other possible solutions. I'd like to know what my options are for the future if not for now.
There is a solution to use opacity to control the display of the back surface to get a quick 'flippable' card on android here: https://github.com/facebook/react-native/issues/1973#issuecomment-262059217
Animate the back surface's opacity
this.backOpacity = this.animatedValue.interpolate({ inputRange: [89, 90], outputRange: [0, 1] })
then use this for the animation
style=[otherStyles, { opacity: this.backOpacity,...}]
backfacevisibility should be supported for android in a react-native stable version soon.
https://github.com/facebook/react-native/pull/15970
I am creating an app in react-native and I'm having problem with the display.
I have a textinput in scrollview. When I tap on the textinput and it's focused, the display will go up and goes off screen.
I have seen the same issue posted in github.
Here is the link: Github issue posted by someone
This is the default behavior of they keyboard for Android. You have to manually change the android:windowSoftInputMode in AndroidManifest.xm to another option (adjustNothing is more iOS like). See the options here: https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft.
Also, keep in mind that keyboardWillShow() and keyboardWillHide() are not fired on Android, and if you opt to use adjustNothing, not even keyboardDidShow() or keyboardDidHide() are fired.
I would recommend keeping the default behavior of android:windowSoftInputMode, but use the keyboardDidShow() and keyboardDidHide() to manually adjust the ScrollView position.