React Native Day 13 – Using State to update style

Requirement – We have a button on the screen and when user tap on this button we want to change background color of another view.

Approach – Obviously we need a reference to a color say mBackgroundColor variable. Use this variable as backgroundColor for view’s background color. Now when ever user click on the view, refresh mBackgroundColor variable, and update view.

In react native we have state which can be used as variable and state is also mutable. We just have to set some default value of mBackgroundColor in constructor (kind of initializer)

And then when ever our button click event is called just updated state variables.

And this is how we are using

as style of one of the view:

Complete App.js file:

Output:

And below is the output after clicking on “Learn More” button.

Happy Coding!

React Native Day 10 State

Use state to store the data your current page needs in your controller-view.

State is mutable

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

Constructor means initializer.

Create a new project by typing command in terminal-

react-native init StateExample.

then open App.js file, and replace code with below.

Let’s Understand the code:

This is the syntax of constructor, this is the best place to initialize states. We can initialize state with default values :).

This is the render method to display UI:

We must make sure we use current context(this (similar to java or similar to “self” in swift)).

And this is our Button:

This part says that on the click on button call function this.onPressLearnMore().

Output:

This is the output just when app launch, with default values of myState and “i”.

This is the output after clicking on “Click Here”, at this point onClickLearnMore() function is called:

And Finally below is the output after dismiss “alert”: