toast in react native

//React Native Button element doesn't have style props and offers very //few customization. Use TochableXXX elements instead. //TouchableOpacity works fine import { TouchableOpacity, Text, } from "react-native"; <TouchableOpacity style={styles.button} onPress={this.onSubmit} disabled={!this.state.isFormValid} > <Text style={styles.btnText}>Add </Text> </TouchableOpacity> const styles = StyleSheet.create({ button: { width: 200, marginTop: 20, backgroundColor: "green", padding: 15, borderRadius: 50, }, btnText: { color: "white", fontSize: 20, justifyContent: "center", textAlign: "center", }, });

hooks in react

import React, { useState, useEffect } from "react";
export default props => {
  console.log("componentWillMount");
  console.log("componentWillReceiveProps", props);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [moveCount, setMoveCount] = useState(0);
  const [cross, setCross] = useState(0);
  const mouseMoveHandler = event => {
    setX(event.clientX);
    setY(event.clientY);
  };
  useEffect(() => {
    console.log("componentDidMount");
    document.addEventListener("mousemove", mouseMoveHandler);
    return () => {
      console.log("componentWillUnmount");
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []); // empty-array means don't watch for any updates
  useEffect(
    () => {
      // if (componentDidUpdate & (x or y changed))
      setMoveCount(moveCount + 1);
    },
    [x, y]
  );
useEffect(() => {
    // if componentDidUpdate or componentDidMount
    if (x === y) {
      setCross(x);
    }
  });
  return (
    <div>
      <p style={{ color: props.color }}>
        Your mouse is at {x}, {y} position.
      </p>
      <p>Your mouse has moved {moveCount} times</p>
      <p>
        X and Y positions were last equal at {cross}, {cross}
      </p>
    </div>
  );
};

Posted by: Guest on May-26-2020

Code answers related to "toast in react native"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "toast in react native"

Code answers related to "toast in react native"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us