Friday, 14 December 2018

React Native- Invariant Violation: The navigation prop is missing for this navigator | react-navigation 3- navigation prop is missing for this navigator.

Hello Friend,
       Recently I faced few issue while implementing the react-navigation in my app.
I spent lots of time in it and then finally I found the actual cause of it.

1. undefined is not an object (evaluating 'RNGestureHandlerModule.State')



Then I follow following steps to resolve this,

  1. remove node_modules and package-lock.json
  2. npm install
  3. npm install --save react-navigation
  4. npm install --save react-native-gesture-handler
  5. react-native link
After following this I face another issue i:e,


2. Invariant Violation: The navigation prop is missing for this navigator. In 
react-navigation 3 you must set up your app container directly. More info: 
https://reactnavigation.org/docs/en/app-containers.html
              



Note  This is an react-navigation 3.0 bug. You can go through the below link for more details. 

- React Navigation 3.0 has a number of breaking changes including an explicit app container required for the root navigator.

In the past, any navigator could act as the navigation container at the top-level of your app because they were all wrapped in “navigation containers”. The navigation container, now known as an app container, is a higher-order-component that maintains the navigation state of your app and handles interacting with the outside world to turn linking events into navigation actions and so on.

In v2 and earlier, the containers in React Navigation are automatically provided by the create Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to createAppContainer.


Below are the complete code,

/**
 * This is an example code for Navigator
 */
import React, { Component } from 'react';
import {createStackNavigator,createAppContainer} from 'react-navigation';
 
import FirstPage from './src/component/FirstPage';
import SecondPage from './src/component/SecondPage';
//import all the screens we are going to switch 
 
const RootStack = createStackNavigator({
    //Constant which holds all the screens like index of any book 
    FirstPage: { screen: FirstPage }, 
    //First entry by default be our first screen if we do not define initialRouteName
    SecondPage: { screen: SecondPage }, 
  },
  {
    initialRouteName: 'FirstPage',
  }
);
const App = createAppContainer(RootStack);


Download complet code from here
Hope this will helps someone........

Enjoy coding..... :)


Wednesday, 5 December 2018

Kotlin-Create TextView Programatically

Hello Friends,
      In this tutorial I am going create a textview dynamically in kotlin and add it to Linearlayout layout.

1. activity_main.xml: Following is the activity_main.xml containing the TextView with the text .

<?xml version="1.0" encoding="utf-8"?>  
 <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"  
  xmlns:app="http://schemas.android.com/apk/res-auto"  
  xmlns:tools="http://schemas.android.com/tools"  
  android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  tools:context=".TextViewSample">  
  <LinearLayout  
   android:id="@+id/ll_main_layout"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical">  
   <TextView  
    android:id="@+id/tv_static"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:textSize="20sp"  
    android:padding="20sp"  
    android:justificationMode="inter_word"  
    android:text="This textview is created from xml"/>  
  </LinearLayout>  
 </android.support.constraint.ConstraintLayout>

2. Creation of textview dynamically,
val tv_programtically = TextView(this)
tv_programtically.textSize = 20f
tv_programtically.text = "This textview is an dynamic textview in kotlin"

3. Finally the complete code is:

  TextViewSample.kt
package com.android.developer.kotlinsample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.LinearLayout
import android.widget.TextView
class TextViewSample : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_text_view_sample)

    /** Dynamic creation of text view */
    val tv_programtically = TextView(this)
    tv_programtically.textSize = 20f
    tv_programtically.text = "This textview is an dynamic textview in kotlin"
    /**------end--------**/

    // add TextView to LinearLayout
    val ll_main_layout = findViewById(R.id.ll_main_layout) as LinearLayout
    ll_main_layout.addView(tv_programtically)
  }
}
Hope this will help some one. Enjoy Coding.... :)

Kotlin-bind OnClickListener on view

Hello Friends,
 In this tutorial I am showing you how to bind the click listener on View in Kotlin.

