Category: React

Categories
React Native Answers

How to add a custom alert dialog in React Native?

Labrador retriever puppy walking on green grass

To add a custom alert dialog in React Native, we use the react-native-modalbox library.

To install it, we run

npm install react-native-modalbox@latest --save

Then we use it by writing

import Modal from "react-native-modalbox";

//...

<Modal
  style={[styles.modal, styles.modal1]}
  ref={"modal1"}
  swipeToClose={swipeToClose}
  onClosed={onClose}
  onOpened={onOpen}
  onClosingState={onClosingState}
>
  <Text style={styles.text}>Basic modal</Text>
  <Button
    title={`Disable swipeToClose(${swipeToClose ? "true" : "false"})`}
    onPress={() => setSwipeToClose(!swipeToClose)}
    style={styles.btn}
  />
</Modal>

to import Modal from react-native-modalbox.

And then we add the Modal component into our view component.

We set the onClosingState, onClosed and onOpen handlers to component functions.

And we add the Text and Button components as content of the Modal.

We style the Modal by setting the style prop of the components.

Categories
React Answers

How to check the actual DOM node using React enzyme?

Labrador retriever puppy walking on green grass

To check the actual DOM node using React enzyme, we use the findDOMNode and wrapper.instance methods.

For instance, we write

import ReactDOM from "react-dom";

//...

const wrapper = mount(<input type="text" defaultValue="sup" />);
console.log(ReactDOM.findDOMNode(wrapper.instance()) === wrapper.instance());

to mount the input component with mount.

Then we call ReactDOM.findDOMNode with wrapper.instance() to find the DOM node for the instance.

And we check that against wrapper.instance() to see if it returns the same DOM node.

Categories
React Answers

How to style an Alert element in React Native?

Labrador retriever puppy walking on green grass

To style an Alert element in React Native, we set the Modal‘s style prop.

For instance, we write

<Modal style={{ background: "red" }} ref={"modal1"}>
  <Text style={{ color: "white" }}>Basic modal</Text>
  <Button onPress={this.toggleSwipeToClose} style={styles.btn}>
    Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})
  </Button>
</Modal>

to set the style prop of the Modal to { background: "red" } to make the background red.

And we set the Text style by setting the Text‘s style prop to { color: "white" }.

And we set the Button‘s style to styles.btn

Categories
React Answers

How to trigger a Redux action from outside a component with React?

Labrador retriever puppy walking on green grass

To trigger a Redux action from outside a component with React, we call store.dispatch from anywhere in our project.

For instance, we write

import { store } from "/path/to/createdStore";

function testAction(text) {
  return {
    type: "TEST_ACTION",
    text,
  };
}

store.dispatch(testAction("StackOverflow"));

to call the testAction function to return the action type and text value.

And then we call store.dispatch to with the object returned by testAction to dispatch the TEST_ACTION action.

Categories
React Answers

How to mock localStorage methods with Jest?

Labrador retriever puppy walking on green grass

To mock localStorage methods with Jest, we call jest.spyOn.

For instance, we write

jest.spyOn(window.localStorage.__proto__, "setItem");

to call jest.spyOn with window.localStorage.__proto__, which is the local storage prototype.

We mock the localStorage.setItem method by calling spyOn with 'setItem' as the 2nd argument.