In this blog post, we'll explore how to implement modal functionality in a React Native application. We'll use the react-native-modal library to create a modal that allows users to select a bank from a list of Nigerian banks in alphabetical order.
Overview
The goal of this implementation is to allow users to select their preferred bank when performing a withdrawal transaction. We'll display a main content area with withdrawal details, and when the user taps on the "Select a bank" button, a modal will be shown with a scrollable list of all the Nigeria banks.
Prerequisites
Before proceeding, make sure you have the following installed:
React Native development environment set up
Expo or React Native CLI installed
Basic knowledge of React Native components and state management
Step 1: Setting Up the Project
We'll start by creating a new React Native project and installing the necessary dependencies. Open your terminal and run the following commands:
npx react-native init MyBankApp
cd MyBankApp
npm install react-native-modal
Step 2: Implementing the Modal
Let's begin by creating the WamountScreen component that will contain the main content and the bank selection modal.
// WamountScreen.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import Modal from 'react-native-modal';
const WamountScreen = () => {
const [modalVisible, setModalVisible] = useState(false);
const [selectedBank, setSelectedBank] = useState('');
// ... (The rest of the code from the original implementation)
return (
<>
<View style={styles.container}>
{/* Your main content here */}
<TouchableOpacity style={styles.modeme} onPress={handleSelectBankPress}>
<Text>{selectedBank || 'Select a bank'}</Text>
</TouchableOpacity>
</View>
<Modal
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.modalContainer}
backdropOpacity={0}
>
{/* The modal content */}
{/* ... (Code for displaying the list of Nigeria banks inside the modal) */}
</Modal>
</>
);
};
const styles = StyleSheet.create({
// ... (The styles from the original implementation)
});
export default WamountScreen;
Step 3: Displaying the Bank List in the Modal and Complete Code
To display the list of Nigeria banks inside the modal, we'll use the ScrollView component and the map function to iterate over the nigeriaBanks array.
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import Modal from 'react-native-modal';
const WamountScreen = ({ navigation, route }) => {
const [modalVisible, setModalVisible] = useState(false);
const [selectedBank, setSelectedBank] = useState('');
const handleSelectBankPress = () => {
setModalVisible(!modalVisible);
};
const handleBankSelect = (bankName) => {
setSelectedBank(bankName);
setModalVisible(!modalVisible);
};
const nigeriaBanks = [
'Access Bank',
'Citibank',
'Diamond Bank (Access Bank)',
'Ecobank Nigeria',
'Enterprise Bank Limited (Heritage Bank)',
'Fidelity Bank Nigeria',
'First Bank of Nigeria',
'First City Monument Bank',
'Guaranty Trust Bank',
'Heritage Bank',
'Keystone Bank Limited',
'Polaris Bank',
'Providus Bank',
'Stanbic IBTC Bank Nigeria',
'Standard Chartered Bank',
'Sterling Bank',
'Suntrust Bank Nigeria',
'Union Bank of Nigeria',
'United Bank for Africa',
'Unity Bank',
'Wema Bank',
'Zenith Bank',
// Add more banks here
];
return (
<>
<View style={styles.container}>
<View style={styles.dep1}>
<Text style={styles.texty}>Enter Withdrawal Amount</Text>
<View style={{ width: '100%', marginTop: 20 }}>
<Text style={styles.labels}>Amount of {route.params.method.currency}</Text>
<TextInput placeholder='Amount' style={styles.sizer} autoCapitalize="none" required={true} />
<Text style={styles.labels1}>Available : {route.params.method.currency}0.00</Text>
</View>
<View>
<TouchableOpacity style={styles.modeme} onPress={handleSelectBankPress}>
<Text>{selectedBank || 'Select a bank'}</Text>
</TouchableOpacity>
</View>
<View style={{ width: '100%', marginTop: 20 }}>
<Text style={styles.labels}>Account Name</Text>
<TextInput placeholder='Account Name' style={styles.sizer} autoCapitalize="none" required={true} />
</View>
<View style={{ width: '100%', marginTop: 20 }}>
<Text style={styles.labels}>Account Number</Text>
<TextInput placeholder='Account Number' style={styles.sizer} autoCapitalize="none" required={true} />
</View>
<TouchableOpacity onPress={() => navigation.navigate('Withdrawal')} style={styles.butt3}>
<Text style={styles.text1}>Continue</Text>
<AntDesign name="arrowright" size={26} color="black" />
</TouchableOpacity>
</View>
</View>
<Modal
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.modalContainer}
backdropOpacity={0} // Set the backdropOpacity to 0 (transparent)
>
<View style={styles.modalme}>
<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>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#cccccc',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
dep1: {
borderWidth: 1,
height: 'auto',
width: '80%',
padding: 20,
},
texty: {
position: 'absolute',
top: -22,
left: 10,
fontSize: 20,
fontWeight: '600',
backgroundColor: '#cccccc',
padding: 10,
},
butt3: {
backgroundColor: 'white',
width: '100%',
borderRadius: 5,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
padding: 18,
marginTop: 30,
},
text1: {
fontWeight: '600',
fontSize: 18,
},
labels: {
marginBottom: 5,
},
labels1: {
marginTop: 5,
color: 'teal',
},
sizer: {
borderWidth: 1,
height: 50,
width: '100%',
fontSize: 18,
paddingLeft: 20,
borderRadius: 5,
borderColor: 'white',
color: 'white',
},
modeme: {
borderWidth: 1,
height: 50,
width: '100%',
fontSize: 22,
paddingLeft: 20,
borderRadius: 5,
borderColor: 'white',
color: 'white',
display: 'flex',
justifyContent: 'center',
marginTop: 20,
},
modalContainer: {
borderWidth: 0,
position: 'absolute',
height: 350,
width: '100%',
bottom: -20,
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
backgroundColor: 'white',
marginLeft: 0,
},
modalme: {
borderWidth: 0,
height: 350,
borderTopRightRadius: 30,
borderTopLeftRadius: 30,
backgroundColor: 'red',
display: 'flex',
alignItems: 'center',
paddingTop: 20,
},
scroller: {
display: 'flex',
alignItems: 'center',
gap: 20,
},
mytexty: {
fontSize: 20,
},
});
export default WamountScreen;
Conclusion
In this blog post, we've successfully implemented modal functionality in a React Native application. The modal allows users to select a bank from a list of Nigeria banks, and the selected bank is displayed in the main content area. This implementation can be used as a foundation for creating more advanced modal interactions and user interfaces in your React Native projects.
I hope you find this blog post helpful for your React Native development endeavors.