this.setState does not seem to be called on react native iOS

this.setstate not working react native
react hook setstate not updating
react setstate not updating state
react native setstate
react setstate not re-rendering
react setstate boolean not working
this.setstate is not a function
react setstate not working in constructor

I am currently using setState in my react-native app to render a screen.

Below is the code, for some reason the code runs everything normally except setting the state.

showCard(event) {

  const { loadCard } = this.state;
  this.setState({ loadCard: true });

  console.log(loadCard)
  // get value of marker ID
  const markerID = parseInt(event.nativeEvent.id);
  console.log(markerID)
  if (markerID <= this.state.markers.length && markerID != null) {

    setTimeout(() => {
      //USE THIS FORMAT
      this.scrollView.getNode().scrollTo({ 
         x: markerID * (CARD_WIDTH), 
         animated: true 
      });

    }, 0.01);

    console.log(this.scrollView)

  }

}

Advice on this matter will be greatly appreciated, as it works on android for me

It does work but setting state is asynchronous so you can't just log the result after, observe with the following change:

this.setState({ loadCard: true }, () => console.log(this.state.loadCard));

The second argument is a callback fired after state is set, but you very rarely need that in reality.

Also setTimeout delay is an integer representing milliseconds not a floating point. If you want it as soon as possible use 0.

react-native this.setState not working, Don't explicitly call render . React will automatically do a re-render when state or props change, so there's no need for this. Also, where is your  They call this.setState() just like we did above, and yet React Native works with Android and iOS native views instead of the DOM. You might also be familiar with React Test Renderer or Shallow Renderer. Both of these testing strategies let you render normal components and call this.setState() inside them. But neither of them works with the DOM.

You need to bind your functions in the constructor while settling the state

constructor(props){
  super(props);
  this.state = {
    loadCard : false; 
  }
   this.changeCard =  this.changeCard.bind(this);
}

changeCard = (userId) => {
   this.setState({ loadCard: true});
}

render(){
   return(
       console('working state'+ this.state.loadCard);
  );
}

UI doesn't update until tap on the screen when setState is called , UI doesn't update until tap on the screen when setState is called inside a realm It seems we are having the same issue in our project. (iOS, Android, Emulator), I guess it's related to how React NAtive callbacks work :(. react-native documentation: setState. Example. To change view in your application you can use setState - this will re-render your component and any of its child components. . setState performs a shallow merge between the new and previous state, and triggers a re-render of the comp

I have somehow solved the issue. The main cause apparently as I was working with react-native maps dependency, it could not register the input directly from the marker component and required the method to be called in the main map. But thank you for all the input guys!

[IOS] onRegionChangeComplete in setState make map move , 16.0.0 react-native-maps: 0.19.0 Hi I found bug setState is called For all those still struggling, it seems this issue is happening when no  This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself. This is a more advanced guide that shows how to build a native module.

(React) setState not updating - JavaScript, Hi friends, setState is not updating values in the state for some just pass the props to Timer.js and use it as a container component. The constructor for a React component is called before it is mounted. Another issue seems to be that you're trying to pass data back and forth between two components. Do Not Modify State Directly wrong and right ways of setting state State Updates May Be Asynchronous. React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. manipulate state with a

React Native By Example, component found in index.ios.js so that the navigation components for PreviousMonthsList do not component, set to true so that the navigation bar does not appear. setState({ spent: 0, currentMonthExpenses: [], month: dateMethods. I'm wondering if there's anything extra that needs to be done for this component to work on iOS. The picker works fine on Android, but the same code does not display the picker on iOS. Here's my render method: render() { const datePicker

react-native this.setState not working - reactjs - html, setState. This is of type HomeTab but setState doesn't seem to be working. React will automatically do a re-render when state or props change, so there's no need for this. after a setState call won't work as the update won't necessarily have run. javascript · android · java · csharp · php · python · ios · jquery · html · sql. If calling setState () with some latency, e.g. setTimeout () or changes from redux, the second time changing picker item on UI, the onValueChange () will be not fired. The root cause comes from the `forceUpdate` in PickerAndroid.android.js. If user's setState () update comes after forceUpdate (), the flow will be: 1.

Comments
  • How exactly do you figure the setState command doesn't run?
  • I have been logging the state of loadCard which is what i use as a pre-requisite to render the component i need.
  • Even if setState where synchronous, which it isn't, your console.log(loadCard); logs the previous state. Even if you wrote console.log(this.state.loadCard); instead, it would still log the previous state. setState is asynchronous; calling it will change the state at an arbitrary point in the near future after the rest of your showCard() function runs.
  • So: when that function is called, the order of things happening is: 1. all the console.logs run 2a. the view scrolls 2b. this.state.loadCard is set to true (2b might happen before 2a)
  • Are you sure that this refers to what you want to refer? Maybe you need to .bind(this) where you call your showCard function.
  • Hi Domnic, thank you for the feedback. I have checked as well for each line and used the above method which you have shown. However for some reason the state remains as false, which puzzles me as it is working on android. could this be a dependency issue by any chance?