react-native-toast-message icon indicating copy to clipboard operation
react-native-toast-message copied to clipboard

Different behaviour for Android and iOS number of lines

Open BernardoBF4 opened this issue 2 years ago • 2 comments

Describe the bug The Android version of my app can dispay more than 2 lines for the text1 prop, but the iOS can't. I've create a variable to be the number of lines depending on the text passed as the text1 prop.

Steps to reproduce Steps to reproduce the behavior:

  1. Create a customized error toast as specified in the code bellow.
  2. Try throwing errors that use the error toast with different number of lines, for both Android and iOS

Expected behavior I'd like the toast to grow in height and number of lines depending on the number of caracters that there are in the text.

Code sample This is how I am making the number of lines be compatible with the size of text:

const ErrorToast = props => {
  const number_of_lines = Math.ceil(props.text1?.length / 30) ?? 1;

  return (
    <BaseToast
      contentContainerStyle={styles.container}
      style={styles.box}
      text1Style={styles.title}
      text1NumberOfLines={number_of_lines}
      {...props}
    />
  );
};

This is the style:

const width = Dimensions.get('window').width;

const styles = StyleSheet.create({
  box: {
    borderLeftColor: colors.red,
    width: width - 20,
  },
  container: {
    paddingHorizontal: 15,
  },
  title: {
    color: 'black',
    fontFamily: fonts.bold700,
    fontSize: 15,
    fontWeight: 'bold',
    lineHeight: 20,
  },
});

Environment (please complete the following information):

  • OS: [iOS, Android]
  • react-native-toast-message version: ^2.1.5
  • react-native version: 0.64.2

BernardoBF4 avatar Aug 03 '22 14:08 BernardoBF4