Skip to content

P
projecttes
Commit 27fdb9a6 authored by Prasetya Saputra's avatar Prasetya Saputra
Browse files
Options

update tab bar

parent 6634a48f
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 40 deletions
App.js
View file @ 27fdb9a6
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, ToastAndroid } from 'react-native';
import { StyleSheet, Text, View, TextInput, Button, ToastAndroid, BackHandler } from 'react-native';
import { Card } from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { RFPercentage } from "react-native-responsive-fontsize";
import Axios from 'axios';
import { ScrollView } from 'react-native-gesture-handler';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { Alert } from 'react-native';
// ini dirubah ke2 kali
function backAction() {
Alert.alert("Warning!", "Apakah yakin akan keluar aplikasi ?", [
{
text: "Cancel",
onPress: () => null
},
{ text: "YES", onPress: () => BackHandler.exitApp() }
]);
return true;
}
function HomeScreen({ navigation: { navigate } }) {
function Penjumlahan({ navigation: { navigate } }) {
const [nilaiA, setNilaiA] = useState(0);
const [nilaiB, setNilaiB] = useState(0);
const [resultAB, setResultAB] = useState(0);
BackHandler.addEventListener("hardwareBackPress", backAction);
function hitung() {
if (nilaiA == '' && nilaiB == '') {
ToastAndroid.show('Kotak A & B Harus di isi.', ToastAndroid.SHORT)
......@@ -30,36 +47,52 @@ function HomeScreen({ navigation: { navigate } }) {
}
return (
<View style={styles.container}>
<Text>Tugas Pertama : Penjumlahan</Text>
<Text></Text>
<TextInput
onChangeText={Text => setNilaiA(Text)}
style={{ textAlign: 'center', height: 40, width: 50, borderWidth: 1, borderColor: 'black' }}
keyboardType='numeric'
/>
<Text>+</Text>
<TextInput
onChangeText={Text => setNilaiB(Text)}
style={{ textAlign: 'center', height: 40, width: 50, borderWidth: 1, borderColor: 'black' }}
keyboardType='numeric'
/>
<Text></Text>
<Button
onPress={hitung}
title="Process"
/>
<Text></Text>
<Text>Result : {resultAB}</Text>
<Text></Text>
<Button title="Tampilkan List" onPress={() => navigate('List')} />
<StatusBar style="auto" />
<View style={styles.container, { marginTop: 25 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
style={{ backgroundColor: 'black', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
onPress={() => navigate('Jumlah')}
>
<Text style={{ color:'white', fontSize: RFPercentage(2), textAlign: 'center' }}>Penjumlahan</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ backgroundColor: 'white', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
onPress={() => navigate('List')}
>
<Text style={{ fontSize: RFPercentage(2), textAlign: 'center' }}>List</Text>
</TouchableOpacity>
</View>
<View style={styles.container}>
<Text>Tugas Pertama : Penjumlahan</Text>
<Text></Text>
<TextInput
onChangeText={Text => setNilaiA(Text)}
style={{ textAlign: 'center', height: hp('5%'), width: wp('20%'), borderWidth: 1, borderColor: 'black' }}
keyboardType='numeric'
/>
<Text>+</Text>
<TextInput
onChangeText={Text => setNilaiB(Text)}
style={{ textAlign: 'center', height: hp('5%'), width: wp('20%'), borderWidth: 1, borderColor: 'black' }}
keyboardType='numeric'
/>
<Text></Text>
<Button
onPress={hitung}
title="Process"
/>
<Text></Text>
<Text>Result : {resultAB}</Text>
<Text></Text>
<StatusBar style="auto" />
</View>
</View>
);
}
function ListTitle() {
function ListTitle({ navigation: { navigate } }) {
const [Title, setTitle] = useState([]);
......@@ -72,14 +105,30 @@ function ListTitle() {
});
return (
<ScrollView>
{
Title.map((data, index) => {
return (
<Card key={index}><Text>{data.title}</Text></Card>)
})
}
</ScrollView>
<View style={{ marginTop: 25 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
style={{ backgroundColor: 'white', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
onPress={() => navigate('Jumlah')}
>
<Text style={{ fontSize: RFPercentage(2), textAlign: 'center' }}>Penjumlahan</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ backgroundColor: 'black', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
onPress={() => navigate('List')}
>
<Text style={{color:'white', fontSize: RFPercentage(2), textAlign: 'center' }}>List</Text>
</TouchableOpacity>
</View>
<ScrollView>
{
Title.map((data, index) => {
return (
<Card key={index}><Text>{data.title}</Text></Card>)
})
}
</ScrollView>
</View>
);
}
......@@ -90,8 +139,8 @@ function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, }} />
<Stack.Screen name="List" component={ListTitle} />
<Stack.Screen name="Jumlah" component={Penjumlahan} options={{ headerShown: false, }} />
<Stack.Screen name="List" component={ListTitle} options={{ headerShown: false, }} />
</Stack.Navigator>
</NavigationContainer>
);
......@@ -99,7 +148,8 @@ function App() {
const styles = StyleSheet.create({
container: {
flex: 1,
height: hp('88,2%'),
width: wp('100%'),
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
......
app.json
View file @ 27fdb9a6
{
"expo": {
"name": "Project Test",
"name": "projecttes",
"slug": "projecttes",
"version": "1.0.0",
"orientation": "portrait",
......
package-lock.json
View file @ 27fdb9a6
......@@ -7472,6 +7472,19 @@
"fbjs": "^1.0.0"
}
},
"react-native-responsive-fontsize": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/react-native-responsive-fontsize/-/react-native-responsive-fontsize-0.5.0.tgz",
"integrity": "sha512-yeZ6ub1QhBmK5cwkj2+SzrcNOE5OXS9ritLDF3X7x7X6aRbOGXAOKQ7VoLnctOeLxJla98n+Fcs5+0rtvYwlBA==",
"requires": {
"react-native-iphone-x-helper": "^1.3.1"
}
},
"react-native-responsive-screen": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/react-native-responsive-screen/-/react-native-responsive-screen-1.4.2.tgz",
"integrity": "sha512-BLYz0UUpeohrib7jbz6wDmtBD5OmiuMRko4IT8kIF63taXPod/c5iZgmWnr5qOnK8hMuKiGMvsM3sC+eHX/lEQ=="
},
"react-native-safe-area-context": {
"version": "3.1.9",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment