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 React from 'react';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import { useState } from 'react'; 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 { Card } from 'react-native-elements';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import { RFPercentage } from "react-native-responsive-fontsize";
import Axios from 'axios'; 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 // 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 [nilaiA, setNilaiA] = useState(0);
const [nilaiB, setNilaiB] = useState(0); const [nilaiB, setNilaiB] = useState(0);
const [resultAB, setResultAB] = useState(0); const [resultAB, setResultAB] = useState(0);
BackHandler.addEventListener("hardwareBackPress", backAction);
function hitung() { function hitung() {
if (nilaiA == '' && nilaiB == '') { if (nilaiA == '' && nilaiB == '') {
ToastAndroid.show('Kotak A & B Harus di isi.', ToastAndroid.SHORT) ToastAndroid.show('Kotak A & B Harus di isi.', ToastAndroid.SHORT)
...@@ -30,36 +47,52 @@ function HomeScreen({ navigation: { navigate } }) { ...@@ -30,36 +47,52 @@ function HomeScreen({ navigation: { navigate } }) {
} }
return ( return (
<View style={styles.container}>
<Text>Tugas Pertama : Penjumlahan</Text> <View style={styles.container, { marginTop: 25 }}>
<Text></Text> <View style={{ flexDirection: 'row' }}>
<TextInput <TouchableOpacity
onChangeText={Text => setNilaiA(Text)} style={{ backgroundColor: 'black', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
style={{ textAlign: 'center', height: 40, width: 50, borderWidth: 1, borderColor: 'black' }} onPress={() => navigate('Jumlah')}
keyboardType='numeric' >
/> <Text style={{ color:'white', fontSize: RFPercentage(2), textAlign: 'center' }}>Penjumlahan</Text>
<Text>+</Text> </TouchableOpacity>
<TextInput <TouchableOpacity
onChangeText={Text => setNilaiB(Text)} style={{ backgroundColor: 'white', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
style={{ textAlign: 'center', height: 40, width: 50, borderWidth: 1, borderColor: 'black' }} onPress={() => navigate('List')}
keyboardType='numeric' >
/> <Text style={{ fontSize: RFPercentage(2), textAlign: 'center' }}>List</Text>
<Text></Text> </TouchableOpacity>
<Button </View>
onPress={hitung} <View style={styles.container}>
title="Process" <Text>Tugas Pertama : Penjumlahan</Text>
/> <Text></Text>
<Text></Text> <TextInput
<Text>Result : {resultAB}</Text> onChangeText={Text => setNilaiA(Text)}
<Text></Text> style={{ textAlign: 'center', height: hp('5%'), width: wp('20%'), borderWidth: 1, borderColor: 'black' }}
<Button title="Tampilkan List" onPress={() => navigate('List')} /> keyboardType='numeric'
<StatusBar style="auto" /> />
<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> </View>
); );
} }
function ListTitle() { function ListTitle({ navigation: { navigate } }) {
const [Title, setTitle] = useState([]); const [Title, setTitle] = useState([]);
...@@ -72,14 +105,30 @@ function ListTitle() { ...@@ -72,14 +105,30 @@ function ListTitle() {
}); });
return ( return (
<ScrollView> <View style={{ marginTop: 25 }}>
{ <View style={{ flexDirection: 'row' }}>
Title.map((data, index) => { <TouchableOpacity
return ( style={{ backgroundColor: 'white', width: wp('50%'), height: hp('8%'), justifyContent: 'center' }}
<Card key={index}><Text>{data.title}</Text></Card>) onPress={() => navigate('Jumlah')}
}) >
} <Text style={{ fontSize: RFPercentage(2), textAlign: 'center' }}>Penjumlahan</Text>
</ScrollView> </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() { ...@@ -90,8 +139,8 @@ function App() {
return ( return (
<NavigationContainer> <NavigationContainer>
<Stack.Navigator initialRouteName="Home"> <Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, }} /> <Stack.Screen name="Jumlah" component={Penjumlahan} options={{ headerShown: false, }} />
<Stack.Screen name="List" component={ListTitle} /> <Stack.Screen name="List" component={ListTitle} options={{ headerShown: false, }} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );
...@@ -99,7 +148,8 @@ function App() { ...@@ -99,7 +148,8 @@ function App() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, height: hp('88,2%'),
width: wp('100%'),
backgroundColor: '#fff', backgroundColor: '#fff',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
......
app.json
View file @ 27fdb9a6
{ {
"expo": { "expo": {
"name": "Project Test", "name": "projecttes",
"slug": "projecttes", "slug": "projecttes",
"version": "1.0.0", "version": "1.0.0",
"orientation": "portrait", "orientation": "portrait",
......
package-lock.json
View file @ 27fdb9a6
...@@ -7472,6 +7472,19 @@ ...@@ -7472,6 +7472,19 @@
"fbjs": "^1.0.0" "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": { "react-native-safe-area-context": {
"version": "3.1.9", "version": "3.1.9",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.9.tgz", "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