1. Code snippet to set OnClickListener on Textview in Kotlin Android
val tvStatic = findViewById(R.id.tv_static) as TextView
tvStatic.setOnClickListener {
 // your code to perform when the user clicks on the TextView
 Toast.makeText(this, "You clicked on TextView 'Click Me'.", Toast.LENGTH_SHORT).show()
}

2. Code snippet to set OnClickListener on Button in Kotlin Android
// get reference to button
val btn_click = findViewById(R.id.btn_click_me) as Button
// set on-click listener
btn_click.setOnClickListener {
    Toast.makeText(this@MainActivity, "You clicked on Button.", Toast.LENGTH_SHORT).show()
}

3. Code snippet to set OnClickListener on ImageView in Kotlin Android
// get reference to ImageView
val iv_profile = findViewById(R.id.image_view) as ImageView
// set on-click listener for ImageView
iv_profile.setOnClickListener {
    // your code here
}

Hope this will help someone.
Enjoy Coding..... :)

Saturday, 23 June 2018

Android Live Data Tutorial | Live Data | Data Binding | Architecture Components

Hello Friends,
              Today I am going to share me small tutorial of LiveData with Data Binding.

-What is LiveData?
     LiveData is an observable data holder class that can be observed within
     a given lifecycle. It lets the components in your app, usually the UI,
     observe LiveData objects for changes.

-The advantages of using LiveData

  •      Ensures your UI matches your data state
  •      No memory leaks
  •      No crashes due to stopped activities
  •      No more manual lifecycle handling
  •      Always up to date data
  •      Proper configuration changes
  •      Sharing resources
-How to use it in our app

   a. Add below dependency in app/build.gradle

implementation "android.arch.lifecycle:extensions:1.1.1" 


   
   b. UserViewModel.java : Creating a ViewModel class

package com.android.developer.livedatademo.model;

import android.arch.lifecycle.MutableLiveData;
import android.arch.lifecycle.ViewModel;

/**
 * Created by mukesh on 13/6/18.
 */
public class UserViewModel extends ViewModel {

    // Create a LiveData with a String
    private MutableLiveData mUser;

    public MutableLiveData getUser() {
        if (mUser == null) {
            mUser = new MutableLiveData();
        }
        return mUser;
    }
} 

In Activity class we creates an observer which updates the ui.
final Observer nameObserver = new Observer() {
      @Override
      public void onChanged(@Nullable final User user) {
      // Update the UI, in this case, a TextView.
      binding.tvUserName.setText(user.getName());
    }
};

Next step is observe the livedata, passing in the activity as a LifecycleOwner and the Observer.
userViewModel.getUser().observe(this, nameObserver);
binding.btnClick.setOnClickListener(this); 

The complete code,

package com.android.developer.livedatademo;

import android.arch.lifecycle.Observer;
import android.arch.lifecycle.ViewModelProviders;
import android.databinding.DataBindingUtil;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.android.developer.livedatademo.databinding.ActivityMainBinding;
import com.android.developer.livedatademo.model.User;
import com.android.developer.livedatademo.model.UserViewModel;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    UserViewModel userViewModel;
    ActivityMainBinding binding;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        // Get the ViewModel.
        userViewModel = ViewModelProviders.of(this).get(UserViewModel.class);
        // Create the observer which updates the UI.
        final Observer nameObserver = new Observer() {
            @Override
            public void onChanged(@Nullable final User user) {
                // Update the UI, in this case, a TextView.
                binding.tvUserName.setText(user.getName());
            }
        };

        // Observe the LiveData, passing in this activity as the LifecycleOwner and the observer.
        userViewModel.getUser().observe(this, nameObserver);
        binding.btnClick.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        User user = new User();
        user.setName("Mukesh Yadav");
        user.setAge("25");
        userViewModel.getUser().setValue(user);
    }
} 

Download the complete code here

Hope this will helps someone.
Enjoy Coding... :)

 

Copyright @ 2013 Android Developer Blog.