CODEWITHSUNDEEP
react-nativenative-base
galgo
galgo

Reputation: 764

React Native Base Toast error

I have the following React Native App set up and I'm trying to use the Toast component from Native Base:

app.js

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import { Root } from "native-base";
import {StackNavigator} from 'react-navigation';
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';

export default class myApp extends Component {

render() {
  return (
    <Root>
    <AppNavigator />
  </Root>
  );
}
}
const Screens = StackNavigator({
  Main: {screen: MainView},
  Config: {screen: ConfigView}
})

AppRegistry.registerComponent('myApp', () => Screens);

MainView.js (simplified)

import React, {Component} from 'react';
import { StyleProvider, Card, CardItem, Left, Right, Body, Icon, Toast, Header, Fab } from 'native-base';
import {StackNavigator} from 'react-navigation';

export default class MainView extends Component {
....
  showError = (msg, err) => {
    console.log("[ERROR]", err);
    Toast.show({
      text: msg,
      position: this.state.toastPosition,
      buttonText: this.state.toastErrorBtn
    });
  }
....
}

I've tried several ways, but keep getting this error:

error capture

Upvotes: 1

Views: 4084

Answers (2)

karthi
karthi

Reputation: 167

We should use Root component

import { Root } from "native-base";

<Root>
  // Screen
</Root>

Upvotes: 0

zarcode
zarcode

Reputation: 2485

Your app should start with rendering myApp component, like this: AppRegistry.registerComponent('myApp', () => myApp);.

Inside myApp you should render your app navigator which is Screens not AppNavigator, that is how you named it.

This is how your app.js should look:

import React, { Component } from 'react';
import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
import {AppRegistry} from 'react-native';

export default class myApp extends Component {

    render() {
      return (
        <Root>
            <Screens />
        </Root>
      );
    }
}
const Screens = StackNavigator({
    Main: {screen: MainView},
    Config: {screen: ConfigView}
})

AppRegistry.registerComponent('myApp', () => myApp);

Upvotes: 6

Related Questions