IT3681 - Mobile Banking Interface Mockup
Course Code
IT3681
Lab Title
Develop a mobile banking interface mockup with screens for login, balance view, fund transfer, and
transaction history
Objective
To design and implement a basic mobile banking app interface using React Native, showcasing navigation
between multiple screens and UI interactions.
Tools Required
- React Native CLI or Expo
- VS Code or any code editor
- Android Emulator or physical device
Screens to Implement
1. Login Screen: Username/password input, simple logic, navigates to Balance.
2. Balance View: Displays account balance, buttons to Transfer and History.
3. Fund Transfer: Inputs for recipient and amount, alerts on success/error.
4. Transaction History: Lists previous mock transactions with color-coded values.
IT3681 - Mobile Banking Interface Mockup
Learning Outcomes
- Navigation and screen management in React Native
- Handling form inputs and basic validation
- Conditional styling and user alerts
- Building clean, readable layouts
Code Implementation
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, Alert, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
const S = StyleSheet.create({
c: { flex: 1, justifyContent: 'center', alignItems: 'center' },
h1: { fontSize: 28, fontWeight: 'bold', margin: 20 },
h2: { fontSize: 22, margin: 10 },
i: { borderWidth: 1, borderColor: '#ccc', padding: 8, margin: 5, width: '80%' },
b: { backgroundColor: '#07f', color: '#fff', padding: 10, margin: 5 },
row: { flexDirection: 'row', justifyContent: 'space-between', width: '80%', padding: 10, borderWidth: 1, margin: 2 }
});
const Btn = ({ onPress, txt }) => <TouchableOpacity onPress={onPress}><Text
style={S.b}>{txt}</Text></TouchableOpacity>;
const Login = ({ navigation }) => {
const [u, setU] = useState(''), [p, setP] = useState('');
return (
<View style={S.c}>
<Text style={S.h1}>Bank</Text>
<TextInput style={S.i} placeholder="User" value={u} onChangeText={setU} />
<TextInput style={S.i} placeholder="Pass" value={p} onChangeText={setP} secureTextEntry />
<Btn onPress={() => u === 'u' && p === 'p' ? navigation.navigate('Balance') : Alert.alert('Fail')} txt="Login"
/>
</View>
);
};
const Balance = ({ navigation }) => (
<View style={S.c}>
<Text style={S.h2}>Balance</Text>
<Text style={S.h1}>$5450.75</Text>
<Btn onPress={() => navigation.navigate('Transfer')} txt="Transfer" />
<Btn onPress={() => navigation.navigate('History')} txt="History" />
</View>
);
IT3681 - Mobile Banking Interface Mockup
const Transfer = ({ navigation }) => {
const [to, setTo] = useState(''), [amt, setAmt] = useState('');
return (
<View style={S.c}>
<Text style={S.h2}>Transfer</Text>
<TextInput style={S.i} placeholder="To" value={to} onChangeText={setTo} />
<TextInput style={S.i} placeholder="Amount" value={amt} onChangeText={setAmt} keyboardType="numeric" />
<Btn onPress={() => !to || +amt <= 0 ? Alert.alert('Invalid') : (Alert.alert('Success', `$${amt} to ${to}`),
navigation.goBack())} txt="Send" />
</View>
);
};
const History = () => {
const data = [
{ id: '1', desc: 'Coffee', amt: -5 },
{ id: '2', desc: 'Deposit', amt: 100 },
{ id: '3', desc: 'Rent', amt: -500 },
];
return (
<View style={S.c}>
<Text style={S.h2}>History</Text>
<FlatList data={data} keyExtractor={i => i.id} renderItem={({ item }) => (
<View style={S.row}>
<Text>{item.desc}</Text>
<Text style={{ color: item.amt > 0 ? 'green' : 'red' }}>${item.amt.toFixed(2)}</Text>
</View>
)} />
</View>
);
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Balance" component={Balance} />
<Stack.Screen name="Transfer" component={Transfer} />
<Stack.Screen name="History" component={History} />
</Stack.Navigator>
</NavigationContainer>
);
}
