How to add Color Picker in React Native ?

React Native is a popular cross-platform framework for mobile app development using JavaScript. It enables code reuse for iOS and Android platforms and frequently involves incorporating a color picker component. In this article, we'll see how to add a color picker in React native application by using the react-native-color-picker library

A color picker component is commonly used in mobile app development to allow users to choose and interact with colors visually. The `react-native-color-picker` library offers a customizable solution for implementing a color picker component in React Native apps.

Prerequisites

• Introduction to React Native
• React Native Components
• Expo CLI
• Node.js and npm (Node Package Manager)

Creating React Native App

Step 1: Install Expo CLI globally by running this command in your terminal: It only works on version v46.0.0

npm install -g [email protected]

Step 2: Create React Native Application With Expo CLI

expo init color-picker-native

Step 3: ​Navigate to the project directory by using this command:

cd color-picker-native

Project Structure

Step 4: Install Required Dependencies

npm install react-native-color-picker

Approach

To add a color picker in a React Native app, follow these steps: Set up a React Native project, install the `react-native-color-picker` library, import components and define the `ColorPicker` component, create a reference with `useRef`, implement color selection and clipboard functions, render the color picker and run the app.

• App.js

import React, { useRef } from 'react';
import { StyleSheet, Text, View, Clipboard, 
    TextInput } from 'react-native';
import { ColorPicker } from 'react-native-color-picker';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    colorPicker: {
        width: 300,
        height: 500,
        borderRadius: 10,
        marginBottom: 20,
    },
    input: {
        color: 'black',
        fontWeight: 'bold',
        fontSize: 20,
    },
});

export default function App() {
    const colorPickerRef = useRef(null);

    const handleColorSelected = (color) => {
        // Copy the color to the clipboard
        Clipboard.setString(color);
        // Alert the user
        alert(`Color selected: ${color} (Copied to clipboard)`);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Color Picker</Text>
            <ColorPicker
                ref={colorPickerRef}
                onColorSelected={handleColorSelected}
                style={styles.colorPicker}
            />
            <TextInput
                style={styles.input}
                placeholder="Paste The Color Code"
            />
        </View>
    );
}

Step 6: To run the react native application, open the Terminal and enter the command listed below. 

npx expo start

To run on Android:

npx react-native run-android

To run on Ios:

npx react-native run-ios

Output: