callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.37k stars 2.04k forks source link

Appbar.Header require a deprecated library #4362

Open yhojann-cl opened 2 months ago

yhojann-cl commented 2 months ago

Have a single example using React Native Papper:

import React, { Component } from 'react';
import { Appbar, PaperProvider } from 'react-native-paper';

class App extends Component {

    render() {
        return (
            <PaperProvider>
                <Appbar.Header>
                    <Appbar.BackAction onPress={() => {}} />
                    <Appbar.Content title="Title" />
                    <Appbar.Action icon="magnify" onPress={() => {}} />
                    <Appbar.Action icon="dots-vertical" onPress={() => {}} />
                </Appbar.Header>
            </PaperProvider>
        );
    }
}

export default App;

When run says:

 ERROR  Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

This error is located at:
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by PaperProvider)
    in PaperProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in app(RootComponent), js engine: hermes

I found a manually patch to solve problem installing react-native-safe-area-context package: https://github.com/react-navigation/react-navigation/issues/8964

But when compile says:

Task :react-native-safe-area-context:processDebugManifest
package="com.th3rdwave.safeareacontext" found in source AndroidManifest.xml: /.../app/node_modules/react-native-safe-area-context/android/src/main/AndroidManifest.xml.
Setting the namespace via the package attribute in the source AndroidManifest.xml is no longer supported, and the value is ignored.
Recommendation: remove package="com.th3rdwave.safeareacontext" from the source AndroidManifest.xml: /.../app/node_modules/react-native-safe-area-context/android/src/main/AndroidManifest.xml.
...
Task :react-native-safe-area-context:compileDebugKotlin
w: file:///.../app/node_modules/react-native-safe-area-context/android/src/main/java/com/th3rdwave/safeareacontext/SafeAreaContextModule.kt:7:46 'ReactModule' is deprecated. Deprecated in Java

The Appbar.Header component require a deprecated non preinstalled library to work?

gedu commented 1 month ago

Hey, did you installed npm install react-native-safe-area-context? Did you try to add the SafeAreaProvider?

<SafeAreaProvider>
       <PaperProvider>
                <Appbar.Header>
                    <Appbar.BackAction onPress={() => {}} />
                    <Appbar.Content title="Title" />
                    <Appbar.Action icon="magnify" onPress={() => {}} />
                    <Appbar.Action icon="dots-vertical" onPress={() => {}} />
                </Appbar.Header>
         </PaperProvider>
</SafeAreaProvider>   
yhojann-cl commented 1 month ago

Yes, the package react-native-safe-area-context and use a safe area component but have a deprecated components and does not work all. Why not include by default the safe area and safe area context by default in the package if it is required to works?