Toast dosen't show in android in RN6.2.0

[liwenkangatom]

ios is work only anroid.like eact-native-root-sibling problem #

[sunnylqm]

magicismight/react-native-root-siblings#62 (comment)

[Merlier]

I have the same issue.
Since the upgrade to RN0.62.2, toast doesn't show in both calling api or component.

There's something when you fix, in the code below, the useState "isVisible" to true at the start, the toast is shown one time and then no more when you click the button.

Packages:

npmPackages:
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-root-toast": "^3.2.1"

Code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import React, {useState} from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import Toast from 'react-native-root-toast';

function HomeScreen(props) {
  const [isVisible, setVisible] = useState(false);
  return (
    <View>
      <Button
        title="TEST"
        onPress={() => {
          setVisible(!isVisible);

          // Add a Toast on screen.
          let toast = Toast.show('Success', {
            backgroundColor: 'green',
            opacity: 1,
            duration: Toast.durations.LONG,
            position: Toast.positions.BOTTOM,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 0,
            onShow: () => {
              // calls on toast\`s appear animation start
            },
            onShown: () => {
              // calls on toast\`s appear animation end.
            },
            onHide: () => {
              // calls on toast\`s hide animation start.
            },
            onHidden: () => {
              // calls on toast\`s hide animation end.
            },
          });
        }}
      />
      <Toast
        visible={isVisible}
        position={50}
        shadow={false}
        animation={false}
        hideOnPress={true}>
        This is a message
      </Toast>
      <Text style={{textAlign: 'center'}}>
        {isVisible ? 'Toast visible' : 'Toast hidden'}
      </Text>
    </View>
  );
}

const App: () => React$Node = () => {
  return <HomeScreen />;
};

const styles = StyleSheet.create({});

export default App;

[tuladharjaa]

Yes I am also having the same problem on RN 0.62.2

[cybercoder]

me too.

[Merlier]

I've found a temporary solution. As the issue comes from the react-native-root-siblings module and the ToastContainer component is exported (see here), we can just use the ToastContainer component.

Code example:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import {ToastContainer} from 'react-native-root-toast';

function HomeScreen(props) {
  const [isVisible, setVisible] = useState(true);

  return (
    <View>
      <Button
        title="TEST"
        onPress={() => {
          setVisible(!isVisible);
        }}
      />
      <ToastContainer
        visible={isVisible}
        backgroundColor={'red'}
        opacity={1}
        shadow={true}
        animation={true}
        hideOnPress={true}
        delay={0}
        onHidden={() => {
          console.log('onHidden');
        }}>
        This is a message
      </ToastContainer>
      <Text style={{textAlign: 'center'}}>
        {isVisible ? 'Toast visible' : 'Toast hidden'}
      </Text>
    </View>
  );
}

const App: () => React$Node = () => {
  return <HomeScreen />;
};

const styles = StyleSheet.create({});

export default App;

[BeardedUncle]

me too.

[sunnylqm]

Nobody see this? #124 (comment)

[liukefu2050]

I fix it use wrap the App.js

import {RootSiblingParent} from 'react-native-root-siblings'

        <Provider store = {store} >
            <RootSiblingParent>
                <App />
            </RootSiblingParent>
        </Provider>

thanks @sunnylqm

[ShepelE]

I've paid my attention that in my case toasts are not shown only for android dev build. So I can debug toasts on ios, and then they are shown for both platforms in prod build

Hope that will help you

[huaiguoguo]

me too

[huaiguoguo]

I fix it use wrap the App.js

import {RootSiblingParent} from 'react-native-root-siblings'

        <Provider store = {store} >
            <RootSiblingParent>
                <App />
            </RootSiblingParent>
        </Provider>

thanks @sunnylqm

thanks , its working, but why ?

[rockvic]

I fix it use wrap the App.js

import {RootSiblingParent} from 'react-native-root-siblings'

        <Provider store = {store} >
            <RootSiblingParent>
                <App />
            </RootSiblingParent>
        </Provider>

thanks @sunnylqm

thanks, it's working for me.

[irondsd]

I fix it use wrap the App.js

import {RootSiblingParent} from 'react-native-root-siblings'

        <Provider store = {store} >
            <RootSiblingParent>
                <App />
            </RootSiblingParent>
        </Provider>

thanks @sunnylqm

It worked for me as well. Even though I don't like that I have to install a separate library only to fix an issue. I hope it gets fixed.

[sunnylqm]

It's not a separate library. It's a dependency.

[nympheastudio]

i still have the problem. so for now i do this 👍
let m="message";"ios"===Platform.OS?Toast.show(m,Toast.SHORT):ToastAndroid.show(m,ToastAndroid.SHORT);