Examples using in the video

Hello!

Thank you for reaching out and for your interest.

To achieve a custom toast, you can utilize the renderContent function, which allows for full customization of the toast's content. This function can be used in two ways:

Pass renderContent as an argument to showToastable: When you want to display a custom toast on a case-by-case basis, you can directly pass the renderContent function when calling showToastable. This method is useful for displaying different custom content based on specific conditions in your app.

Here's a basic example of how you can use it:

export default function HomeScreen() {
    return (
        <View style={{flex:1}}>
            <Button
                title="Show Toastable"
                onPress={() => showToastable({ 
                message: 'React Native Heroes is awesome! 🚀', 
                status:'success'
                renderContent: (props) => (
                    <View>
                      {/* Your content here */}
                    </View>
                 })}
            />
        </View>
    );
}

Define renderContent directly on the <Toastable /> component: If you have a custom toast that you'd like to use throughout your application, you can define the renderContent directly as a prop of the <Toastable /> component. This will apply your custom content every time a toast is shown, without needing to specify it each time.

Example:

export default function RootNavigation() {
    return (
        <View style={{ flex:1 }}>
            <NavigationContainer />
            <Toastable
                statusMap={{
                    success: 'red'
                    danger: 'yellow'
                    warning: 'green'
                    info: 'blue'
                }}
                offset={top}
                position="top"
                renderContent={(props) => (
                    <View>
                      {/* Your content here */}
                    </View>
              )}
            />
        </View>
    );
}

Please ensure that the Toastable component is placed at the root of your application and that you've correctly imported and utilized the showToastable and hideToastable functions as needed within your screens or components.

If you have any further questions or need more detailed examples, please feel free to ask.

rnheroes / react-native-toastable

Examples using in the video #8