CODEWITHSUNDEEP
functionreact-nativereact-navigation
Filip Frahm
Filip Frahm

Reputation: 123

Calling a function when opening a react-native screen

I'm trying to load a JSON from AsyncStorage every time a user opens one of my react-native screens (I'm using StackNavigator). This JSON contains information on what my states should be set to.

How can I call a function that runs every time this screen is opened?

Further info: I've written a function that updates my states according to a JSON loaded from AsyncStorage. The function works perfectly when called from a button, but when the function is called from render(), part of my screen freezes and some buttons are not touchable anymore. Strangely only TextInput still works.

Upvotes: 8

Views: 61480

Answers (6)

divine
divine

Reputation: 4912

use componentWillMount() method. This will execute automatically before render() method gets triggered.

class Sample extends Component{
    state = {data : []};
    componentWillMount(){
        this.setState({data : inputObject});
    }
    render(){
        return(
            <View>
            //you can render the data here
            </View>
        );
    }
}

import { useEffect, useState } from 'react';

const Sample = () => {
    const [state, setState] = useState([]);
    useEffect(() => {
        setState(inputObject);
    }, [])

    return(
         <View>
         //you can render the data here
         </View>
    );

}

Reference: https://facebook.github.io/react/docs/react-component.html#componentwillmount

Upvotes: 10

Ibrahimj
Ibrahimj

Reputation: 73

Since you are dealing with the screen, I will suggest you use useFocusEffect hooks.

example:

const ExampleScreen = () => {
    // your code here
    useFocusEffect(useCallback(() => {
       // your logic goes here
    }, []))
    return (
        <View>
           {/* render your content here */}
        </View>
    )
}

Upvotes: 0

Daniel Cettour
Daniel Cettour

Reputation: 304

I used "onLayout" method inside the view.

read the doc

onLayout: Invoked on mount and on layout changes.

export default function Login({ navigation }) {

  const executeOnLoad = () => {
    console.log("view has loaded!");
  };

  return (
    <View style={styles.container} onLayout={executeOnLoad}>
    --- layout code here
    </View>
  );
}

Upvotes: 0

Felix
Felix

Reputation: 134

You could use a hook approach:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

I literally just copied the first example of the documentation, but it's a very good one. If you want continue reading: https://reactjs.org/docs/hooks-effect.html

Upvotes: 0

manish kumar
manish kumar

Reputation: 4692

If you want to handle back button page navigation then you need to listen to the navigation event once when the component has mounted, use the code below for the same.

componentDidMount = () => {
    this.focusListener = this.props.navigation.addListener('focus',
       () => { 
               console.log('focus is called'); 
              //your logic here.
       }
     );
}

Upvotes: 3

Jar
Jar

Reputation: 2010

This can be easily accomplished using 'withNavigationFocus' , found in the react native documentation here

import React, { Component } from 'react';
import { View } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class TabScreen extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.isFocused !== this.props.isFocused) {
      // Use the `this.props.isFocused` boolean
      // Call any action
    }
  }

  render() {
    return <View />;
  }
}

// withNavigationFocus returns a component that wraps TabScreen and passes
// in the navigation prop
export default withNavigationFocus(TabScreen);

Upvotes: 1

Related Questions