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

Snackbar dosent wrap long text to multiline, if children is a view with icon + text

Open jimitshah-dp opened this issue 3 years ago • 7 comments

Is your feature request related to a problem? Please describe. If Snackbar in V5.0.0-rc.4, is given a view which contains Left aligned icon and right aligned Text, and if the text is long, it doesn't wrap to next line and it overflows out of snackbar

Describe the solution you'd like It should behave same as when we only give text, by default it wraps to next line.

Describe alternatives you've considered If its not wrapped in a view, the icon and text renders, but the alignment are off, as it does not adhere to any margin props between icon and text

Additional context Example Code: <Snackbar> <View style={{ flexDirection: 'row', alignItems: 'center', }} > <Icon name={iconToUse} size={20} style={[styles.mr14, containerClasses]} /> <Text>Error Message which is veryyyy longggggggg</Text> </View> </Snackbar>

Screenshot 2022-09-07 at 12 48 31 AM

jimitshah-dp avatar Sep 06 '22 19:09 jimitshah-dp

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 Sep 06 '22 19:09 github-actions[bot]

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 Sep 06 '22 19:09 github-actions[bot]

react-native: "0.68.2", react-native-paper: "5.0.0-rc.4", react-native-vector-icons: : "9.2.0",

jimitshah-dp avatar Sep 06 '22 19:09 jimitshah-dp

Hey @jimitshah-dp, could you please provide the snack presenting the issue?

lukewalczak avatar Sep 06 '22 20:09 lukewalczak

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

github-actions[bot] avatar Sep 06 '22 20:09 github-actions[bot]

@lukewalczak here is the demo, try on android https://snack.expo.dev/EYNfxoKLd

Let me know if you need anything else

jimitshah-dp avatar Sep 07 '22 10:09 jimitshah-dp

Material Design documentation indicates that containing an icon/image in the Snackbar is the wrong approach:

image

Through analysis of the Snackbar component code, I think it was crafted to accept only string or Text component, that's why placing the View inside the Snackbarmay not work correctly.

We will internally discuss it and it will be considered in the nearest future.

lukewalczak avatar Sep 12 '22 08:09 lukewalczak