React Native Navigation WIX v2

React Native Navigation v2


install
 yarn add react-native-navigation

project structure--->

.................................................................................................................................................................

Home.js

1. Home.js

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'

class Home extends Component{
    render(){
        return(
            <View>
                <Text> Home Screen</Text>
                
            </View>
        )
    }
}


export default Home
............................................................................................................................................................

Detail.js

2. Detail.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'

class Detail extends Component{
    render(){
        return(
            <View>
                <Text> Details Screen </Text>
            </View>
        )
    }
}


export default Detail
...................................................................................................................................................................

App.js

3. App.js

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import { Navigation } from 'react-native-navigation'

class App extends Component {

  goToScreen = (screenName) => {
    Navigation.push(this.props.componentId, {
      component: {
        name: screenName
      }
    })

  }

  render() {
    return (
     <View >
        <Button title='Home' onPress={() => this.goToScreen('Home')} />
        <View style={{marginTop:23}}>
        <Button title='Detail' onPress={() => this.goToScreen('Details')} />
        </View>
        
      </View>
    )
  }
}


export default App

...................................................................................................................................................................

index.js

4. index.js

import { Navigation } from 'react-native-navigation'
import App from './App';

import Home from './src/screens/Home'
import Detail from './src/screens/Details'


Navigation.registerComponent('app', ()=>App)
Navigation.registerComponent('Home', ()=> Home)

Navigation.registerComponent('Details', ()=>Detail)

Navigation.events().registerAppLaunchedListener(()=>{
    Navigation.setRoot({
        root:{
            stack:{
                id:'App Stack',
               children:[{
                   component:{
                       name:'app'
                   }
               }]
            }
        }
    })
})

Run the project
5. react-native run-android

React Native Navigation WIX V2 Setup an Android.

React Native Navigation Setup an Android

install -->

yarn add react-native-navigation

react-native : "0.59.2"

react-native-navigation : "^2.16.0"

Step - 1

  android/settings.gradle

include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')

Step - 2

 android/build.gradle:

 minSdkVersion = 19


.......................................................


        mavenCentral()

        mavenLocal()

....................................................

        mavenCentral()
....................................................

        maven { url 'https://jitpack.io' }

Step - 3

android/app/build.gradle.


configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support' && requested.name != 'multidex') {
            details.useVersion "${rootProject.ext.supportLibVersion}"
        }
    }

}

......................................................................................................................................

missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5" 

Note
Important note about missingDimensionStrategy

reactNative51 - RN 0.54.x and below
reactNative55 - RN 0.55.x
reactNative56 - RN 0.56.x
reactNative57 - RN 0.57.0 - 0.57.4

reactNative57_5 - RN 0.57.5 and above

........................................................................................................................................


    implementation project(':react-native-navigation')

Step - 4

 Update MainActivity.java

import com.reactnativenavigation.NavigationActivity;

public class MainActivity extends NavigationActivity {

}

Step - 5

 Update MainActivity.java

Tips: - Update Yellow mark only
or copy and paste

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import com.reactnativenavigation.NavigationApplication;

import com.reactnativenavigation.react.NavigationReactNativeHost;

import com.reactnativenavigation.react.ReactGateway;

import java.util.Arrays;

import java.util.List;

public class MainApplication extends NavigationApplication {

    

    @Override

    protected ReactGateway createReactGateway() {

        ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {

            @Override

            protected String getJSMainModuleName() {

                return "index";

            }

        };

        return new ReactGateway(this, isDebug(), host);

    }

    @Override

    public boolean isDebug() {

        return BuildConfig.DEBUG;

    }

    protected List<ReactPackage> getPackages() {

        // Add additional packages you require here

        // No need to add RnnPackage and MainReactPackage

        return Arrays.<ReactPackage>asList(

            // eg. new VectorIconsPackage()

        );

    }

  

    @Override

    public List<ReactPackage> createAdditionalReactPackages() {

        return getPackages();

    }

}

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import com.reactnativenavigation.NavigationApplication;

import com.reactnativenavigation.react.NavigationReactNativeHost;

import com.reactnativenavigation.react.ReactGateway;

import java.util.Arrays;

import java.util.List;

public class MainApplication extends NavigationApplication {

@Override

protected ReactGateway createReactGateway() {

ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {

@Override

protected String getJSMainModuleName() {

return "index";

}

};

return new ReactGateway(this, isDebug(), host);

}

@Override

public boolean isDebug() {

return BuildConfig.DEBUG;

}

protected List<ReactPackage> getPackages() {

// Add additional packages you require here

// No need to add RnnPackage and MainReactPackage

return Arrays.<ReactPackage>asList(

// eg. new VectorIconsPackage()

);

}

@Override

public List<ReactPackage> createAdditionalReactPackages() {

return getPackages();

}

}

Step - 6

Update index.js 

import { Navigation } from "react-native-navigation";

import App from "./App";

Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => App);

Navigation.events().registerAppLaunchedListener(() => {

  Navigation.setRoot({

    root: {

      component: {

        name: "navigation.playground.WelcomeScreen"

      }

    }

  });

});

Step - 7

react-native run-android

TIPS: try with New emulator

Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/.`: The module `./index` could not be found from `\node_modules\react-native\scripts/.`. Indeed, none of these files exist: #23908

Error: Unable to resolve module `./index` from `\node_modules\react-native\scripts/.`: The module `./index` could not be found from `\node_modules\react-native\scripts/.`. Indeed, none of these files exist: #23908

Solutions:

... \node_modules\@react-native-community\cli\build\commands\runAndroid\runAndroid.js 

. edit this,
. Line number 247

const procConfig = {

    // delete this line    
    cwd: scriptsDir

    // add this line
    cwd: process.cwd()
};

Note: Close all terminal or cmd, thereafter try with new one.

Thanks :)

React Native Validation

import React, { Component } from 'react'
import { TextInput, Button, View, Text } from 'react-native'


class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      isValid: false
    }
  }


handleInputText=(input)=>{
  this.setState({input})
  if(input ==='' || input.length < 0)
  this.setState({isValid:false})
  else{
    this.setState({isValid:true})
  }

}
  render() {
    return (
     <View>
       <TextInput
       value={this.state.input}
       onChangeText={this.handleInputText}
       />
       <View>
         <Button title='submit' disabled={!this.state.isValid}/>
       </View>
     </View>
    )
  }
}

export default class App extends Component{
  render(){
    return(
      <Home/>
    )
  }
}