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
Related
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});
I've tried to run my react-native application on real device after makin it for iOS and Android emulators and found some problem. All components I tried to align by parent flex are without last one symbol or word. Even RNNavigation tabbar have troubles with displaying text.
Also items inside of flex justified at center are displaced to top of parent. Maybe who knows, where is my mistake or how to fix it?
Differences between devices
Left: Xiaomi mi9t with custom rom PixelPlus UI android 11
Right: Emulator Pixel_2_api SDK 29
PS: Now only one device has this bugs
Can‘t tell exactly whats wrong With just a screenshot.
I guesst the tab have an incorrect flex value
The Textinput might have a padding
The search bar at the bottom doesn‘t have padding
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.
React Native Victory charts : onPress or onPressIn is not triggered in android. however it is OK in iOS.
Can anyone help me regarding this.
I found out (by reading other stackoverflow issues addressing similar problems) that wrapping the whole VictoryChart in an <Svg>...</Svg> solves this issue on Android and on the other hand keeps the onPress functionality on iOS. The only thing I realized on top was that I had to give the Svg a style={{height: XXX}} where XXX is the same height than the VictoryChart has. Otherwise the wrapping Svg would be gigantic high.
Explanation: I am learning a React Native framework. I installed the application in my phone. It's working fine. I want to know how react native will manage the design when device density changed.
Similarly, In Native Android we provides the different resource for the phone devices and tablet devices. We also manage the layout file for the tablet and phone for portrait and landscape. When our application run on the device whether it a phone or tablet it will automatically get their best suited resources according to the tablet or phone.
I have little bit stuck when i starting the development in react native.
How react native handle the text size?
How it can manage the design screen when it's running on the phone or tablet?
How it can manage the images resources in different density devices?
Is there any strategy where we can manage everything like Native Android?
Please, help me solve out.
You can use flexbox for this.
for example.
flex: 1 is full width
flex: 0.5 is half
so you can do something like this.
All dimensions in React Native are unitless, and represent density-independent pixels
For images you can do imagename#2x imagename#3x
details are here https://facebook.github.io/react-native/docs/images.html
<View style={{ flex: 1 }}>
<View style={{ flex: 0.5 }} />
<View style={{ flex: 0.5 }} />
</View>
This will create a row with 2 columns in it. and this will be responsive.
You can check the docs on PixelRatio, there are several methods to deal with different dpis and fontScalings.
Additionally you might want to look into https://github.com/marudy/react-native-responsive-screen which
is a small library that provides 2 simple methods so that React Native
developers can code their UI elements fully responsive. No media
queries needed.