toast in react native

1//React Native Button element doesn't have style props and offers very 
2//few customization. Use TochableXXX elements instead.
3//TouchableOpacity works fine
4
5import {
6  TouchableOpacity,
7  Text,
8} from "react-native";
9
10<TouchableOpacity
11          style={styles.button}
12          onPress={this.onSubmit}
13          disabled={!this.state.isFormValid}
14        >
15          <Text style={styles.btnText}>Add
16			</Text>
17</TouchableOpacity>
18
19const styles = StyleSheet.create({
20
21  button: {
22    width: 200,
23    marginTop: 20,
24    backgroundColor: "green",
25    padding: 15,
26    borderRadius: 50,
27  },
28  btnText: {
29    color: "white",
30    fontSize: 20,
31    justifyContent: "center",
32    textAlign: "center",
33  },
34});

1import {ToastAndroid} from 'react-native' ;
2
3.... 
4
5ToastAndroid.showWithGravity(
6	"All Your Base Are Belong To Us",
7    ToastAndroid.SHORT,
8    ToastAndroid.CENTER
9);
10
11....

1import React, { useState, useEffect } from "react";
2export default props => {
3  console.log("componentWillMount");
4  console.log("componentWillReceiveProps", props);
5  const [x, setX] = useState(0);
6  const [y, setY] = useState(0);
7  const [moveCount, setMoveCount] = useState(0);
8  const [cross, setCross] = useState(0);
9  const mouseMoveHandler = event => {
10    setX(event.clientX);
11    setY(event.clientY);
12  };
13  useEffect(() => {
14    console.log("componentDidMount");
15    document.addEventListener("mousemove", mouseMoveHandler);
16    return () => {
17      console.log("componentWillUnmount");
18      document.removeEventListener("mousemove", mouseMoveHandler);
19    };
20  }, []); // empty-array means don't watch for any updates
21  useEffect(
22    () => {
23      // if (componentDidUpdate & (x or y changed))
24      setMoveCount(moveCount + 1);
25    },
26    [x, y]
27  );
28useEffect(() => {
29    // if componentDidUpdate or componentDidMount
30    if (x === y) {
31      setCross(x);
32    }
33  });
34  return (
35    <div>
36      <p style={{ color: props.color }}>
37        Your mouse is at {x}, {y} position.
38      </p>
39      <p>Your mouse has moved {moveCount} times</p>
40      <p>
41        X and Y positions were last equal at {cross}, {cross}
42      </p>
43    </div>
44  );
45};

1npm install react-native-simple-toast --save
2react-native link react-native-simple-toast // only RN < 0.60
3cd ios && pod install