How to re-render componenets in react-native?

Question

I am new in react-native development, already spent 2 days for this issue. I am not good in typing but I can explain issue with my source code.

Current scenario :

Home Screen of app : There is dock icon for docking particular card. After clicking on dock icon, that card was stored in database as a docklist. it's working fine.
On Home Screen there is link such as Switch to Docklist : When I will click on docklist it will redirect on docklist screen, it's perfectly working fine.
On DockList screen there are 4 cards such as "Card a","View docklist","Card c","Card d"

Steps performed on this screen:

componentDidMount()
- On componentDidMount(), I am fetching "ID" from AsyncStorage(Local Storage) and set that value into state. I am passing this Id into api param.
- Calling Server API (this.viewDockList())

Area of Problem :

As per my knowledge and research, componentDidMount() is called only once after render.
I need to call api when I click on "View DockList" anytime.
Here, when I refresh the app following scenario is working
1. Home Screen-> I docked a card from home screen
2. On Home Screen -> Click on "Switch to DockList" -> Navigate to Dock Screen
3. On Dock Screen -> Click on "View Dock List" -> For the First time api is calling and data is showing as per my requirement.
4. Now, I go Back on Home Screen and again docking card and navigate to dock screen and clicking on view dock list at that time , Api is not calling only render() is calling. Here I need to call API again and get latest data from the server. I tried to called force update on click of "View dock detail" , api is called but list is not updated.

Here is my source code:

componentDidMount() {
    console.log("ComponentDidmount called")

    AsyncStorage.getItem('Id').then(value => {
        if (value !== null) {
            this.setState({ profileId: value })
        }
    })

    this.getDockedData();
}

 getDockedData = async () => {

    this.showLoading();

    console.log("API CALLED=====")

    try {
        let axiosConfig = {
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            params: {
                pId: this.state.profileId,
            }
        }

        axios.get('apiendpoint', axiosConfig)
            .then((res) => {

                this.setState({
                    sourceData: [...res.data.filter((item) => { if (!item.s_updated && !item.b_updated && !item.p_updated) return item })],

                });
                console.log("Data from dock api====", this.state.sourceData)
                this.hideLoading();
            })
            .catch((err) => {
                console.log("AXIOS ERROR WHILE GETTING DOCK DATA: ", err);
                this.hideLoading();
            })
    }

    catch (error) {
        console.log("ERROR======", error);
        this.hideLoading();
    }
}

   forceUpdate() {
    console.log("Force update called===")
    this.getDockedData();
  }   

//On render I am calling component 
 <Dockcomp  description="Lorum ipsum" onButtonPress={() => this.props.navigation.navigate('dockdetailscreen', { item: sourceData, type: "docked", UpdateUI: this.UpdateUI }, this.forceUpdate())} />

Expected Response :

Home Screen-> I docked a card from home screen
On Home Screen -> Click on "Switch to DockList" -> Navigate to Dock Screen
On Dock Screen -> Click on "View Dock List" -> Whenever I will click on View dock list , api should be call. Right now it's only call once because I used componentDidMount()

Thank you so much in advance! I really struggling from last 2 days for this issue.

score 0 · Answer 1 · answered Sep 15 '20 at 16:22

You don't need to rerender. You can write a listener to trigger getDockedData once the component is brought to focus. something like this:

componentDidMount() {
    this.unsubscribe = navigation.addListener('focus', () => {
      // stuff you are already doing in componentDidmount
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

you can learn more about listeners and navigation events here

score 0 · Answer 2 · answered Mar 30 '21 at 13:48

React and React-Native use shadowDOM to evaluate when to trigger a re-render. Unless forced, re-render only happen when the state or prop of a component is changed. At that point, a shallow comparison is done within the Tree to see whether a re-render is required or not. So if you want to call a re-render, you can add a listener in componentDidMount that triggers a state change. Or anywhere else really.

How to re-render componenets in react-native?

2 Answers2