Giter VIP home page Giter VIP logo

Comments (6)

MAKARD avatar MAKARD commented on June 20, 2024 2

Humm interesting. I'll try that.

You can also try https://github.com/MAKARD/react-native-toastboard. Pretty similar to this package, and you can also fully control the layout

from react-native-toast-message.

karolChorzepa avatar karolChorzepa commented on June 20, 2024 1

Is one way, set undefined in height, may is good idea to add this to docs ?
xport const notificationToastConfig = { info: (props) => ( <BaseToast {...props} style={{ height: undefined, maxHeight: 200, paddingVertical: 5 }}

from react-native-toast-message.

correadevuk avatar correadevuk commented on June 20, 2024 1

if it helps someone

import React from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";

// BaseToast styles
const HEIGHT = 60;
const WIDTH = "100%";
const BORDER_RADIUS = 5;

const styles = StyleSheet.create({
  base: {
    flexDirection: "row",
    height: HEIGHT,
    width: WIDTH,
    borderRadius: BORDER_RADIUS,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: BORDER_RADIUS,
    elevation: 2,
    backgroundColor: "#FFF",
  },
  leadingBorder: {
    borderLeftWidth: 5,
    borderLeftColor: "#D8D8D8",
  },
  contentContainer: {
    paddingHorizontal: 25,
    flex: 1,
    justifyContent: "center",
    alignItems: "flex-start",
  },
  text1: {
    fontSize: 12,
    fontWeight: "bold",
    marginBottom: 2,
    color: "#000",
    width: "100%",
  },
  text2: {
    fontSize: 10,
    color: "#979797",
    flexShrink: 1,
  },
});

const CustomBaseToast = ({ text1, text2, onPress }) => {
  return (
    <Pressable onPress={onPress} style={[styles.base, styles.leadingBorder]}>
      <View style={styles.contentContainer}>
        <Text style={styles.text1}>{text1}</Text>
        <Text style={styles.text2}>{text2}</Text>
      </View>
    </Pressable>
  );
};

export const toastConfig = {
  error: (props) => <CustomBaseToast {...props} />,
};

in app.js

<Toast config={toastConfig} />

from react-native-toast-message.

AbThy avatar AbThy commented on June 20, 2024 1

If you look around in the src/components/BaseToast.tsx component, you can find the following property: text1NumberOfLines and text2NumberOfLines. These limit the maximum number of lines that can be rendered inside the component and is defaulted to 1.

Based on the longest text that should be displayed, set these values to higher numbers. Also note that this does not change the height of the component (so you can go as high as you want). Setting the height to undefined, minHeight to a desired number and adding some padding will create the final look desirable.

Hope this helps!

from react-native-toast-message.

bj97301 avatar bj97301 commented on June 20, 2024

if there's no way to do this feel free to use this pr:
#475

from react-native-toast-message.

bj97301 avatar bj97301 commented on June 20, 2024

Humm interesting. I'll try that.

from react-native-toast-message.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.