Category: React

Categories
React Native Answers

How to open email client with React Native?

Labrador retriever puppy walking on green grass

To open email client with React Native, we call Linking.openURL to open the email address with the mailto URL.

For instance, we write

<Button
  onPress={() => Linking.openURL("mailto:support@example.com")}
  title="support@example.com"
/>;

to call Linking.openURL with the email URL.

Also, we can call it with a subject and body by writing

<Button
  onPress={() =>
    Linking.openURL(
      "mailto:support@example.com?subject=SendMail&body=Description"
    )
  }
  title="support@example.com"
/>;

We just add the subject and body into the URL as query parameters.

Categories
React Native Answers

How to open email client with React Native?

Labrador retriever puppy walking on green grass

To open email client with React Native, we call Linking.openURL to open the email address with the mailto URL.

For instance, we write

<Button
  onPress={() => Linking.openURL("mailto:support@example.com")}
  title="support@example.com"
/>;

to call Linking.openURL with the email URL.

Also, we can call it with a subject and body by writing

<Button
  onPress={() =>
    Linking.openURL(
      "mailto:support@example.com?subject=SendMail&body=Description"
    )
  }
  title="support@example.com"
/>;

We just add the subject and body into the URL as query parameters.

Categories
React Answers

How to use setState callback on React hooks?

Labrador retriever puppy walking on green grass

To use setState callback on React hooks, we can use the useEffect hook.

For instance, we write

function Comp() {
  const [counter, setCounter] = useState(0);

  const doSomething = () => {
    setCounter(123);
  };

  useEffect(() => {
    console.log("Do something after counter has changed", counter);
  }, [counter]);

  //..
}

to create the counter state with useState.

Then we watch the counter state for changes with the useEffect hook called with [counter] as the 2nd argument.

The useEffect callback will run whenever counter changes.

Categories
React Answers

How to use useref hook in React?

Labrador retriever puppy walking on green grass

To use the useRef hook in React, we call it in our component to return a ref.

Then we can assign that to an element.

For instance, we write

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

to set the input’s ref prop to the inputEl ref which we created with useRef.

Then we can access the input with inputEl.current.

And we call focus on it to focus on the input.

Categories
React Native Answers

How to override style with React Native?

Labrador retriever puppy walking on green grass

To override style with React Native, we set the style prop to the styles we want by putting them in an object.

For example, we write

const styles = StyleSheet.create({
  CircleShapeView: {
    width: 50,
    height: 50,
    borderRadius: 50 / 2,
    backgroundColor: "#000",
  },
});

//...

<Image style={[styles.CircleShapeView, { backgroundColor: "#fff" }]} />;

to set the style prop of the image to an array with the styles object and an object with the backgroundColor we want to set.

The background color is #fff since the 2nd object has the latest backgroundColor value.