How to Create Checkbox OnChange Event in React Native?

When “How to Create Checkbox OnChange Event in React Native?” moves through design, development and browser testing, highly compensated employees can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

Jun 25, 2022

Hi Guys,

Hello all! In this article, we will talk about how to create checkbox onchange event in react native. we will help you to give example of react native checkbox onchange event example. you can understand a concept of how to use checkbox onchange event in react native. This article will give you simple example of how to implement checkbox onchange event in react native. you will do the following things for checkbox onchange event example in react native.

React native has removed the checkbox component. So in this example, I've used the checkbox-marked icon and the checkbox-blank-outline icon of MaterialCommunityIcons. Then I made a hook that would get the value and set it. I set the value false in that hook. Then import the MaterialCommunityIcons in the Pressable component. I checked the name props in the MaterialCommunityIcons component that if the value in the check is false then the checkbox-marked icon will be set otherwise checkbox-blank-outline.

In the Pressable component, the value is set to true in the setcheck in the onpress props, so I have a condition in the image that if the value in the check is true, the image will change.

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: Install Expo Icons

You install expo vector icons to create checkbox:

npm install @expo/vector-icons

import this:

import { MaterialCommunityIcons } from "@expo/vector-icons";

Step 3: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, Pressable, StatusBar, Image } from 'react-native';
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Card, Title } from 'react-native-paper';
const App = () => {
    const [check, setcheck] = React.useState(false);
    return (
        <View style={styles.container}>
            <View style={ styles.innerContainer}>
                <Card>
                    <Card.Content>
                        <Title style={styles.title}>React Native Checkbox onChange Event</Title>
                    </Card.Content>
                    {!check ? 
                        <Image style={styles.image}  source={{ uri: 'https://picsum.photos/700' }} />
                        :
                        <Image style={styles.image} resizeMode='contain' source={{ uri: '/image/nice-logo.png' }} />
                    }
                    <Card.Actions style={styles.checkBox}>
                        <Pressable onPress={() => setcheck(!check)}>
                            <MaterialCommunityIcons
                                name={check ? 'checkbox-marked' : 'checkbox-blank-outline'} size={24} color="#000" />
                        </Pressable>
                        <Text style={styles.checkboxTitle}>Do you want to change the photo?</Text>
                    </Card.Actions>
                </Card>
            </View>
            <StatusBar />
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#2fd8f6',
    },
    checkBox: {
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "row",
        marginTop: 5,
    },
    innerContainer: {
        padding:9,
        marginTop:125,
    },
    title: {
        fontSize: 18,
        textAlign:'center',
        marginLeft:10,
        marginBottom:20,
    },
    checkboxTitle:{
        fontSize: 18,
        textAlign:'center',
        marginLeft:10,
    },
    image: {
        width:'100%', 
        height:300,
    }
});
export default App;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...