React Naitive TypeError: cli.init is not a function - Solution Fix

Because of recent version has bugs, so downgrade to previous version like below.

 npx react-native init <YourProjectName> --version 0.68.2

Android Virtual Device - AVD Setup

 1. Install Andriod SDK

2. Set environment for ANDROID_HOME=/home/android/sdk...

3. Install AVD or Android Studio

4. Open Android Studio 

           /home/android-studio/bin/

                        ./studio.sh

5. In that android Studio, you can see Configure Button -> AVD

6. Create Virutal Device or AVD like below. 

7. Start The Emulator by click Play button

8. Add environment variable.

      8.1  goto /etc/profile.d/    [create one file.sh] ex: > sudo vi myenv.sh

         

      export ANDROID_HOME=$HOME/Library/Android/sdk

      export PATH=$PATH:$ANDROID_HOME/emulator
      export PATH=$PATH:$ANDROID_HOME/tools
      export PATH=$PATH:$ANDROID_HOME/tools/bin
      export PATH=$PATH:$ANDROID_HOME/platform-tools

9. > source /etc/profile

React Native - Check Application is in Background or ForeGround with Time Diff - 10 seconds Move to Login Session Expired

 1. Install the below two mandatory npm plugins.

npm install --save react-native-async-storage

npm install --save moment

2. app.js

import React, { Component } from 'react';

import { StyleSheet, Text, View, AppState } from 'react-native';

//import Routing from "./src/routing/routing";

import AsyncStorage from '@react-native-async-storage/async-storage';

import moment from 'moment';

//import { Actions } from 'react-native-router-flux';

export default class App extends Component {

constructor() {

super();

this.state = {

appState: AppState.currentState

}

}

componentDidMount() {

AppState.addEventListener('change', this._handleAppStateChange);

}

componentWillUnmount() {

AppState.removeEventListener('change', this._handleAppStateChange);

}

_handleAppStateChange = async(nextAppState) => {

this.setState({ appState: nextAppState });

if (nextAppState === 'background') {

var previousTime = new Date();

await AsyncStorage.setItem( "previousTime", previousTime.toString() );

// Do something here on app background.

console.log( "App is in Background Mode @ ", previousTime );

}

if (nextAppState === 'active') {

// Do something here on app active foreground mode.

const start = moment( await AsyncStorage.getItem('previousTime') );

const end = moment();

//in original implementation, use minutes and check with N value.

//const range = end.diff(start,'minutes');

const range = end.diff(start,'seconds');

if ( range >= 10 ){

console.log ( "App is exit the Active Range, So moving to Login screen." );

/* Actions.login({"message":"Session Exit"} ); */

}

else{

console.log( "App is in Active Range, So continue your process ...");

}

}

if (nextAppState === 'inactive') {

// Do something here on app inactive mode.

console.log("App is in inactive Mode.")

}

};

render() {

return (

<View style={styles.MainContainer}>

{/* <Routing /> */}

<Text>Current state is: {this.state.appState}</Text>

</View>

);

}

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

text: {

fontSize: 20,

color: '#000'

}

});