Alert when trying to use Drawer Navigation

Question

I ask that friends try to do the following.

Start an React Native project (here I am using version 0.64.1), install the suggested dependencies for using React Navigation (here I am using version 5.9.4) (source https://reactnavigation.org/docs/getting-started)

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Once done, install the Drawer dependency and play the example of Drawer Navigation on https://reactnavigation.org/docs/drawer-based-navigation.

npm install @react-navigation/drawer

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Here it works perfect, BUT I always get the following WARN "If you want to use Reanimated 2 then go through our installation Steps".

Well, as you can see in this example, I don’t use Reanimated 2, at most I install the React-Native-reanimated as suggested by the documentation.

So why is the alert? Everything works normal, but it sucks to get an alert and not know the reason. Does it also happen to you? Have you noticed this?

Answer 1

The fact is that some React Navigation packages use React Reanimated, such as Drawer and Material Top Tabs.

"Reanimated 2 is mainly built on C++ using the infrastructure of Turbo Modules that has not yet been fully deployed in React Native (specifically on Android), the installation of the new Reanimated requires additional steps besides just adding a dependency to package.json." Source: "https://docs.swmansion.com/react-native-reanimated/docs/installation/"

In the source cited above also comes the step by step of these additional steps. Done this finally the alert stopped!!!