Material3 theme in styles.xml. For example,
<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">- That's all the setup you need in the current React Native architecture. The next section goes through the setup for the new architecture (Fabric). -
-
- The Navigation router supports the new React Native architecture.
- Enable it on Android by setting newArchEnabled=true in the android/gradle.properties file. Enable it on iOS by running cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..
-
- Currently React Native Fabric doesn't autolink 3rd party libraries on Android. The following steps go through how to manually link the navigation-react-native package. These steps are only needed on the new architecture.
-
Update 2 lines in android/app/build.gradle file (note the trailing comma on the first line).
"REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
- "NODE_MODULES_DIR=$rootDir/../node_modules"
-cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
-Add a line to the android/app/src/main/jni/Android.mk file.
# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
-include $(NODE_MODULES_DIR)/navigation-react-native/android/build/generated/source/codegen/jni/Android.mk
-include $(CLEAR_VARS)
-And update 2 lines in android/app/src/main/jni/Android.mk.
LOCAL_C_INCLUDES := $(LOCAL_PATH) $(NODE_MODULES_DIR)/navigation-react-native/cpp
-LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp) $(wildcard $(NODE_MODULES_DIR)/navigation-react-native/cpp/react/renderer/components/navigation-react-native/*.cpp)
-LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
-
-And add 3 lines to android/app/src/main/jni/Android.mk.
libreact_codegen_rncore \
-libreact_codegen_navigation-react-native \
-libreact_render_mapbuffer \
-libreact_render_imagemanager \
-libreact_debug \
-Add 6 lines to the android/app/src/main/jni/MainComponentsRegistry.cpp file.
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
-#include <react/renderer/components/navigation-react-native/ComponentDescriptors.h>
-#include <react/renderer/components/navigation-react-native/NVActionBarComponentDescriptor.h>
-#include <react/renderer/components/navigation-react-native/NVBarButtonComponentDescriptor.h>
-#include <react/renderer/components/navigation-react-native/NVSearchBarComponentDescriptor.h>
-#include <react/renderer/components/navigation-react-native/NVTabBarItemComponentDescriptor.h>
-#include <react/renderer/components/navigation-react-native/NVTitleBarComponentDescriptor.h>
-#include <react/renderer/components/rncore/ComponentDescriptors.h>
-And add 23 lines to android/app/src/main/jni/MainComponentsRegistry.cpp. One for each component.
// providerRegistry->add(concreteComponentDescriptorProvider<
-// AocViewerComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVActionBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVBarButtonComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVBottomAppBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVBottomSheetComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVCollapsingBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVCoordinatorLayoutComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVExtendedFloatingActionButtonComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVFloatingActionButtonComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVNavigationBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVNavigationStackComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVSceneComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVSearchBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVSharedElementComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVStatusBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabBarItemComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabBarPagerComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabBarPagerRTLComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabLayoutComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabLayoutRTLComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTabNavigationComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVTitleBarComponentDescriptor>());
-providerRegistry->add(concreteComponentDescriptorProvider<NVToolbarComponentDescriptor>());
-return providerRegistry;
-Add a line to the android/app/src/main/jni/MainApplicationModuleProvider.cpp file.
#include <rncore.h>
-#include <navigation-react-native.h>And add 4 lines to the android/app/src/main/jni/MainApplicationModuleProvider.cpp file.
auto module = navigation_react_native_ModuleProvider(moduleName, params);
-if (module != nullptr) {
- return module;
-}
-
-return rncore_ModuleProvider(moduleName, params);
-
+ The setup on the new React Native architecture is identical except you have to enable the new architecture when you run pod install.
+
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..