I have a application in React Native, and I'm applying some rotation effects to my drawer, in my application running on the phone, everything works perfectly, but when I migrate to react-native-web it doesn't work correctly, as you can see in the image below, the difference which stays on the screens when it runs on a cell phone and when it runs on the web.
In the web, when the drawer is closed, it still applies the rotation effect, that's doesn't could happen. I put my project into codesandbox.io
To correct this problem, I tried to use Animated.concat(), but it still didn't work:
<Animated.View
style={[
styles.animatedView,
{
borderRadius: "50px",
transform: [
{ rotate: Animated.concat("-8deg") },
{ translateX: Animated.concat("70px") },
{ translateY: Animated.concat("20px") }
]
}
]}
>
<Stack.Navigator
screenOptions={{
headerTransparent: true,
headerTitle: null,
headerTitleAlign: "left",
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<View style={styles.screenOptionsView}>
<Image
source={require("../assets/images/menu.png")}
style={styles.screenOptionsImage}
/>
<Text style={styles.screenOptionsText}>START</Text>
</View>
</TouchableOpacity>
)
}}
>
<Stack.Screen name="Start" component={Start} />
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Favorites" component={Favorites} />
<Stack.Screen name="Orders" component={Orders} />
</Stack.Navigator>
</Animated.View>Do you know how I can make it work on the web as well as it works on mobile?
Thank you very much in advance!!!!