react-native-paper
react-native-paper copied to clipboard
Snackbar dosent wrap long text to multiline, if children is a view with icon + text
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>
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-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.
react-native: "0.68.2", react-native-paper: "5.0.0-rc.4", react-native-vector-icons: : "9.2.0",
Hey @jimitshah-dp, could you please provide the snack presenting the issue?
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.
@lukewalczak here is the demo, try on android https://snack.expo.dev/EYNfxoKLd
Let me know if you need anything else
Material Design documentation indicates that containing an icon/image in the Snackbar is the wrong approach:
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.