CODEWITHSUNDEEP
react-native
yavg
yavg

Reputation: 3051

How to call my toast (native-base) anywhere of my code?

I am using base-native (https://docs.nativebase.io/Components.html#toast-def-headref) with this code a toast is generated.

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!',
          buttonText: 'Okay'
        })}>
        <Text>Toast</Text>
      </Button>
    </Content>
  </Container>
 );
 }
}

I want to call it from anywhere in my code, for example

handlerToast= ()=>{
 Toast.show({
  text: 'Wrong password!',
  buttonText: 'Okay'
 })
}

If I put it into a function I get errors,like this:

enter image description here

<Button onPress={()=> this.handlerToast()}
</Button>

what can I do?

Upvotes: 0

Views: 1399

Answers (2)

Vaibhav Joshi
Vaibhav Joshi

Reputation: 11

In recent version of native-base NativeBaseProvider is used instead of Root

import {NativeBaseProvider} from 'native-base';
   export default () =>
     <NativeBaseProvider>
       <App/>
     </NativeBaseProvider>;

Upvotes: 1

Kishan Bharda
Kishan Bharda

Reputation: 5690

As described in native base doc :

For Toast to work, you need to wrap your topmost component inside from native-base.

So, wrap your topmost component with native base <Root> as below :

import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
const AppNavigator = StackNavigator(
  {
    Page: { screen: Page },
  }
);
export default () =>
  <Root>
    <AppNavigator />
  </Root>;

Upvotes: 4

Related Questions