EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native Material

By Rahul DubeyRahul Dubey

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native Material

React Native Material

Introduction to React Native Material

The following article provides an outline for React Native Material. Half a decade back, working on React Native was quite tedious. There was a lack of Libraries or User Interface toolkits to create native like user interface elements, but the scenario is different now. Now, React Native is the latest trend among the developers. There is one such Library which helps in creating some exciting UI elements which can act as an attraction point to the Application. Material User Interface Library helps us in creating awesome material bottom navigation and everything is in JavaScript. There are no native dependencies required for it, its very easy to use and the application looks stunning with this.

Using React Native Material with Examples

Given below shows using of react native material with examples:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Example #1

Based To-Do App.

Components inside src folder:

  • components folder
  • index.js

Components inside components folder:

  • TodoComponent.js

The files used to implement the example below are:

files used

a. TodoComponent.js

Code:

import React from "react";
import TextField from "material-ui/TextField";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import Card from "material-ui/Card";
import Divider from "material-ui/Divider";
import Switch from "material-ui/Switch";
import DeleteIcon from "material-ui-icons/Delete";
import Tooltip from "material-ui/Tooltip";
import { FormGroup, FormControlLabel } from "material-ui/Form";
const styles = {
done: {
textDecoration: "line-through",
opacity: ".25",
display: "flex",
width: "99%"
},
header: {
justifyContent: "center",
display: "flex",
flexDirection: "row",
alignItems: "center"
},
main: {
width: "101%",
maxWidth: "401px",
margin: "21px auto"
},
card: {
padding: "21px",
margin: "21px 0"
},
todo: {
position: "relative",
display: "flex",
flexFow: "row",
alignContent: "space-between"
},
label: {
display: "flex",
width: "101%"
},
divider: {
position: "absolute",
width: "101%",
top: 0
}
};
class TodoComponent extends React.Component {
state = {
tasks: [],
newTask: ""
};
onTextUpdate = e => {
this.setState({ newTask: e.target.value });
};
addTask = () => {
let { tasks, newTask } = this.state;
tasks.push({ text: newTask, done: false });
this.setState({ tasks: tasks, newTask: "" });
};
deleteTask = task => {
let { tasks } = this.state;
tasks.splice(tasks.indexOf(task), 1);
this.setState({ tasks: tasks, newTask: "" });
};
toggle = task => {
let { tasks } = this.state;
tasks[tasks.indexOf(task)].done = !tasks[tasks.indexOf(task)].done;
this.setState({ tasks: tasks, newTask: "" });
};
render() {
const { tasks, newTask } = this.state;
return (
<div id="main" style={styles.main}>
<header style={styles.header}>
<TextField
label="New Tasks"
value={newTask}
onChange={this.onTextUpdate}
/>
<Button
variant="raised"
color="secondary"
disabled={!newTask}
onClick={this.addTask}
>
Add
</Button>
</header>
{tasks.length > 0 && (
<Card style={styles.card}>
<FormGroup>
{tasks.map((task, index) => (
<div key={index} style={styles.todo}>
{index > 0 ? <Divider style={styles.divider} /> : ""}
<FormControlLabel
control={
<Switch
color="secondary"
checked={!task.done}
onChange={() => this.toggle(task)}
/>
}
label={task.text}
style={task.done ? styles.done : styles.label}
/>
<Tooltip title="Click to Delete" placement="top">
<IconButton
aria-label="delete"
onClick={() => this.deleteTask(task)}
>
<DeleteIcon />
</IconButton>
</Tooltip>
</div>
))}
</FormGroup>
</Card>
)}
</div>
);
}
}
export default TodoComponent;

b. index.js

Code:

import React from "react";
import { render } from "react-dom";
import TodoComponent from "./components/TodoComponent";
import { MuiThemeProvider, createMuiTheme } from "material-ui/styles";
import blue from "material-ui/colors/pink";
const theme = createMuiTheme({
palette: {
primary: blue,
type: "light"
}
});
const App = () => (
<MuiThemeProvider theme={theme}>
<TodoComponent />
</MuiThemeProvider>
);
render(<App />, document.getElementById("root"));

