How to use navigation in react native

 Below are the reference links for Navigation in React native

• https://reactnavigation.org/docs/stack-navigator/
• https://www.npmjs.com/package/react-navigation
• https://www.npmjs.com/package/react-navigation-stack

How to install missing node modules in react js

npm install 

npm install: it will install all dependencies that are specified in the package.json

View example in react native

• Create Components folder under src folder
• Add ViewEXP1.js file and add below Code

import React from "react";

import { Text, View } from "react-native";

const ViewEXP1 = () => {

  return (

    <View>

      <Text>View example</Text>

      <Text>Line 1</Text>

      <Text>Line 2</Text>

      <Text>Line 2</Text>

    </View>

  );

};

export default ViewEXP1;

• Open App.js file and update code as below

import React from 'react';

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

import ViewEXP1 from './src/components/ViewEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <ViewEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

State example in react native

• Create Components folder under src folder
• Add stateEXP.js file and add below Code

import React from "react";

import { Text, View } from "react-native";

class stateEXP extends React.Component {

  state = {

    myState: "Adi"

  };

  render() {

    return (

      <View>

        <Text>State example</Text>

        <Text> {this.state.myState}</Text>

      </View>

    );

  }

}

export default stateEXP;

• Open App.js file and update code as below

import React from 'react';

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

import stateEXP from './src/components/stateEXP'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <stateEXP/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

React passing parameter via onclick event using Arrow function

• Create Components folder under src folder
• Add PassingParameterViaOnclick2.js file and add below Code

import React from "react";

import { Button, Text, View } from "react-native";

const onClickEvent = id => {

  alert(id);

};

const PassingParameterViaOnclick2 = () => {

  return (

    <View>

      <Text>

        React passing parameter via onclick event using Arrow function

      </Text>

      <Button

        title="Submit"

        value="buttonValue"

        onPress={() => {

          onClickEvent(10);

        }}

      />

    </View>

  );

};

export default PassingParameterViaOnclick2;

• Open App.js file and update code as below\

import React from 'react';

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

import PassingParameterViaOnclick2 from './src/components/PassingParameterViaOnclick2'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <PassingParameterViaOnclick2/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Passing parameter via onclick event in React Native

• Create Components folder under src folder
• Add PassingParameterViaOnclick.js file and add below Code

import React from "react";

import { Button, Text, View } from "react-native";

const onClickEvent = (id, name) => e => {

  alert(id);

  alert(name);

};

const PassingParameterViaOnclick = () => {

  return (

    <View>

      <Text>React passing parameter via onclick event </Text>

      <Button

        title="Submit"

        value="buttonValue"

        onPress={onClickEvent(10, "Adi")}

      />

    </View>

  );

};

export default PassingParameterViaOnclick;

• Open App.js file and update code as below\

import React from 'react';

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

import PassingParameterViaOnclick from './src/components/PassingParameterViaOnclick'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <PassingParameterViaOnclick/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Grid format example in react native

• Create Components folder under src folder
• Add Grid.js file and add below Code

import React from "react";

import { Dimensions, FlatList, Text, View, StyleSheet } from "react-native";

const data = [

  { id: "a", value: "A" },

  { id: "b", value: "B" },

  { id: "c", value: "C" },

  { id: "d", value: "D" },

  { id: "e", value: "E" },

  { id: "f", value: "F" }

];

const numColumns = 3;

const size = Dimensions.get("window").width / numColumns;

console.log(size);

const styles = StyleSheet.create({

  container: {

    margin: 10

  },

  itemContainer: {

    width: size,

    height: size

  },

  item: {

    flex: 1,

    margin: 3,

    backgroundColor: "lightblue"

  }

});

function Grid() {

  return (

    <View style={styles.container}>

      <FlatList

        data={data}

        renderItem={({ item }) => (

          <View style={styles.itemContainer}>

            <Text style={styles.item}>{item.value}</Text>

          </View>

        )}

        keyExtractor={item => item.id}

        numColumns={numColumns}

      />

    </View>

  );

}

export default Grid;

• Open App.js file and update code as below\

import React from 'react';

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

import Grid from './src/components/Grid'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <Grid/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Reusable button component react native example

• Create Components folder under src folder

• Add button Reusable component ButtonCOM.js file and add below Code

import React from "react";

import { Button } from "react-native";

const ButtonCOM = ({ title, decreaseCount }) => {

  return <Button onPress={decreaseCount} title={title} />;

};

export default ButtonCOM;

• Use Reusable button component  in followed file ButtonEXP1.js file and add below Code

import React from "react";

import { Button, View, Text } from "react-native";

const callFun = () => {

  alert("Clicked on Button!!!");

};

const ButtonEXP1 = () => {

  return (

    <View>

      <Text> Reusable button component react native example</Text>

      <Button onPress={callFun} title="Test Button" color="#0000FF" />

    </View>

  );

};

export default ButtonEXP1;

• Open App.js file and update code as below\

import React from 'react';

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

import ButtonEXP1 from './src/components/ButtonEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <ButtonEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Alert Dialog example in react native

• Create Components folder under src folder
• Add AlertDialogEXP1.js file and add below Code

import React from "react";

import { StyleSheet, View, Button } from "react-native";

const AlertDialogEXP1 = () => {

  const ShowAlertDialog = () => {

    alert("Alert Dialog Title", "Alert Dialog Message", [

      {

        text: "Ask me later",

        onPress: () => console.log("Ask me later Button Clicked")

      },

      {

        text: "Cancel",

        onPress: () => console.log("Cancel Button Pressed"),

        style: "cancel"

      },

      { text: "OK", onPress: () => console.log("OK ButtonPressed") }

    ]);

  };

  return (

    <View style={styles.MainContainer}>

      <Button title="Show Alert Dialog " onPress={ShowAlertDialog} />

    </View>

  );

};

export default AlertDialogEXP1;

const styles = StyleSheet.create({

  MainContainer: {

    justifyContent: "center",

    flex: 1,

    margin: 10

  }

});

• Open App.js file and update code as below\

import React from 'react';

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

import AlertDialogEXP1 from './src/components/AlertDialogEXP1'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <AlertDialogEXP1/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Activity Indicator example in react native

• Create Components folder under src folder
• Add ActivityIndicatorEXP1.js file and add below Code

import React from "react";

import {

Platform,

StyleSheet,

View,

ActivityIndicator,

Text

} from "react-native";

const ActivityIndicatorEXP1 = () => {

return (

<>

<Text>ActivityIndicator example</Text>

<View style={styles.MainContainer}>

<ActivityIndicator size="large" color="#F44336" />

<ActivityIndicator size="small" color="#E91E63" />

<ActivityIndicator size="large" color="#00BCD4" />

<ActivityIndicator size="small" color="#009688" />

<ActivityIndicator size="large" color="#4CAF50" />

<ActivityIndicator size="small" color="#FF9800" />

</View>

</>

);

};

export default ActivityIndicatorEXP1;

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: "center",

alignItems: "center",

paddingTop: Platform.OS === "ios" ? 20 : 0,

flexDirection: "row",

justifyContent: "space-around"

}

});

• Open App.js file and update code as below

import React from "react";

import { View } from "react-native";

import ActivityIndicatorEXP1 from "../src/components/ActivityIndicatorEXP1";

const App = () => {

return (

<View>

<ActivityIndicatorEXP1 />

</View>

);

};

export default App;

Output:

Accordion example in react native

• Create Components folder under src folder
• Add AccordionEXP1.js file and add below Code

import React, { Component } from "react";

import {

Platform,

LayoutAnimation,

StyleSheet,

View,

Text,

ScrollView,

UIManager,

TouchableOpacity

} from "react-native";

class AccordionEXP1 extends Component {

constructor() {

super();

this.state = {

updated_Height: 0

};

}

componentWillReceiveProps(update_Props) {

if (update_Props.item.expanded) {

this.setState(() => {

return {

updated_Height: null

};

});

} else {

this.setState(() => {

return {

updated_Height: 0

};

});

}

}

shouldComponentUpdate(update_Props, nextState) {

if (update_Props.item.expanded !== this.props.item.expanded) {

return true;

}

return false;

}

render() {

return (

<View style={styles.Panel_Holder}>

<TouchableOpacity

activeOpacity={0.7}

onPress={this.props.onClickFunction}

style={styles.Btn}

>

<Text style={styles.Panel_Button_Text}>{this.props.item.title} </Text>

</TouchableOpacity>

<View style={{ height: this.state.updated_Height, overflow: "hidden" }}>

<Text style={styles.Panel_text}>{this.props.item.body}</Text>

</View>

</View>

);

}

}

export default class App extends Component {

constructor() {

super();

if (Platform.OS === "android") {

UIManager.setLayoutAnimationEnabledExperimental(true);

}

const array = [

{

expanded: false,

title: "Panel 1",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 2",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 3",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 4",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 5",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 6",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 7",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 8",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 9",

body: " this is the Animated Accordion Panel."

},

{

expanded: false,

title: "Panel 10",

body: " this is the Animated Accordion Panel."

}

];

this.state = { AccordionData: [...array] };

}

update_Layout = index => {

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

const array = this.state.AccordionData.map(item => {

const newItem = Object.assign({}, item);

newItem.expanded = false;

return newItem;

});

array[index].expanded = true;

this.setState(() => {

return {

AccordionData: array

};

});

};

render() {

return (

<View style={styles.MainContainer}>

<ScrollView

contentContainerStyle={{ paddingHorizontal: 10, paddingVertical: 5 }}

>

{this.state.AccordionData.map((item, key) => (

<AccordionEXP1

key={key}

onClickFunction={this.update_Layout.bind(this, key)}

item={item}

/>

))}

</ScrollView>

</View>

);

}

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: "center",

paddingTop: Platform.OS === "ios" ? 20 : 0

},

Panel_text: {

fontSize: 18,

color: "#000",

padding: 10

},

Panel_Button_Text: {

textAlign: "center",

color: "#fff",

fontSize: 21

},

Panel_Holder: {

borderWidth: 1,

borderColor: "#FF6F00",

marginVertical: 5

},

Btn: {

padding: 10,

backgroundColor: "#FF6F00"

}

});

• Open App.js file and update code as below\

import React from "react";

import { View } from "react-native";

import AccordionEXP1 from "../src/components/AccordionEXP1";

const App = () => {

return (

<View>

<AccordionEXP1 />

</View>

);

};

export default App;

Output: