react-native-paper
react-native-paper copied to clipboard
How to use custom Appbar.BackAction type in Appbar?
Currently in Appbar, .type of the children is used to determine what the child is for e.g. AppbarBackAction
Is it possible to override a component's .type so that it can be picked up as the back action?
I can see how this would be done if a different property was used, such as displayName
AppbarBack.displayName = Appbar.BackAction.displayName;
| software | version |
|---|---|
| react-native-paper | 5.0.0-rc.3 |
Couldn't find version numbers for the following packages in the issue:
react-nativereact-native-paperreact-native-vector-icons
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.
Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).
Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.
Couldn't find version numbers for the following packages in the issue:
react-nativereact-native-vector-icons
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.
The versions mentioned in the issue for the following packages differ from the latest versions on npm:
react-native-paper(found:5.0.0-rc.3, latest:4.12.4)
Can you verify that the issue still exists after upgrading to the latest versions of these packages?
Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.
Hey @hbriese, could you please describe or present visually what are you trying to achieve?
Hey @hbriese, could you please describe or present visually what are you trying to achieve?
Currently it is not possible to render a large appbar header with a menu action in place of the back action, for instance.
Another basic example is using my own wrapper component as the back action. When using these wrappers, the Appbar header component will not correctly identify the wrapper component as the back action and thus will not layout the component in the correct area
Another basic example of this issue with images.
To repeat myself, there is no way to get the menu action to be shown in the place of the back action as BackAction.type is used to check and position for the component -- which can't be overridden
Works (small)
<Appbar.Header mode="small">
<Appbar.Action icon="menu" />
<Appbar.Content title="Title" />
</Appbar.Header>

Doesn't work (any other mode)
<Appbar.Header mode="large">
<Appbar.Action icon="menu" />
<Appbar.Content title="Title" />
</Appbar.Header>

This was incorrectly closed and is still not possible to achieve (using Appbar.Header)