Vivek Kumar

Creating a Custom Image Toggle Button

Vivek Kumar

Jun 11, 2019
9 Min read
514 Views

Jun 11, 2019
9 Min read
514 Views

Web Development

React

Introduction

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.

How to Create a Toggle Button?

The role of buttons in almost every application is inevitable, as they form an essential UI component. There are multiple uses of buttons as they are used for triggering API calls, navigation, etc. Here, we are going to create a custom toggle button which is going to be unselected by default. As far as functionality is concerned, it results in the change of a button’s style when it is tapped by the user, thereby making it look selected.

Let’s learn about detecting the tap event, add styles on the basis of the component state, keeping the button’s state, and using an image as a UI.

The Procedure

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');

javascript

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 
    } 
}

javascript

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 > 
	); 
}

javascript

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, 
	}, 
});

javascript

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> 
		); 
       } 
}

javascript

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 > 
	); 
}

javascript

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;

javascript

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);

javascript

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.

Working Methodology

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.

What Else Can You Do?

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.