Output:

React Native Material 2

React Native Material 3

Example #2

Tour with a Dialog.

Components to build up:

  • demo.js
  • index.js

The files used to implement the example below are:

React Native Material 7JPG

a. demo.js

Code:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import MuiDialogContent from "@material-ui/core/DialogContent";
import MuiDialogActions from "@material-ui/core/DialogActions";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import Slide from "@material-ui/core/Slide";
import Tour from "reactour";
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
const styles = theme => ({
root: {
margin: 0,
padding: theme.spacing(2.5)
},
closeButton: {
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[501] }
});
const DialogTitle = withStyles(styles)(props => {
const { children
, classes
, onClose
, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h6">{children}</Typography>
{onClose ? (
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={onClose}
>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
});
const DialogContent = withStyles(theme => ({
root: {
padding: theme.spacing(2.5)
}
}))(MuiDialogContent);
const DialogActions = withStyles(theme => ({
root: {
margin: 0.1,
padding: theme.spacing(1)
}
}))(MuiDialogActions);
const tourConfig = [
{
selector: '[data-tut="reactour__iso"]',
content: `Welcome to the Tour, Hope Everyone Enjoys`
},
{
selector: '[data-tut="reactour__logo"]',
content: `& this will be a exciting journey`
}
];
export default function CustomizedDialogs() {
const accentColor = "#8fc965";
const [open, setOpen] = React.useState(false);
const [isTourOpen, setTourOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const closeTour = () => {
setTourOpen(false);
};
const openTour = () => {
handleClickOpen(true);
setTourOpen(true);
};
return (
<div>
{ <Button variant="outlined" color="primary" onClick={handleClickOpen}>
Click to Open dialog
</Button> }
<Button variant="outlined" color="secondary" onClick={openTour}>
Click for Tour Travel
</Button>
<Tour
onRequestClose={closeTour}
disableInteraction={false}
steps={tourConfig}
isOpen={isTourOpen}
maskClassName="mask"
className="helper"
rounded={5}
accentColor={accentColor}
/>
<Dialog
TransitionComponent={Slide}
onClose={handleClose}
aria-labelledby="customized-dialog-title"
open={open}
>
<DialogTitle id="customized-dialog-title" onClose={handleClose}>
Escape Rooms
</DialogTitle>
<DialogContent dividers>
<Typography data-tut="reactour__iso" gutterBottom>
Escape rooms provide various team-building, social-bonding and cognitive  needs to enable people to live the best quality of life. Our field studies reveal that Escape Rooms are one of the most highly rated and positively reviewed experiences.
</Typography>
<Typography gutterBottom>
No other live-action entertainment experience comes close to the scale and positive reception of escape rooms. Escape Rooms are indeed a unique genre that caters to different consumer needs including, entertainment, leisure, and adventure, among others.
</Typography>
<Typography gutterBottom>
The Escape Room industry also boasts a sizeable workforce comprising multidisciplinary roles including Game masters & Support Staff, Business Development Managers, Team Leads & Managers.
</Typography>
</DialogContent>
<DialogActions>
<Button
data-tut="reactour__logo"
autoFocus
onClick={handleClose}
color="secondary"
>
Click to Save
</Button>
</DialogActions>
</Dialog>
</div>
);
}

b. index.js

Code:

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';
ReactDOM.render(<Demo />, document.querySelector('#root'));

Output:

Tour with a Dialog

Tour with a Dialog

React Native Material 6JPG

Conclusion

On the basis of the above two examples, we understood how to create some awesome UI elements using React Native Material Library. In the first example, we have made a to do list app, which notes down the tasks and it has a switch which helps us understand if the task is done or yet to be done. In the second example we have created a Tour of an app using Material Design, it has dialogs which pops up with our actions. The examples were informative and it must have given some ideas on using UI Library.

Recommended Articles

This is a guide to React Native Material. Here we discuss the introduction to React Native Material with uses and respective examples. You may also have a look at the following articles to learn more –

  1. Styling in React Native
  2. React Native Authentication
  3. React Native Carousel
  4. React Native Redux

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) Learn More