State - React Native







Component is managed by two types of data: props and state. Proposals are set by the parent and fixed throughout the component's lifetime. We need to use state for information that will change.


In general, when you want to change it, you should initialize state in the constructor, and then call setState.


Let's say we're going to make text that blinks all the time, for instance. Once the blinking element is created, the text itself is set when, so the text itself is a prop. Throughout time, the "whether the text is on or off" changes, so it should be kept in state.


import React, { Component } from 'react';
import { StyleSheet,Text, View } from 'react-native';
const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
});
class HideAndShow extends Component {
  componentswap(){
    // Toggle the state every second
    setInterval(() => (
      this.setState(previousState => (
        { isShowingText: !previousState.isShowingText }
      ))
    ), 1000);
  }
  //state object
  state = { isShowingText: true };
  render() {
    if (!this.state.isShowingText) {
      return null;
    }
    return (
      <Text style={styles.bigBlue}>{this.props.text}</Text>
    );
  }
}
export default class HideAndShowImpApp extends Component {
  render() {
    return (
      <View>
        <HideAndShow text='Yeah....i m blinking like bulb' />
      
      </View>
    );
  }
}

Try pasting the code App.js or use my console from NawabBlogconsole.


You probably won't set status with a timer in a real application. If you have new data from the server or user input, you may set the state. You can also control your data flow using a state container such as Redux or Mobx. In that case, instead of calling setState directly, you would use Redux or Mobx to modify your state.


HideAndShowImpApp will re-render its component when setState is called. The component will re-render each time the Timer ticks by calling setState within the Timer.


State works the same way as it does in React, so you can look at the React. Component API for more details on handling status.

0 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad