3
In this guide, we are going to learn about creating a custom toggle button in React JS with a step-by-step guide and the methodology involved. After going through this guide, you will not only be in a position to create the image toggle button with ease, but rather, you’ll know about the tools with which you can change color, styling, and other attributes. Let’s get started and learn about creating a toggle button in React JS.
Here’s how you can create a new app making use of the React Native CLI.
How to start?
As a first step, you need to create a source (say src
) folder in order to store the main content. It is in this folder that the creation of the images
folder and the MainApp.js
file will take place.
Secondly, for this class, let’s import the dependencies:
1 2 3 4 5 6 7 8 9 10
import React, { Component } from 'react'; import { StyleSheet, View, Image, Text, TouchableHighlight, } from 'react-native'; const heartIcon = require('./images/test_image.png');
As a third step, it is required to keep the button’s state
when it is pressed for our particular example. Hence, it is a requirement to create a class that is extendible from Component
. This is given below:
1 2 3 4 5 6 7 8 9 10 11 12 13
class MainApp extends Component { state = { liked: false, }; _onPressBtn = () => { // We will define the content in step 6 } render() { // We will define the content in step 4 } }
Moving to the fourth step, the content of the new component is required to be defined under the render
method. It gets important here because the Image
button is defined with a Text
underneath.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
render() { return ( <View style = {styles.container} > <TouchableHighlight style = {styles.btn} underlayColor = "#fefefe" > <Image source = {heartIcon} style = {styles.icon} /> </ TouchableHighlight > <Text style = {styles.text} > This is an example on image toggle button </ Text > </ View > ); }
In the fifth step, in order to set position, colors, margins, and dimensions, and for other purposes, it’s important to define a few styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
const styles = StyleSheet.create( { container: { marginTop: 50, alignItems: 'center', }, btn: { borderRadius: 5, padding: 10, }, icon: { width: 180, height: 180, tintColor: '#f1f1f1', }, liked: { tintColor: '#e74c3c', }, text: { marginTop: 20, }, });
Moving to the sixth step, the _onPressBtn
function content is required to be defined so as to respond to the tap event. Thereafter, to the onPress
property, it is assigned as a callback.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
class MainApp extends Component { state = { liked: false, }; _onPressBtn = () => { this.setState({ liked: !this.state.liked, }); } render() { return ( <View style = {styles.container} > < TouchableHighlight onPress = { this._onPressBtn } style = {styles.btn} underlayColor = "#fefefe" > <Image source = {heartIcon} style = {styles.icon} /> </ TouchableHighlight > <Text style = {styles.text} > This is an example on image toggle button </ Text> </ View> ); } }
Moving to the seventh step; in case we are going to test the code. We won’t find any change in the UI, although, with the pressing of the button, the state on the component is getting changed. As a next procedure, try modifying the image with a different color when there is a change in the state. By doing this, the response from the UI can be witnessed with ease.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
render() { const likedStyles = this.state.liked ? styles.liked : null; return ( <View style = { styles.container } > <TouchableHighlight onPress = { this._onPressBtn } style = { styles.btn } underlayColor = "#fefefe" > <Image source = { heartIcon } style = { [styles.icon, likedStyles] } /> </ TouchableHighlight > <Text style = { styles.text } > This is an example on image toggle button </ Text > </ View > ); }
The work of this class is almost done. The only thing remaining is the export. The following line can be added at the end of the file:
1
export default MainApp;
At last, index.android.js
and index.ios.js
are the files that are required to be updated. This will result in importing as well as using the new class.
1 2 3 4 5 6
import React, { Component } from 'react'; import { AppRegistry } from 'react-native'; import MainApp from './src/MainApp'; AppRegistry.registerComponent ('ButtonsAndEvents', () => MainApp);
Let’s get on the next section related to the working methodology. Here, a step-by-step guide is available to help you understand the basics and implement things with ease.
Well, now when it comes to the second step, more important tasks are required to be implemented. Yes, here the TouchableHighlight
component is required to be imported. It is considered to be very important as it is entrusted with the task of taking care of the touch event which has a very important role to play.
As soon as, the active area is touched by the user, the content gets highlighted on the basis of the preset underlayerColor
.
Coming to the third most crucial step, here the Component
state is defined. In our example, just one property is taken on the state
, though it may vary as required. So feel free to change the quantity as per your liking.
Now, skipping a few steps and coming to the sixth step, setState
method is used in order to modify the liked property value. The inheritance of this method is from the extendible class of components.
In the seventh step, on the basis of the liked property current state, styles are used in order to set the image color to red. In this case, if it is required to avoid any sort of style, then null is returned. In the process of assigning the styles to the component of the image, the use of arrays is noteworthy as it results in assigning a number of objects. It is considered very feasible as the resultant is the merging of all styles into one object by the component internally. The highest index bearing objects are entrusted with the task of overwriting the properties in the array from the lowest object.
When it comes to the real application, a number of buttons are taken into use with different attributes. For instance, you can use buttons with an icon that is simply aligned to the left-hand side, colors, labels, and different sizes, etc. Thus there are a number of possibilities. We highly recommend making use of a reusable component so as to get rid of the problem of duplicating the code. In the advanced version, you may get to know the implementation of the dynamic user interfaces. Under this, you will learn about creating a button component that is good enough to handle a few situations, as discussed above.
In this guide, you have learned the step-by-step procedure to create a custom image toggle button in ReactJS.
While writing this guide, the following resources have been referenced:
3
Test your skills. Learn something new. Get help. Repeat.
Start a FREE 10-day trial