Toast | next | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
next
🎉 Prompt to React Native UI
→
Search
⌘
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
If you are starting a new project, please try gluestack-ui for better performance and new design.
version: next
Toast
In v3, can be created using useToast hook
Overview
Migrating Toast components can broadly described in these points:
buttonText is no longer supported.
type (prop) → status prop.
position (prop) → placement prop.
Code Comparison
v2
v3
Copy
import React, { Component } from 'react';
import { Container, Header, Content, Toast, Button, Text } from 'native-base';
export default class ToastExample extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Button
onPress={() =>
Toast.show({
text: 'Wrong password!',
position: 'bottom',
type: 'warning',
})
}
>
<Text>Toast</Text>
</Button>
</Content>
</Container>
);
}
}
Nativebase logo
MadeWithNativeBase
Gluestack logo
gluestack-ui