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!

Android – Gallery Project

Agenda we will learn android basics with this project.

Project Description – Open android image gallery, pick image from gallery and show it on android image view.

Start by creating a new android project and giving it some name.

Some Basics – 

Every app project must have an AndroidManifest.xml file (with precisely that name) at the root of the project source set.

One of the most important part of above snippet is:

here we are saying that MainActivity.java is the launching screen or very first screen/activity of our app.

The manifest file describes essential information about your app to the Android build tools, the Android operating system, and Google Play.

The manifest file is required to declare the following:

  • The app’s package name, which usually matches your code’s namespace. The Android build tools use this to determine the location of code entities when building your project. When packaging the app, the build tools replace this value with the application ID from the Gradle build files, which is used as the unique app identifier on the system and on Google Play.
  • The components of the app, which include all activities, services, broadcast receivers, and content providers. Each component must define basic properties such as the name of its Kotlin or Java class. It can also declare capabilities such as which device configurations it can handle, and intent filters that describe how the component can be started.
  • The permissions that the app needs in order to access protected parts of the system or other apps. It also declares any permissions that other apps must have if they want to access content from this app.
  • The hardware and software features the app requires, which affects which devices can install the app from Google Play.

An Android activity is one screen of the Android app’s user interface.

import statements in an Android application

In an Android application class file which extends the Activity class, you might see the following import statements:

Difference Between Package And Import – 
The statement “package” is used to indicate that the class being implemented is part of a group of related classes placed in the same folder, in our example:
indicates that the class is in a folder named “myapplication”, and this folder is inside the folder “example”, and so on.
On the other hand, the statement “import” is used to indicate that the class being implemented uses a class or a group of classes from some “package”. This instruction helps to locate the libraries used in our class.
In our example:

AppCompatActivity – Base class for activities that use action bar features(? you would have seen in some android apps top right there are menu options), indicates that the class being implemented

can inherit features from AppCompatActivity. What features? Obviously some life cycle methods like onCreate(), onResume(), onPause() being some of the features.

Bundles is used to share data between activities , and to save state of app in oncreate(Bundle savedInstanceState) method so that app will come to know where it was stopped

Now let’s look at class implementation:

Let’s try to understand what is going on:

Here we can see inheritance in action. class MainActivity inherits from AppCompatActivity, which inherits from Activity and so on. Our class will be able to override in built method of AppCompatActivity and Activity.

Here we can see we are overriding onCreate function. Now the question is what is onCreate()?

When you launch android activity/screen this function works like initialization point.

This function is called very first time on activity load. It means if you press home button and then again resume the app, onCreate will not be called.

Also this function uses the bundle parameter from which app can resume it’s previous state in case it was force terminated.

Let’s drag drop a ImageView and a Button. I have also set a default background image on image view named “ic_launcher_foreground”.  It’s just simple drag drop and below is xml code:

At this point of time the output is:

Some important points and concepts from xml:

androidx.constraintlayout.widget.ConstraintLayout : We are following constraint based or if you are from iOS background say it autolayout or if you are from react native it’s Flex or if you are from flutter it’s Box layout.

android:id : This must be unique, so that we can refer it in our code.

wrap_content : It means the view/button/image width or height should be enough to wrap content completely.

For our button constraints are as below:

layout_constraintTop_toBottomOf=”@+id/textView”: That means button will start from the bottom of textView.

For our text view constraints are as per below:

layout_constraintBottom_toBottomOf=”parent” : That means space in relative to bottom of container.

layout_constraintLeft_toLeftOf=”parent” : That means space in relative to left of container.

Similarly we can say for right and top.

This is a very basic example of constrained based system, which we will do in detail at some point of time.

When user will clicks the button we will open content gallery, choose image and show it on Image View.

Have some tea, relax and we will start with implementing gallery part.

First of all we need to create a variable for button, action for opening a gallery and  image view.

Let’s create button object, image view object and initialize it in onCreate():

At this point if you run app you will see image view with basic default image in it and “hello world” and a button named “Choose Image”. If you click on button you should see “clicked” being print on log cat console under debug area. All Good till now.

Let’s open image gallery on click of our button:

As we are using:

We have to implement callback:

Complete MainActivity.java file looks like this:

And here is the complete source code.

iOSDose is best android training provider. Join us to learn android app development.

Thanks.

React – Native – Day 8 – Basic stuff with view, text and safe area

I am using mac for creating react native project. You will learn some basic stuff on react native like basic user interface buttons, text inputs and view.

Launch Terminal and type:

react-native init BasicStuffs

Paste below code in index.js:

Here is the output:

Issue found:

hello world is hiding behind safe area.

Fix:

Use SafeAreaView – We will wrap our Text in SafeAreaView.

change

to

and change JSX as below:

Complete code:

Output:

Style

Let’s say I want the text color to be red:

Let’s Create Style like this:

Let’s use it as below code snippet:

Output:

Let’s play with views, buttons and input texts:

Output:

I am learning flex and will share you guys soon in next tutorials:)

Thanks & Regards,

Alok Upadhyay.

Skype : alok.upadhyay32

https://www.linkedin.com/in/k-alok-44656a15/

https://medium.com/@maddy.lucky4u