react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

How to use custom Appbar.BackAction type in Appbar?

Open hbriese opened this issue 3 years ago • 3 comments

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

hbriese avatar Aug 03 '22 04:08 hbriese

Couldn't find version numbers for the following packages in the issue:

  • react-native
  • react-native-paper
  • react-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.

github-actions[bot] avatar Aug 03 '22 04:08 github-actions[bot]

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.

github-actions[bot] avatar Aug 03 '22 04:08 github-actions[bot]

Couldn't find version numbers for the following packages in the issue:

  • react-native
  • react-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?

github-actions[bot] avatar Aug 03 '22 04:08 github-actions[bot]

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.

github-actions[bot] avatar Sep 03 '22 02:09 github-actions[bot]

Hey @hbriese, could you please describe or present visually what are you trying to achieve?

lukewalczak avatar Sep 05 '22 12:09 lukewalczak

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

hbriese avatar Sep 19 '22 23:09 hbriese

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>

image

Doesn't work (any other mode)

<Appbar.Header mode="large">
    <Appbar.Action icon="menu" />
    <Appbar.Content title="Title" />
</Appbar.Header>

image

hbriese avatar Oct 07 '22 00:10 hbriese

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

hbriese avatar Jan 09 '23 01:01 hbriese