when use the component mode with react-native-modal, negative position is not working

[glacjay]

positive and zero position is working as expected

[jiyeon-dino]

遇到相同的问题，请问解决了吗？

[greedbell]

react-native-root-toast is in the same UIViewController or Activity, and react-native-modal create a new UIViewController or PopupWindow, so react-native-modal must be on the react-native-root-toast, to solve this, support you to use react-native-top-modal

[glacjay]

Here is my testing code:

import React from 'react';
import {
  Button,
  Text,
  View
} from 'react-native';

import Modal from 'react-native-modal'
import Toast from 'react-native-root-toast'

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      modalVisible: false,
      toastVisible: false,

      topToastVisible: false,
      middleToastVisible: false,
      bottomToastVisible: false,
    }
  }

  render() {
    return (
      <View style={{borderWidth: 5, borderColor: 'red'}}>
        <Text>Welcome to React Native!</Text>
        <Button title="show modal" onPress={() => {
          this.setState({modalVisible: true})
        }} />
        <Button title="show toast" onPress={() => {
          Toast.show('toast', {
            duration: Toast.durations.LONG,
            position: Toast.positions.BOTTOM,
            backgroundColor: 'red',
          })
          this.setState({toastVisible: true})
          setTimeout(() => this.setState({toastVisible: false}), Toast.durations.LONG)
        }} />
        <Toast
          visible={this.state.toastVisible}
          position={-20}
          animation={true}
        >
          modal toast
        </Toast>

        <Modal
          visible={this.state.modalVisible}
          onRequestClose={() => this.setState({modalVisible: false})}
          style={{
            height: 300,
            justifyContent: 'flex-end',
            margin: 0,
            borderWidth: 2,
            borderColor: 'blue',
          }}>
          <View style={{height: 200, backgroundColor: '#eee'}}>
            <Button title="show toast directly" onPress={() => {
              Toast.show('modal toast', {
                duration: Toast.durations.LONG,
                backgroundColor: 'red',
              })
            }} />
            <Button title="show toast at top" onPress={() => {
              this.setState({topToastVisible: true})
              setTimeout(() => this.setState({topToastVisible: false}), Toast.durations.LONG)
            }} />
            <Toast
              visible={this.state.topToastVisible}
              position={40}
              animation={true}
            >
              top toast
            </Toast>
            <Button title="show toast at middle" onPress={() => {
              this.setState({middleToastVisible: true})
              setTimeout(() => this.setState({middleToastVisible: false}), Toast.durations.LONG)
            }} />
            <Toast
              visible={this.state.middleToastVisible}
              position={0}
              animation={true}
            >
              middle toast
            </Toast>
            <Button title="show toast at bottom" onPress={() => {
              this.setState({bottomToastVisible: true})
              setTimeout(() => this.setState({bottomToastVisible: false}), Toast.durations.LONG)
            }} />
            <Toast
              visible={this.state.bottomToastVisible}
              position={-40}
              animation={true}
            >
              bottom toast
            </Toast>
          </View>
        </Modal>
      </View>
    );
  }
}

You can try to open the modal and see that, the toast at top and middle can show up, while the toast at bottom can't show.

[kaixiniOSTT]

react-native-dialog-component may a good try

[futuresnail]

            <Modal
                isVisible={this.state.showAlertModal}
                style={{margin:0, flex:1, flexDirection:'row'}}
                useNativeDriver
            >
                {
                    this.state.showAlertModal &&
                    <ToastContainer
                        visible={toastText.length > 0}
                        position={Toast.positions.CENTER}
                        shadow={true}
                        animation={true}
                        hideOnPress={true}
                        onHide={()=>this.setState({toastText:''})}
                    >{toastText}</ToastContainer>
                }
            </Modal>