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..... :)

 

Copyright @ 2013 Android Developer Blog.