Creating a Bank Selection Modal in React Native

Introduction: In this blog post, we will learn how to create a bank selection modal in a React Native application. The modal will allow users to choose their preferred bank from a list of Nigerian banks using a drag icon. We will use the react-native-modal and react-native-draggable libraries for this purpose. Let's get started!

Prerequisites: Make sure you have a basic understanding of React Native and have set up a React Native project using Expo or another development environment.

Step 1: Setting up the Project Assuming you have a React Native project already set up, install the required libraries:

npm install react-native-modal react-native-draggable @expo/vector-icons --save

Step 2: Importing and Using the Components In your ModalScreen.js file (or any other suitable component file), import the necessary components and create the ModalScreen functional component.

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, ScrollView, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import Modal from 'react-native-modal';
import Draggable from 'react-native-draggable';

Step 3: Implementing the Bank Selection Modal Next, we will create the ModalScreen component that displays the bank selection modal with the drag icon.

const ModalScreen = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedBank, setSelectedBank] = useState('');

  const handleSelectBankPress = () => {
    setModalVisible(!modalVisible);
  };

  const handleBankSelect = (bankName) => {
    setSelectedBank(bankName);
    setModalVisible(!modalVisible);
  };

  const nigeriaBanks = [
    // List of Nigerian banks
    // Add more banks here
  ];

  return (
    <>
      <View>
        <TouchableOpacity onPress={handleSelectBankPress}>
          <Text>{selectedBank || 'Select a bank'}</Text>
        </TouchableOpacity>
      </View>

      <Modal
        isVisible={modalVisible}
        onBackdropPress={() => setModalVisible(false)}
        style={styles.modalContainer}
        backdropOpacity={0} // Set the backdropOpacity to 0 (transparent)
      >
        <View style={styles.modalContent}>
          {/* Drag Icon */}
          <Draggable x={100} y={100}>
            <MaterialCommunityIcons name="drag-horizontal" size={60} color="black" />
          </Draggable>

          {/* Bank List */}
          <ScrollView contentContainerStyle={styles.scroller} showsVerticalScrollIndicator={false}>
            {nigeriaBanks.map((bankName) => (
              <TouchableOpacity key={bankName} onPress={() => handleBankSelect(bankName)}>
                <Text style={styles.mytexty}>{bankName}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      </Modal>
    </>
  );
};

Step 4: Styling the Modal Lastly, let's add some basic styles to make the modal look visually appealing.

const styles = StyleSheet.create({
  modalContainer: {
    borderWidth: 0,
    position: 'absolute',
    height: 300,
    width: '100%',
    bottom: -20,
    borderTopRightRadius: 30,
    borderTopLeftRadius: 30,
    backgroundColor: 'red',
    marginLeft: 0,
    marginRight: 0,
  },
  modalContent: {
    backgroundColor: 'lightblue',
  },
  scroller: {
    display: 'flex',
    alignItems: 'center',
    gap: 20,
  },
  mytexty: {
    fontSize: 16,
  },
  handle: {
    textAlign: 'center',
    padding: 20,
  },
});

export default ModalScreen;

Conclusion: In this tutorial, we have successfully created a bank selection modal using React Native. The modal displays a list of Nigerian banks, and users can choose their preferred bank. The modal is enhanced with a drag icon using the react-native-draggable library, making it more interactive and user-friendly. You can further customize the styles and functionality according to your project's requirements.

Title: Creating a Bank Selection Modal in React Native