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:

Reusable Button component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Button folder under common folder
• Add index.js file under Button folder and add below Code

import React from "react";

import "./style.css";

const Button = props => {

  const btnEnableDisable = !props.isDisabled ? "btn-enable" : "btn-disabled";

  return (

    <button

      id={props.id}

      className={`btn ${btnEnableDisable}`}

      onClick={props.clickHandler}

      type={props.type}

      disabled={props.isDisabled}

    >

      {props.value}

    </button>

  );

};

Button.defaultProps = {

  type: "button",

  disabled: false

};

export default Button;

• Add style.css file and add below Code

.btn.btn-enable {

  display: block;

  width: 150px;

  margin: 0 auto;

  margin-top: 20px;

  border: 1px solid #25729a;

  border-radius: 3px;

  text-align: center;

  color: #ffffff;

  background-color: #3093c7;

  margin-bottom: 20px;

  padding: 7px 7px 7px 7px;

}

.btn.btn-disabled {

  display: block;

  width: 150px;

  margin: 0 auto;

  margin-top: 20px;

  opacity: 0.65;

  cursor: not-allowed;

  border: 1px solid #25729a;

  border-radius: 3px;

  text-align: center;

  color: #ffffff;

  background-color: #3093c7;

  margin-bottom: 20px;

  padding: 7px 7px 7px 7px;

}

.btn:hover {

  border: 1px solid #1c5675;

  background-color: #26759e;

  background-image: -webkit-gradient(

    linear,

    left top,

    left bottom,

    color-stop(0%, #26759e),

    color-stop(100%, #133d5b)

  );

}

• Go to Components Folder and Add ButtonEXP.js file and add below Code

import React from "react";

import Button from "./common/Button/index";

export default function ButtonEXP() {

  const insertClickHandler = e => {

    alert("Clicked on insert Button");

  };

  const saveClickHandler = e => {

    alert("Clicked on save Button");

  };

  return (

    <div>

      <h3>Button reusable component example</h3>

      <Button

        id={"btnInsert"}

        type={"Submit"}

        value={"Insert"}

        isDisabled={true}

        clickHandler={insertClickHandler}

      />

      <Button

        id={"btnSave"}

        type={"Submit"}

        value={"Save"}

        isDisabled={false}

        clickHandler={saveClickHandler}

      />

    </div>

  );

}

• Open App.js file and update code as below

import React from 'react';

import ButtonEXP from './Components/ButtonEXP'

function App() {

  return (

    <div>

      <ButtonEXP/>

    </div>

  );

}

export default App;

Output:

Retrieve TextInput value on button click example in react native

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

import React, { useState } from "react";

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

const RetrieveTextboxValueOnButton = () => {

  const [data, setData] = useState("");

  const GetValueFunction = () => {

    alert(data);

    // console.log(data);

  };

  return (

    <View>

      <Text> Retrieve TextInput Data on Button Click example</Text>

      <TextInput

        placeholder="Enter Text here"

        onChangeText={text => setData(text)}

        value={data}

        style={{

          textAlign: "center",

          borderColor: "gray",

          borderWidth: 3,

          height: 50

        }}

      />

      <Button

        title="Get Text Input Value"

        color="#0000FF"

        onPress={GetValueFunction}

      />

    </View>

  );

};

export default RetrieveTextboxValueOnButton;

• Open App.js file and update code as below

import React from 'react';

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

import RetrieveTextboxValueOnButton from './src/Component/RetrieveTextboxValueOnButton'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <RetrieveTextboxValueOnButton/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Button With Rounded Corner example in react native

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

import React from "react";

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

const ButtonWithRoundedCorner = () => {

  return (

    <View>

      <Text>Button With Rounded Corner example</Text>

      <TouchableHighlight  style={styles.ButtonStyleClass} >

        <Text style={styles.submitText} >Submit</Text>

      </TouchableHighlight>

    </View>

  );

};

export default ButtonWithRoundedCorner;

const styles = StyleSheet.create({

  ButtonStyleClass: {

    marginRight:40,

    marginLeft:40,

    marginTop:10,

    paddingTop:20,

    paddingBottom:20,

    backgroundColor:'#68a0cf',

    borderRadius:10,

    borderWidth: 1,

    borderColor: '#fff'

  },

  submitText:{

    color:'#fff',

    textAlign:'center',

}

});

• Open App.js file and update code as below

import React from 'react';

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

 import ButtonWithRoundedCorner from './src/Component/ButtonWithRoundedCorner'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <ButtonWithRoundedCorner/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output:

Button example in react native

• Create Components folder under src folder
• Add 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> Button 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 {  Text,View,StyleSheet } from 'react-native';

 import ButtonEXP1 from './src/Component/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:

Reusable button components in React

• Add Button.js file and add below code

import React from "react";

const Button = props => {

return (

<button onClick={props.handleClick} className={"btn-" + props.theme}>

{props.children}

</button>

);

};

export default Button;

• Add ClassEXP1.js file and added below code

import React, { Component } from "react";

import Button from "./Button";

class ClassEXP1 extends Component {

constructor() {

super();

this.state = { Data: "" };

}

submitClick = e => {

console.log("Submit Button Clicked");

this.setState({ Data: "Submit Button Clicked" });

};

resetClick = e => {

console.log("Reset Button Clicked");

this.setState({ Data: "Reset Button Clicked" });

};

cancelClick = e => {

console.log("Cancel Button Clicked");

this.setState({ Data: "Cancel Button Clicked" });

};

render() {

return (

<div>

<Button theme="green" handleClick={this.submitClick}>

Submit

</Button>

<Button theme="blue" handleClick={this.resetClick}>

Reset

</Button>

<Button theme="red" handleClick={this.cancelClick}>

Cancel

</Button>

<div>{this.state.Data}</div>

</div>

);

}

}

export default ClassEXP1;

• Add styles.css file and add below code

.App {

font-family: sans-serif;

text-align: center;

}

button {

padding: 10px 10px;

border-radius: 15px;

font-size: 18px;

font-weight: 600;

margin: 0 5px;

}

.btn-red {

background-color: #e14d4d;

color: #d9abab;

}

.btn-green {

background-color: green;

color: #e0a2d2;

}

.btn-blue {

background-color: blue;

color: #4e6f64;

}

.container {

border: 2px solid red;

padding: 10px;

}

• Update index.js file as below.

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import ClassEXP1 from "./ClassEXP1";

function App() {

return (

<div className="App">

<ClassEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

 Click on Submit button

Click on Reset button