update

.expo-shared/assets.json

+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.js

+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 { Card } from 'react-native-elements';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import Axios from 'axios';
+import { ScrollView } from 'react-native-gesture-handler';
+
+function HomeScreen({ navigation: { navigate } }) {
+  const [nilaiA, setNilaiA] = useState(0);
+  const [nilaiB, setNilaiB] = useState(0);
+  const [resultAB, setResultAB] = useState(0);
+
+  function hitung() {
+    if (nilaiA == '' && nilaiB == '') {
+      ToastAndroid.show('Kotak A & B Harus di isi.', ToastAndroid.SHORT)
+    } else
+      if (nilaiA == '') {
+        ToastAndroid.show('Kotak A Harus di isi.', ToastAndroid.SHORT)
+      } else if (nilaiB == '') {
+        ToastAndroid.show('Kotak B Harus di isi.', ToastAndroid.SHORT)
+      }
+      else {
+        setResultAB(parseInt(nilaiA) + parseInt(nilaiB))
+      }
+  }
+
+  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>
+  );
+}
+
+
+function ListTitle() {
+
+  const [Title, setTitle] = useState([]);
+
+  Axios.get('https://jsonplaceholder.typicode.com/albums').then(function (response) {
+    console.log(response.data);
+    setTitle(response.data)
+  })
+    .catch(function (error) {
+      console.log(error);
+    });
+
+  return (
+    <ScrollView>
+      {
+        Title.map((data, index) => {
+          return (
+            <Card key={index}><Text>{data.title}</Text></Card>)
+        })
+      }
+    </ScrollView>
+
+  );
+}
+
+const Stack = createStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, }} />
+        <Stack.Screen name="List" component={ListTitle} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default App;
\ No newline at end of file

App1.js

+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';
+
+export default function App(){
+
+  const [panjang, setPanjang] = useState(0);
+  const [lebar, setLebar] = useState(0);
+  const [hasil, setHasil] = useState(0);
+
+  // hitung () {
+  //   let jumlah = this.state.panjang*this.state.lebar;
+  //   this.setState({hasil:jumlah});
+  // }
+
+  return (
+    <View style={styles.container}>
+      <Text>Test</Text>
+      <TextInput onChangeText={text => setPanjang(text)} style={{borderWidth:1,borderColor:'black'}}></TextInput>
+      <TextInput onChangeText={text => setLebar(text)} style={{borderWidth:1,borderColor:'black'}}></TextInput>
+      <Button
+      onPress={()=>setHasil(panjang*lebar)}
+      title="Test"
+      />
+      <Text>{hasil}</Text>
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

App2.js

+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, TextInput, Button, Alert, ToastAndroid } from 'react-native';
+import Axios from 'axios';
+import axios from 'axios';
+
+export default function App() {
+
+  const [nilaiA, setNilaiA] = useState(0);
+  const [nilaiB, setNilaiB] = useState(0);
+  const [resultAB, setResultAB] = useState(0);
+  const [kategori, setKategori] = useState([]);
+
+  function hitung() {
+    if (nilaiA == '' && nilaiB == '') {
+      ToastAndroid.show('Kotak A & B Harus di isi.', ToastAndroid.SHORT)
+    } else
+      if (nilaiA == '') {
+        ToastAndroid.show('Kotak A Harus di isi.', ToastAndroid.SHORT)
+      } else if (nilaiB == '') {
+        ToastAndroid.show('Kotak B Harus di isi.', ToastAndroid.SHORT)
+      }
+      else {
+        setResultAB(parseInt(nilaiA) + parseInt(nilaiB))
+        Axios.get('https://developers.zomato.com/api/v2.1/categories', { headers: { 'user-key': 'd7bda05f720629fa168dffbe9926c78e' } }).then(function (response) {
+          console.log(response.data.categories);
+          setKategori(response.data.categories)
+        })
+          .catch(function (error) {
+            console.log(error);
+          });
+      }
+  }
+
+  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>
+      {
+            kategori.map((data, index) => {
+              return (<Text key={index}>{data.categories.name}</Text>)
+            })
+      }
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

app.json

+{
+  "expo": {
+    "name": "projecttes",
+    "slug": "projecttes",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "id.projecttes"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package.json

+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.3",
+    "@react-navigation/material-top-tabs": "^5.3.11",
+    "@react-navigation/native": "^5.9.0",
+    "@react-navigation/stack": "^5.13.0",
+    "axios": "^0.21.1",
+    "expo": "~40.0.0",
+    "expo-status-bar": "~1.0.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-display": "^1.0.8",
+    "react-native-elements": "^3.1.0",
+    "react-native-gesture-handler": "^1.9.0",
+    "react-native-indicator": "^1.2.2",
+    "react-native-reanimated": "^1.13.2",
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-screens": "^2.15.2",
+    "react-native-send-intent": "^1.2.2",
+    "react-native-shadow-cards": "^1.0.2",
+    "react-native-simple-card": "^1.0.1",
+    "react-native-svg": "^12.1.0",
+    "react-native-tab-view": "^2.15.2",
+    "react-native-web": "~0.13.12",
+    "react-navigation": "^4.4.3"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.9.0"
+  },
+  "private": true
+}