Compare commits
13 Commits
tabs/25-ma
...
qc/1-apr-2
| Author | SHA1 | Date | |
|---|---|---|---|
| 98f8c7e2bf | |||
| 81bbd8e6b0 | |||
| 57159d2c45 | |||
| 66373fa65b | |||
| 6d545f2af9 | |||
| eeb95336f2 | |||
| 6fb3b229c3 | |||
| 76deec9c53 | |||
| 31948f71db | |||
| 16decd89c8 | |||
| ecbcc12abf | |||
| 0cb734e790 | |||
| 0d2fef1878 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -81,4 +81,7 @@ yarn-error.*
|
|||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# secrets
|
||||||
|
secrets/
|
||||||
|
|
||||||
# @end expo-cli
|
# @end expo-cli
|
||||||
8
.qwen/settings.json
Normal file
8
.qwen/settings.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git add *)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"$version": 3
|
||||||
|
}
|
||||||
7
.qwen/settings.json.orig
Normal file
7
.qwen/settings.json.orig
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git add *)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,369 +0,0 @@
|
|||||||
# Fix Phone Number Input - iOS 16+ Compatibility
|
|
||||||
|
|
||||||
## 📋 Ringkasan Task
|
|
||||||
Memperbaiki masalah phone number input pada `screens/Authentication/LoginView.tsx` yang tidak berfungsi dengan baik pada iOS versi 16 ke atas.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Tujuan
|
|
||||||
1. Fix keyboard overlay issues pada iOS 16+
|
|
||||||
2. Perbaiki layout measurement dan safe area
|
|
||||||
3. Pastikan input phone number responsive di semua device
|
|
||||||
4. Maintain UX yang konsisten dengan Android
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📁 File yang Terlibat
|
|
||||||
|
|
||||||
### File Utama
|
|
||||||
- **Target**: `screens/Authentication/LoginView.tsx`
|
|
||||||
|
|
||||||
### File Pendukung
|
|
||||||
- `components/TextInput/TextInputCustom.tsx` - Alternatif custom input
|
|
||||||
- `styles/global-styles.ts` - Styling adjustments
|
|
||||||
- `package.json` - Update dependencies (jika perlu)
|
|
||||||
|
|
||||||
### Dependencies Terkait
|
|
||||||
- `react-native-international-phone-number`: ^0.9.3
|
|
||||||
- `react-native-keyboard-controller`: ^1.18.6
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔍 Analisis Masalah
|
|
||||||
|
|
||||||
### Issues pada iOS 16+
|
|
||||||
|
|
||||||
#### 1. **Keyboard Overlay Problem**
|
|
||||||
**Symptom**: Input field tertutup keyboard saat aktif
|
|
||||||
**Cause**:
|
|
||||||
- Safe area insets tidak terhitung dengan benar
|
|
||||||
- Keyboard animation tidak sinkron dengan layout
|
|
||||||
- `react-native-keyboard-controller` tidak terintegrasi dengan baik
|
|
||||||
|
|
||||||
#### 2. **Layout Measurement Issues**
|
|
||||||
**Symptom**: Input field berubah ukuran secara tidak terduga
|
|
||||||
**Cause**:
|
|
||||||
- Dynamic Type settings mempengaruhi layout
|
|
||||||
- Font scaling pada iOS 16+ berbeda
|
|
||||||
- Container tidak memiliki fixed height
|
|
||||||
|
|
||||||
#### 3. **Focus Behavior**
|
|
||||||
**Symptom**: Input tidak auto-scroll saat di-focus
|
|
||||||
**Cause**:
|
|
||||||
- ScrollView/KeyboardAvoidingView configuration salah
|
|
||||||
- Keyboard dismissing behavior tidak konsisten
|
|
||||||
|
|
||||||
#### 4. **Visual Glitches**
|
|
||||||
**Symptom**: Country flag dropdown tidak muncul atau terpotong
|
|
||||||
**Cause**:
|
|
||||||
- Z-index issues pada iOS
|
|
||||||
- Modal/Popover rendering problems
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎨 Solusi yang Direkomendasikan
|
|
||||||
|
|
||||||
### Option 1: **KeyboardAvoidingView Enhancement** (RECOMMENDED)
|
|
||||||
**Effort**: Medium
|
|
||||||
**Impact**: High
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { KeyboardAvoidingView, Platform } from "react-native";
|
|
||||||
|
|
||||||
<KeyboardAvoidingView
|
|
||||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
||||||
keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 50}
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
>
|
|
||||||
<ViewWrapper>
|
|
||||||
{/* Content */}
|
|
||||||
</ViewWrapper>
|
|
||||||
</KeyboardAvoidingView>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Keuntungan**:
|
|
||||||
- Native solution dari React Native
|
|
||||||
- Tidak perlu tambahan library
|
|
||||||
- Stabil untuk iOS 16+
|
|
||||||
|
|
||||||
**Kekurangan**:
|
|
||||||
- Perlu tuning offset untuk setiap device
|
|
||||||
- Tidak se-smooth keyboard controller
|
|
||||||
|
|
||||||
### Option 2: **React Native Keyboard Controller** (BETTER UX)
|
|
||||||
**Effort**: Medium-High
|
|
||||||
**Impact**: High
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { KeyboardProvider } from "react-native-keyboard-controller";
|
|
||||||
|
|
||||||
// Wrap di root app (sudah ada di _layout.tsx)
|
|
||||||
<KeyboardProvider>
|
|
||||||
<App />
|
|
||||||
</KeyboardProvider>
|
|
||||||
|
|
||||||
// Di LoginView
|
|
||||||
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
|
|
||||||
|
|
||||||
<KeyboardAwareScrollView
|
|
||||||
bottomOffset={20}
|
|
||||||
keyboardOffset={10}
|
|
||||||
>
|
|
||||||
{/* Content */}
|
|
||||||
</KeyboardAwareScrollView>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Keuntungan**:
|
|
||||||
- Smooth keyboard animations
|
|
||||||
- Better control over keyboard behavior
|
|
||||||
- Cross-platform consistency
|
|
||||||
|
|
||||||
**Kekurangan**:
|
|
||||||
- Perlu verify konfigurasi yang sudah ada
|
|
||||||
- Mungkin perlu update library
|
|
||||||
|
|
||||||
### Option 3: **Custom Phone Input** (FALLBACK)
|
|
||||||
**Effort**: High
|
|
||||||
**Impact**: Medium
|
|
||||||
|
|
||||||
Membuat custom phone input dengan:
|
|
||||||
- TextInputCustom component
|
|
||||||
- Country code picker modal
|
|
||||||
- Validation logic
|
|
||||||
|
|
||||||
**Keuntungan**:
|
|
||||||
- Full control atas behavior
|
|
||||||
- Tidak depend on third-party issues
|
|
||||||
|
|
||||||
**Kekurangan**:
|
|
||||||
- Development time lebih lama
|
|
||||||
- Perlu testing ekstensif
|
|
||||||
- Maintain code sendiri
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 Breakdown Task
|
|
||||||
|
|
||||||
### Task 1: Research & Setup ✅
|
|
||||||
- [x] Identifikasi masalah pada iOS 16+
|
|
||||||
- [x] Cek dokumentasi library
|
|
||||||
- [x] Review existing implementation
|
|
||||||
- [ ] Test di iOS simulator (iOS 16+)
|
|
||||||
- [ ] Test di device fisik (jika ada)
|
|
||||||
|
|
||||||
### Task 2: Implement KeyboardAvoidingView Fix
|
|
||||||
- [ ] Wrap ViewWrapper dengan KeyboardAvoidingView
|
|
||||||
- [ ] Set behavior berdasarkan Platform
|
|
||||||
- [ ] Adjust keyboardVerticalOffset
|
|
||||||
- [ ] Test di berbagai ukuran layar
|
|
||||||
- [ ] Test landscape mode (jika applicable)
|
|
||||||
|
|
||||||
### Task 3: Adjust Layout & Styling
|
|
||||||
- [ ] Fix container height/width
|
|
||||||
- [ ] Adjust safe area insets
|
|
||||||
- [ ] Test dengan Dynamic Type settings
|
|
||||||
- [ ] Ensure consistent padding/margin
|
|
||||||
|
|
||||||
### Task 4: Test Focus Behavior
|
|
||||||
- [ ] Auto-scroll saat focus
|
|
||||||
- [ ] Keyboard dismiss saat tap outside
|
|
||||||
- [ ] Next/previous field navigation (jika ada)
|
|
||||||
- [ ] Input validation on blur
|
|
||||||
|
|
||||||
### Task 5: Country Picker Fix
|
|
||||||
- [ ] Verify dropdown z-index
|
|
||||||
- [ ] Test modal presentation
|
|
||||||
- [ ] Ensure flag icons visible
|
|
||||||
- [ ] Test search functionality
|
|
||||||
|
|
||||||
### Task 6: Testing & QA
|
|
||||||
- [ ] Test iOS 16, 17, 18
|
|
||||||
- [ ] Test Android (regression)
|
|
||||||
- [ ] Test dengan berbagai device sizes
|
|
||||||
- [ ] Test accessibility (VoiceOver)
|
|
||||||
- [ ] Performance test (no lag)
|
|
||||||
|
|
||||||
### Task 7: Documentation
|
|
||||||
- [ ] Update code comments
|
|
||||||
- [ ] Document iOS-specific workarounds
|
|
||||||
- [ ] Add troubleshooting notes
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💻 Implementation Guidelines
|
|
||||||
|
|
||||||
### Recommended Implementation (Option 1 + 2 Hybrid)
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
import { KeyboardAvoidingView, Platform } from "react-native";
|
|
||||||
import { KeyboardProvider } from "react-native-keyboard-controller";
|
|
||||||
|
|
||||||
// Di LoginView.tsx
|
|
||||||
export default function LoginView() {
|
|
||||||
return (
|
|
||||||
<ViewWrapper
|
|
||||||
withBackground
|
|
||||||
refreshControl={
|
|
||||||
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<KeyboardAvoidingView
|
|
||||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
||||||
keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 50}
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
>
|
|
||||||
<View style={[GStyles.authContainer, { paddingBottom: 40 }]}>
|
|
||||||
{/* Title Section */}
|
|
||||||
<View style={GStyles.authContainerTitle}>
|
|
||||||
<Text style={GStyles.authSubTitle}>WELCOME TO</Text>
|
|
||||||
<Spacing height={5} />
|
|
||||||
<Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
|
|
||||||
<Spacing height={5} />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Spacing height={50} />
|
|
||||||
|
|
||||||
{/* Phone Input - Wrap dengan View untuk stability */}
|
|
||||||
<View style={{ marginBottom: 20 }}>
|
|
||||||
<PhoneInput
|
|
||||||
value={inputValue}
|
|
||||||
onChangePhoneNumber={handleInputValue}
|
|
||||||
selectedCountry={selectedCountry}
|
|
||||||
onChangeSelectedCountry={handleSelectedCountry}
|
|
||||||
defaultCountry="ID"
|
|
||||||
placeholder="Masukkan nomor"
|
|
||||||
// Add iOS-specific props
|
|
||||||
textInputProps={{
|
|
||||||
keyboardType: "phone-pad",
|
|
||||||
autoComplete: "tel",
|
|
||||||
importantForAutofill: "yes",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Spacing />
|
|
||||||
|
|
||||||
{/* Login Button */}
|
|
||||||
<ButtonCustom
|
|
||||||
onPress={handleLogin}
|
|
||||||
disabled={loadingTerm}
|
|
||||||
isLoading={loading || loadingTerm}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</ButtonCustom>
|
|
||||||
|
|
||||||
<Spacing height={50} />
|
|
||||||
|
|
||||||
{/* Terms Text */}
|
|
||||||
<Text style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}>
|
|
||||||
Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
color: MainColor.yellow,
|
|
||||||
textDecorationLine: "underline",
|
|
||||||
}}
|
|
||||||
onPress={() => {
|
|
||||||
const toUrl = `${url}/terms-of-service.html`;
|
|
||||||
openBrowser(toUrl);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Syarat & Ketentuan
|
|
||||||
</Text>{" "}
|
|
||||||
dan seluruh kebijakan privasi yang berlaku.
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{/* Version Info */}
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
bottom: 35,
|
|
||||||
right: 50,
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: "thin",
|
|
||||||
fontStyle: "italic",
|
|
||||||
color: MainColor.white_gray,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{version} | powered by muku.id
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</KeyboardAvoidingView>
|
|
||||||
</ViewWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Styling Adjustments
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// styles/global-styles.ts
|
|
||||||
export const GStyles = StyleSheet.create({
|
|
||||||
authContainer: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: "center",
|
|
||||||
paddingHorizontal: 24,
|
|
||||||
// Add padding bottom untuk keyboard space
|
|
||||||
paddingBottom: Platform.OS === "ios" ? 40 : 20,
|
|
||||||
},
|
|
||||||
// ... existing styles
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✅ Acceptance Criteria
|
|
||||||
|
|
||||||
### Functional
|
|
||||||
- [ ] Input field tidak tertutup keyboard saat focus
|
|
||||||
- [ ] Country picker dropdown berfungsi dengan baik
|
|
||||||
- [ ] Auto-scroll bekerja smooth saat focus
|
|
||||||
- [ ] Keyboard dismiss saat tap outside
|
|
||||||
- [ ] Input validation berjalan normal
|
|
||||||
|
|
||||||
### Visual
|
|
||||||
- [ ] Layout tidak berubah saat keyboard muncul
|
|
||||||
- [ ] No visual glitches atau flickering
|
|
||||||
- [ ] Country flag icons visible
|
|
||||||
- [ ] Consistent spacing dan padding
|
|
||||||
|
|
||||||
### Compatibility
|
|
||||||
- [ ] iOS 16, 17, 18 - Tested ✅
|
|
||||||
- [ ] Android - No regression ✅
|
|
||||||
- [ ] iPad - Responsive ✅
|
|
||||||
- [ ] Landscape mode - Usable ✅
|
|
||||||
|
|
||||||
### Performance
|
|
||||||
- [ ] No lag saat typing
|
|
||||||
- [ ] Smooth keyboard animations
|
|
||||||
- [ ] No memory leaks
|
|
||||||
- [ ] Fast input response
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🔗 References
|
|
||||||
- [React Native KeyboardAvoidingView Docs](https://reactnative.dev/docs/keyboardavoidingview)
|
|
||||||
- [react-native-keyboard-controller](https://github.com/kirillzyusko/react-native-keyboard-controller)
|
|
||||||
- [react-native-international-phone-number Issues](https://github.com/bluesky01/react-native-international-phone-number/issues)
|
|
||||||
- [iOS 16+ Keyboard Changes](https://developer.apple.com/documentation/uikit/uikit)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📊 Estimated Effort
|
|
||||||
- **Complexity**: Medium
|
|
||||||
- **Time Estimate**: 2-4 jam
|
|
||||||
- **Risk Level**: Medium (perlu testing ekstensif di device)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📝 Notes
|
|
||||||
- **Priority**: High (login adalah critical path)
|
|
||||||
- **Testing**: Wajib test di device fisik jika memungkinkan
|
|
||||||
- **Fallback**: Jika Option 1 & 2 gagal, siap untuk implement Option 3 (custom input)
|
|
||||||
- **Monitoring**: Add analytics untuk track input completion rate
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Created**: 2026-03-25
|
|
||||||
**Status**: Pending
|
|
||||||
**Priority**: High
|
|
||||||
**Related Issue**: iOS 16+ keyboard compatibility
|
|
||||||
@@ -100,7 +100,7 @@ packagingOptions {
|
|||||||
applicationId 'com.bip.hipmimobileapp'
|
applicationId 'com.bip.hipmimobileapp'
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 1
|
versionCode 5
|
||||||
versionName "1.0.2"
|
versionName "1.0.2"
|
||||||
|
|
||||||
buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
|
buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
|
||||||
|
|||||||
7
android/app/src/debugOptimized/AndroidManifest.xml
Normal file
7
android/app/src/debugOptimized/AndroidManifest.xml
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
xmlns:tools="http://schemas.android.com/tools">
|
||||||
|
|
||||||
|
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||||
|
|
||||||
|
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
|
||||||
|
</manifest>
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
</intent-filter>
|
</intent-filter>
|
||||||
<intent-filter android:autoVerify="true" data-generated="true">
|
<intent-filter android:autoVerify="true" data-generated="true">
|
||||||
<action android:name="android.intent.action.VIEW"/>
|
<action android:name="android.intent.action.VIEW"/>
|
||||||
<data android:scheme="https" android:host="cld-dkr-hipmi-stg.wibudev.com" android:pathPrefix="/"/>
|
<data android:scheme="https" android:host="hipmi.muku.id" android:pathPrefix="/"/>
|
||||||
<category android:name="android.intent.category.BROWSABLE"/>
|
<category android:name="android.intent.category.BROWSABLE"/>
|
||||||
<category android:name="android.intent.category.DEFAULT"/>
|
<category android:name="android.intent.category.DEFAULT"/>
|
||||||
</intent-filter>
|
</intent-filter>
|
||||||
|
|||||||
@@ -6,32 +6,17 @@ buildscript {
|
|||||||
mavenCentral()
|
mavenCentral()
|
||||||
}
|
}
|
||||||
dependencies {
|
dependencies {
|
||||||
classpath 'com.google.gms:google-services:4.4.1'
|
classpath 'com.google.gms:google-services:4.4.1'
|
||||||
classpath('com.android.tools.build:gradle')
|
classpath('com.android.tools.build:gradle')
|
||||||
classpath('com.facebook.react:react-native-gradle-plugin')
|
classpath('com.facebook.react:react-native-gradle-plugin')
|
||||||
classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
|
classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
allprojects {
|
|
||||||
repositories {
|
|
||||||
google()
|
|
||||||
mavenCentral()
|
|
||||||
maven { url 'https://www.jitpack.io' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
apply plugin: "expo-root-project"
|
|
||||||
apply plugin: "com.facebook.react.rootproject"
|
|
||||||
// @generated begin @rnmapbox/maps-v2-maven - expo prebuild (DO NOT MODIFY) sync-d4ccbfdff48fdba3138b02a8ba41b9722af001d8
|
|
||||||
|
|
||||||
allprojects {
|
allprojects {
|
||||||
repositories {
|
repositories {
|
||||||
maven {
|
maven {
|
||||||
url 'https://api.mapbox.com/downloads/v2/releases/maven'
|
url 'https://api.mapbox.com/downloads/v2/releases/maven'
|
||||||
// Authentication is no longer required as per Mapbox's removal of download token requirement
|
|
||||||
// See: https://github.com/mapbox/mapbox-maps-flutter/issues/775
|
|
||||||
// Keeping this as optional for backward compatibility
|
|
||||||
def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
|
def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
|
||||||
if (token) {
|
if (token) {
|
||||||
authentication { basic(BasicAuthentication) }
|
authentication { basic(BasicAuthentication) }
|
||||||
@@ -41,7 +26,11 @@ allprojects {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
google()
|
||||||
|
mavenCentral()
|
||||||
|
maven { url 'https://www.jitpack.io' }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// @generated end @rnmapbox/maps-v2-maven
|
apply plugin: "expo-root-project"
|
||||||
|
apply plugin: "com.facebook.react.rootproject"
|
||||||
|
|||||||
@@ -25,27 +25,27 @@ export default {
|
|||||||
ios: {
|
ios: {
|
||||||
supportsTablet: true,
|
supportsTablet: true,
|
||||||
bundleIdentifier: "com.anonymous.hipmi-mobile",
|
bundleIdentifier: "com.anonymous.hipmi-mobile",
|
||||||
googleServicesFile: "./ios/HIPMIBadungConnect/GoogleService-Info.plist",
|
googleServicesFile: "./secrets/GoogleService-Info.plist",
|
||||||
infoPlist: {
|
infoPlist: {
|
||||||
ITSAppUsesNonExemptEncryption: false,
|
ITSAppUsesNonExemptEncryption: false,
|
||||||
NSLocationWhenInUseUsageDescription:
|
NSLocationWhenInUseUsageDescription:
|
||||||
"Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
|
"Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
|
||||||
},
|
},
|
||||||
associatedDomains: [
|
associatedDomains: [
|
||||||
"applinks:cld-dkr-hipmi-stg.wibudev.com",
|
"applinks:hipmi.muku.id",
|
||||||
],
|
],
|
||||||
buildNumber: "5",
|
buildNumber: "7",
|
||||||
},
|
},
|
||||||
|
|
||||||
android: {
|
android: {
|
||||||
googleServicesFile: "./google-services.json",
|
googleServicesFile: "./secrets/google-services.json",
|
||||||
adaptiveIcon: {
|
adaptiveIcon: {
|
||||||
foregroundImage: "./assets/images/splash-icon.png",
|
foregroundImage: "./assets/images/splash-icon.png",
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#ffffff",
|
||||||
},
|
},
|
||||||
edgeToEdgeEnabled: true,
|
edgeToEdgeEnabled: true,
|
||||||
package: "com.bip.hipmimobileapp",
|
package: "com.bip.hipmimobileapp",
|
||||||
versionCode: 1,
|
versionCode: 5,
|
||||||
// softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
|
// softwareKeyboardLayoutMode: 'resize', // option: untuk mengatur keyboard pada room chst collaboration
|
||||||
intentFilters: [
|
intentFilters: [
|
||||||
{
|
{
|
||||||
@@ -54,7 +54,7 @@ export default {
|
|||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
scheme: "https",
|
scheme: "https",
|
||||||
host: "cld-dkr-hipmi-stg.wibudev.com",
|
host: "hipmi.muku.id",
|
||||||
pathPrefix: "/",
|
pathPrefix: "/",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -70,6 +70,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
|
"./plugins/withCustomConfig",
|
||||||
"expo-router",
|
"expo-router",
|
||||||
"expo-web-browser",
|
"expo-web-browser",
|
||||||
[
|
[
|
||||||
|
|||||||
@@ -2,35 +2,64 @@ import { IconHome } from "@/components/_Icon";
|
|||||||
import { TabsStyles } from "@/styles/tabs-styles";
|
import { TabsStyles } from "@/styles/tabs-styles";
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
import { Tabs } from "expo-router";
|
import { Tabs } from "expo-router";
|
||||||
|
import { View } from "react-native";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
|
||||||
|
function CollaborationTabsWrapper() {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
|
|
||||||
export default function CollaborationTabsLayout() {
|
|
||||||
return (
|
return (
|
||||||
<Tabs screenOptions={TabsStyles}>
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
<Tabs.Screen
|
<Tabs
|
||||||
name="index"
|
screenOptions={{
|
||||||
options={{
|
...TabsStyles,
|
||||||
title: "Beranda",
|
tabBarStyle: Platform.select({
|
||||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
ios: {
|
||||||
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 12,
|
||||||
|
height: 80,
|
||||||
|
},
|
||||||
|
android: {
|
||||||
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 5,
|
||||||
|
height: 70 + paddingBottom,
|
||||||
|
},
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="participant"
|
name="index"
|
||||||
options={{
|
options={{
|
||||||
title: "Partisipan",
|
title: "Beranda",
|
||||||
tabBarIcon: ({ color }) => (
|
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||||
<Ionicons size={20} name="people" color={color} />
|
}}
|
||||||
),
|
/>
|
||||||
}}
|
<Tabs.Screen
|
||||||
/>
|
name="participant"
|
||||||
<Tabs.Screen
|
options={{
|
||||||
name="group"
|
title: "Partisipan",
|
||||||
options={{
|
tabBarIcon: ({ color }) => (
|
||||||
title: "Grup",
|
<Ionicons size={20} name="people" color={color} />
|
||||||
tabBarIcon: ({ color }) => (
|
),
|
||||||
<Ionicons size={20} name="chatbox-ellipses" color={color} />
|
}}
|
||||||
),
|
/>
|
||||||
}}
|
<Tabs.Screen
|
||||||
/>
|
name="group"
|
||||||
</Tabs>
|
options={{
|
||||||
|
title: "Grup",
|
||||||
|
tabBarIcon: ({ color }) => (
|
||||||
|
<Ionicons size={20} name="chatbox-ellipses" color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function CollaborationTabsLayout() {
|
||||||
|
return <CollaborationTabsWrapper />;
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,33 +5,62 @@ import {
|
|||||||
FontAwesome5
|
FontAwesome5
|
||||||
} from "@expo/vector-icons";
|
} from "@expo/vector-icons";
|
||||||
import { Tabs } from "expo-router";
|
import { Tabs } from "expo-router";
|
||||||
|
import { View } from "react-native";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
|
||||||
|
function DonationTabsWrapper() {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
|
|
||||||
export default function InvestmentTabsLayout() {
|
|
||||||
return (
|
return (
|
||||||
<Tabs screenOptions={TabsStyles}>
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
<Tabs.Screen
|
<Tabs
|
||||||
name="index"
|
screenOptions={{
|
||||||
options={{
|
...TabsStyles,
|
||||||
title: "Beranda",
|
tabBarStyle: Platform.select({
|
||||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
ios: {
|
||||||
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 12,
|
||||||
|
height: 80,
|
||||||
|
},
|
||||||
|
android: {
|
||||||
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 5,
|
||||||
|
height: 70 + paddingBottom,
|
||||||
|
},
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="status"
|
name="index"
|
||||||
options={{
|
options={{
|
||||||
title: "Galang Dana",
|
title: "Beranda",
|
||||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="my-donation"
|
name="status"
|
||||||
options={{
|
options={{
|
||||||
title: "Donasi Saya",
|
title: "Galang Dana",
|
||||||
tabBarIcon: ({ color }) => (
|
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||||
<FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
|
}}
|
||||||
),
|
/>
|
||||||
}}
|
<Tabs.Screen
|
||||||
/>
|
name="my-donation"
|
||||||
</Tabs>
|
options={{
|
||||||
|
title: "Donasi Saya",
|
||||||
|
tabBarIcon: ({ color }) => (
|
||||||
|
<FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function DonationTabsLayout() {
|
||||||
|
return <DonationTabsWrapper />;
|
||||||
|
}
|
||||||
|
|||||||
@@ -185,7 +185,6 @@ export default function DonationEdit() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<NewWrapper
|
<NewWrapper
|
||||||
hideFooter
|
|
||||||
footerComponent={
|
footerComponent={
|
||||||
<BoxButtonOnFooter>
|
<BoxButtonOnFooter>
|
||||||
<ButtonCustom
|
<ButtonCustom
|
||||||
|
|||||||
@@ -114,7 +114,6 @@ export default function DonationCreateStory() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<NewWrapper
|
<NewWrapper
|
||||||
hideFooter
|
|
||||||
footerComponent={
|
footerComponent={
|
||||||
<>
|
<>
|
||||||
<BoxButtonOnFooter>
|
<BoxButtonOnFooter>
|
||||||
|
|||||||
@@ -127,7 +127,6 @@ export default function DonationCreate() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<NewWrapper
|
<NewWrapper
|
||||||
hideFooter
|
|
||||||
footerComponent={
|
footerComponent={
|
||||||
<>
|
<>
|
||||||
<BoxButtonOnFooter>
|
<BoxButtonOnFooter>
|
||||||
|
|||||||
@@ -8,58 +8,83 @@ import AppHeader from "@/components/_ShareComponent/AppHeader";
|
|||||||
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
|
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
|
||||||
import { TabsStyles } from "@/styles/tabs-styles";
|
import { TabsStyles } from "@/styles/tabs-styles";
|
||||||
import { router, Tabs, useLocalSearchParams } from "expo-router";
|
import { router, Tabs, useLocalSearchParams } from "expo-router";
|
||||||
|
import { View } from "react-native";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
import { OS_ANDROID_HEIGHT, OS_IOS_HEIGHT } from "@/constants/constans-value";
|
||||||
|
|
||||||
export default function EventTabsLayout() {
|
function EventTabsWrapper() {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
const { from, category } = useLocalSearchParams<{
|
const { from, category } = useLocalSearchParams<{
|
||||||
from?: string;
|
from?: string;
|
||||||
category?: string;
|
category?: string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
screenOptions={{
|
<Tabs
|
||||||
...TabsStyles,
|
screenOptions={{
|
||||||
header: () => (
|
...TabsStyles,
|
||||||
<AppHeader
|
tabBarStyle: Platform.select({
|
||||||
title="Event"
|
ios: {
|
||||||
left={
|
borderTopWidth: 0,
|
||||||
<BackButtonFromNotification
|
paddingTop: 12,
|
||||||
from={from as string}
|
height: OS_IOS_HEIGHT,
|
||||||
category={category as string}
|
},
|
||||||
/>
|
android: {
|
||||||
}
|
borderTopWidth: 0,
|
||||||
/>
|
paddingTop: 5,
|
||||||
),
|
height: OS_ANDROID_HEIGHT + paddingBottom,
|
||||||
}}
|
},
|
||||||
>
|
}),
|
||||||
<Tabs.Screen
|
header: () => (
|
||||||
name="index"
|
<AppHeader
|
||||||
options={{
|
title="Event"
|
||||||
title: "Beranda",
|
left={
|
||||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
<BackButtonFromNotification
|
||||||
|
from={from || ""}
|
||||||
|
category={category}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="status"
|
name="index"
|
||||||
options={{
|
options={{
|
||||||
title: "Status",
|
title: "Beranda",
|
||||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="contribution"
|
name="status"
|
||||||
options={{
|
options={{
|
||||||
title: "Kontribusi",
|
title: "Status",
|
||||||
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="history"
|
name="contribution"
|
||||||
options={{
|
options={{
|
||||||
title: "Riwayat",
|
title: "Kontribusi",
|
||||||
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tabs>
|
<Tabs.Screen
|
||||||
|
name="history"
|
||||||
|
options={{
|
||||||
|
title: "Riwayat",
|
||||||
|
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function EventTabsLayout() {
|
||||||
|
return <EventTabsWrapper />;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
/* eslint-disable react-hooks/exhaustive-deps */
|
/* eslint-disable react-hooks/exhaustive-deps */
|
||||||
import { BasicWrapper, NewWrapper, StackCustom, ViewWrapper } from "@/components";
|
import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
|
||||||
import AppHeader from "@/components/_ShareComponent/AppHeader";
|
import AppHeader from "@/components/_ShareComponent/AppHeader";
|
||||||
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
|
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
|
||||||
import { MainColor } from "@/constants/color-palet";
|
import { MainColor } from "@/constants/color-palet";
|
||||||
@@ -8,19 +8,20 @@ import { useAuth } from "@/hooks/use-auth";
|
|||||||
import { useNotificationStore } from "@/hooks/use-notification-store";
|
import { useNotificationStore } from "@/hooks/use-notification-store";
|
||||||
import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
|
import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
|
||||||
import HeaderBell from "@/screens/Home/HeaderBell";
|
import HeaderBell from "@/screens/Home/HeaderBell";
|
||||||
|
import HomeTabs from "@/screens/Home/HomeTabs";
|
||||||
import { stylesHome } from "@/screens/Home/homeViewStyle";
|
import { stylesHome } from "@/screens/Home/homeViewStyle";
|
||||||
import Home_ImageSection from "@/screens/Home/imageSection";
|
import Home_ImageSection from "@/screens/Home/imageSection";
|
||||||
import TabSection from "@/screens/Home/tabSection";
|
|
||||||
import { tabsHome } from "@/screens/Home/tabsList";
|
import { tabsHome } from "@/screens/Home/tabsList";
|
||||||
import Home_FeatureSection from "@/screens/Home/topFeatureSection";
|
import Home_FeatureSection from "@/screens/Home/topFeatureSection";
|
||||||
import { apiJobGetAll } from "@/service/api-client/api-job";
|
import { apiJobGetAll } from "@/service/api-client/api-job";
|
||||||
import { apiUser } from "@/service/api-client/api-user";
|
import { apiUser } from "@/service/api-client/api-user";
|
||||||
import { apiVersion } from "@/service/api-config";
|
import { apiVersion } from "@/service/api-config";
|
||||||
import { GStyles } from "@/styles/global-styles";
|
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
import { Redirect, router, Stack, useFocusEffect } from "expo-router";
|
import { Redirect, router, Stack, useFocusEffect } from "expo-router";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { RefreshControl, View } from "react-native";
|
import { RefreshControl, ScrollView, View } from "react-native";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
|
||||||
export default function Application() {
|
export default function Application() {
|
||||||
const { token, user, userData } = useAuth();
|
const { token, user, userData } = useAuth();
|
||||||
@@ -28,6 +29,8 @@ export default function Application() {
|
|||||||
const [refreshing, setRefreshing] = useState(false);
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
const { syncUnreadCount } = useNotificationStore();
|
const { syncUnreadCount } = useNotificationStore();
|
||||||
const [listData, setListData] = useState<any[] | null>(null);
|
const [listData, setListData] = useState<any[] | null>(null);
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
@@ -105,15 +108,6 @@ export default function Application() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (data && data?.masterUserRoleId !== "1") {
|
|
||||||
// console.log("User is not admin");
|
|
||||||
// return (
|
|
||||||
// <BasicWrapper>
|
|
||||||
// <Redirect href={`/admin/dashboard`} />
|
|
||||||
// </BasicWrapper>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
@@ -148,64 +142,61 @@ export default function Application() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<NewWrapper
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
refreshControl={
|
<ScrollView
|
||||||
<RefreshControl
|
style={{ flex: 1 }}
|
||||||
refreshing={refreshing}
|
contentContainerStyle={{
|
||||||
onRefresh={onRefresh}
|
flexGrow: 1,
|
||||||
tintColor={MainColor.yellow}
|
paddingInline: 10,
|
||||||
colors={[MainColor.yellow]}
|
paddingBottom: paddingBottom + 80, // Space for tabs + safe area
|
||||||
/>
|
}}
|
||||||
}
|
refreshControl={
|
||||||
footerComponent={
|
<RefreshControl
|
||||||
data && data ? (
|
refreshing={refreshing}
|
||||||
<TabSection
|
onRefresh={onRefresh}
|
||||||
tabs={tabsHome({
|
tintColor={MainColor.yellow}
|
||||||
acceptedForumTermsAt: data?.acceptedForumTermsAt,
|
colors={[MainColor.yellow]}
|
||||||
profileId: data?.Profile?.id,
|
|
||||||
})}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
}
|
||||||
null
|
keyboardShouldPersistTaps="handled"
|
||||||
// <View style={GStyles.tabBar}>
|
>
|
||||||
// <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
|
<StackCustom>
|
||||||
// {Array.from({ length: 4 }).map((e, index) => (
|
<Home_ImageSection />
|
||||||
// <CustomSkeleton
|
|
||||||
// key={index}
|
|
||||||
// height={40}
|
|
||||||
// width={40}
|
|
||||||
// radius={100}
|
|
||||||
// />
|
|
||||||
// ))}
|
|
||||||
// </View>
|
|
||||||
// </View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<StackCustom>
|
|
||||||
<Home_ImageSection />
|
|
||||||
|
|
||||||
{data && data ? (
|
{data && data ? (
|
||||||
<Home_FeatureSection />
|
<Home_FeatureSection />
|
||||||
) : (
|
) : (
|
||||||
<View style={stylesHome.gridContainer}>
|
<View style={stylesHome.gridContainer}>
|
||||||
{Array.from({ length: 4 }).map((item, index) => (
|
{Array.from({ length: 4 }).map((_, index) => (
|
||||||
<CustomSkeleton
|
<CustomSkeleton
|
||||||
key={index}
|
key={index}
|
||||||
style={stylesHome.gridItem}
|
style={stylesHome.gridItem}
|
||||||
radius={50}
|
radius={50}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{data ? (
|
{data ? (
|
||||||
<Home_BottomFeatureSection listData={listData} />
|
<Home_BottomFeatureSection listData={listData} />
|
||||||
) : (
|
) : (
|
||||||
<CustomSkeleton height={150} />
|
<CustomSkeleton height={150} />
|
||||||
)}
|
)}
|
||||||
</StackCustom>
|
</StackCustom>
|
||||||
</NewWrapper>
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* Home Tabs di bawah */}
|
||||||
|
{data && data ? (
|
||||||
|
<HomeTabs
|
||||||
|
tabs={tabsHome({
|
||||||
|
acceptedForumTermsAt: data?.acceptedForumTermsAt,
|
||||||
|
profileId: data?.Profile?.id,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,80 +4,105 @@ import { TabsStyles } from "@/styles/tabs-styles";
|
|||||||
import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
|
import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
|
||||||
import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
|
import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
|
||||||
import { useLayoutEffect } from "react";
|
import { useLayoutEffect } from "react";
|
||||||
|
import { View } from "react-native";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
|
||||||
export default function InvestmentTabsLayout() {
|
function InvestmentTabsWrapper() {
|
||||||
// const navigation = useNavigation();
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
|
const navigation = useNavigation();
|
||||||
|
|
||||||
// const { from, category } = useLocalSearchParams<{
|
const { from, category } = useLocalSearchParams<{
|
||||||
// from?: string;
|
from?: string;
|
||||||
// category?: string;
|
category?: string;
|
||||||
// }>();
|
}>();
|
||||||
|
|
||||||
// console.log("from", from);
|
// Atur header secara dinamis
|
||||||
// console.log("category", category);
|
useLayoutEffect(() => {
|
||||||
|
navigation.setOptions({
|
||||||
// // Atur header secara dinamis
|
headerLeft: () => (
|
||||||
// useLayoutEffect(() => {
|
<BackButtonFromNotification
|
||||||
// navigation.setOptions({
|
from={from || ""}
|
||||||
// headerLeft: () => (
|
category={category}
|
||||||
// <BackButtonFromNotification
|
/>
|
||||||
// from={from as string}
|
),
|
||||||
// category={category as string}
|
});
|
||||||
// />
|
}, [from, category, router, navigation]);
|
||||||
// ),
|
|
||||||
// });
|
|
||||||
// }, [from, router, navigation]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs screenOptions={TabsStyles}>
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
<Tabs.Screen
|
<Tabs
|
||||||
name="index"
|
screenOptions={{
|
||||||
options={{
|
...TabsStyles,
|
||||||
title: "Bursa",
|
tabBarStyle: Platform.select({
|
||||||
tabBarIcon: ({ color }) => (
|
ios: {
|
||||||
<Ionicons
|
borderTopWidth: 0,
|
||||||
name="bar-chart-outline"
|
paddingTop: 12,
|
||||||
color={color}
|
height: 80,
|
||||||
size={ICON_SIZE_SMALL}
|
},
|
||||||
/>
|
android: {
|
||||||
),
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 5,
|
||||||
|
height: 70 + paddingBottom,
|
||||||
|
},
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="portofolio"
|
name="index"
|
||||||
options={{
|
options={{
|
||||||
title: "Portofolio",
|
title: "Bursa",
|
||||||
tabBarIcon: ({ color }) => (
|
tabBarIcon: ({ color }) => (
|
||||||
<Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
|
<Ionicons
|
||||||
),
|
name="bar-chart-outline"
|
||||||
}}
|
color={color}
|
||||||
/>
|
size={ICON_SIZE_SMALL}
|
||||||
<Tabs.Screen
|
/>
|
||||||
name="my-holding"
|
),
|
||||||
options={{
|
}}
|
||||||
title: "Saham Saya",
|
/>
|
||||||
tabBarIcon: ({ color }) => (
|
<Tabs.Screen
|
||||||
<FontAwesome6
|
name="portofolio"
|
||||||
name="hand-holding-dollar"
|
options={{
|
||||||
color={color}
|
title: "Portofolio",
|
||||||
size={ICON_SIZE_SMALL}
|
tabBarIcon: ({ color }) => (
|
||||||
/>
|
<Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="transaction"
|
name="my-holding"
|
||||||
options={{
|
options={{
|
||||||
title: "Transaksi",
|
title: "Saham Saya",
|
||||||
tabBarIcon: ({ color }) => (
|
tabBarIcon: ({ color }) => (
|
||||||
<FontAwesome6
|
<FontAwesome6
|
||||||
name="money-bill-transfer"
|
name="hand-holding-dollar"
|
||||||
color={color}
|
color={color}
|
||||||
size={ICON_SIZE_SMALL}
|
size={ICON_SIZE_SMALL}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tabs>
|
<Tabs.Screen
|
||||||
|
name="transaction"
|
||||||
|
options={{
|
||||||
|
title: "Transaksi",
|
||||||
|
tabBarIcon: ({ color }) => (
|
||||||
|
<FontAwesome6
|
||||||
|
name="money-bill-transfer"
|
||||||
|
color={color}
|
||||||
|
size={ICON_SIZE_SMALL}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function InvestmentTabsLayout() {
|
||||||
|
return <InvestmentTabsWrapper />;
|
||||||
|
}
|
||||||
|
|||||||
@@ -10,23 +10,41 @@ import {
|
|||||||
Tabs,
|
Tabs,
|
||||||
useLocalSearchParams
|
useLocalSearchParams
|
||||||
} from "expo-router";
|
} from "expo-router";
|
||||||
|
import { View } from "react-native";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
|
||||||
export default function JobTabsLayout() {
|
function JobTabsWrapper() {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
const { from, category } = useLocalSearchParams<{
|
const { from, category } = useLocalSearchParams<{
|
||||||
from?: string;
|
from?: string;
|
||||||
category?: string;
|
category?: string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
<Tabs
|
<Tabs
|
||||||
screenOptions={{
|
screenOptions={{
|
||||||
...TabsStyles,
|
...TabsStyles,
|
||||||
|
tabBarStyle: Platform.select({
|
||||||
|
ios: {
|
||||||
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 12,
|
||||||
|
height: 80,
|
||||||
|
},
|
||||||
|
android: {
|
||||||
|
borderTopWidth: 0,
|
||||||
|
paddingTop: 5,
|
||||||
|
height: 70 + paddingBottom,
|
||||||
|
},
|
||||||
|
}),
|
||||||
header: () => (
|
header: () => (
|
||||||
<AppHeader
|
<AppHeader
|
||||||
title="Job Vacancy"
|
title="Job Vacancy"
|
||||||
left={
|
left={
|
||||||
<BackButtonFromNotification from={from as string} category={category as string} />
|
<BackButtonFromNotification from={from || ""} category={category} />
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
@@ -56,6 +74,10 @@ export default function JobTabsLayout() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function JobTabsLayout() {
|
||||||
|
return <JobTabsWrapper />;
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import {
|
|||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
CenterCustom,
|
CenterCustom,
|
||||||
NewWrapper,
|
NewWrapper,
|
||||||
|
PhoneInputCustom,
|
||||||
SelectCustom,
|
SelectCustom,
|
||||||
Spacing,
|
Spacing,
|
||||||
StackCustom,
|
StackCustom,
|
||||||
@@ -15,6 +16,7 @@ import {
|
|||||||
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
|
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
|
||||||
import { MainColor } from "@/constants/color-palet";
|
import { MainColor } from "@/constants/color-palet";
|
||||||
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
|
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
|
||||||
|
import { DEFAULT_COUNTRY, type CountryData, COUNTRIES } from "@/constants/countries";
|
||||||
import {
|
import {
|
||||||
apiMasterBidangBisnis,
|
apiMasterBidangBisnis,
|
||||||
apiMasterSubBidangBisnis,
|
apiMasterSubBidangBisnis,
|
||||||
@@ -32,7 +34,6 @@ import { router, useLocalSearchParams } from "expo-router";
|
|||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Text, View } from "react-native";
|
import { Text, View } from "react-native";
|
||||||
import PhoneInput, { ICountry } from "react-native-international-phone-number";
|
|
||||||
import { ActivityIndicator } from "react-native-paper";
|
import { ActivityIndicator } from "react-native-paper";
|
||||||
import Toast from "react-native-toast-message";
|
import Toast from "react-native-toast-message";
|
||||||
|
|
||||||
@@ -59,8 +60,8 @@ export default function PortofolioEdit() {
|
|||||||
const { id } = useLocalSearchParams();
|
const { id } = useLocalSearchParams();
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [data, setData] = useState<any>({});
|
const [data, setData] = useState<any>({});
|
||||||
|
const [phoneNumber, setPhoneNumber] = useState<string>("");
|
||||||
const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
|
const [selectedCountry, setSelectedCountry] = useState<CountryData>(DEFAULT_COUNTRY);
|
||||||
const [bidangBisnis, setBidangBisnis] = useState<
|
const [bidangBisnis, setBidangBisnis] = useState<
|
||||||
IMasterBidangBisnis[] | null
|
IMasterBidangBisnis[] | null
|
||||||
>(null);
|
>(null);
|
||||||
@@ -72,12 +73,42 @@ export default function PortofolioEdit() {
|
|||||||
IListSubBidangSelected[]
|
IListSubBidangSelected[]
|
||||||
>([]);
|
>([]);
|
||||||
|
|
||||||
function handleInputValue(phoneNumber: string) {
|
function handlePhoneChange(phone: string) {
|
||||||
setData({ ...data, tlpn: phoneNumber });
|
setPhoneNumber(phone);
|
||||||
|
|
||||||
|
// Format phone number for API
|
||||||
|
const callingCode = selectedCountry.callingCode;
|
||||||
|
let fixNumber = phone.replace(/\s+/g, "").replace(/^0+/, "");
|
||||||
|
|
||||||
|
// Remove country code if already present
|
||||||
|
if (fixNumber.startsWith(callingCode)) {
|
||||||
|
fixNumber = fixNumber.substring(callingCode.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove leading zero
|
||||||
|
fixNumber = fixNumber.replace(/^0+/, "");
|
||||||
|
|
||||||
|
const realNumber = callingCode + fixNumber;
|
||||||
|
setData({ ...data, tlpn: realNumber });
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSelectedCountry(country: ICountry) {
|
function handleCountryChange(country: CountryData) {
|
||||||
setSelectedCountry(country);
|
setSelectedCountry(country);
|
||||||
|
|
||||||
|
// Re-format with new country code
|
||||||
|
const callingCode = country.callingCode;
|
||||||
|
let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
|
||||||
|
|
||||||
|
// Remove country code if already present
|
||||||
|
if (fixNumber.startsWith(callingCode)) {
|
||||||
|
fixNumber = fixNumber.substring(callingCode.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove leading zero
|
||||||
|
fixNumber = fixNumber.replace(/^0+/, "");
|
||||||
|
|
||||||
|
const realNumber = callingCode + fixNumber;
|
||||||
|
setData({ ...data, tlpn: realNumber });
|
||||||
}
|
}
|
||||||
|
|
||||||
const onLoadMasterBidang = async () => {
|
const onLoadMasterBidang = async () => {
|
||||||
@@ -122,8 +153,27 @@ export default function PortofolioEdit() {
|
|||||||
const response = await apiGetOnePortofolio({ id: id });
|
const response = await apiGetOnePortofolio({ id: id });
|
||||||
|
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
const fixNumber = response.data.tlpn.replace("62", "");
|
// Extract phone number without country code for display
|
||||||
setData({ ...response.data, tlpn: fixNumber });
|
const fullNumber = response.data.tlpn;
|
||||||
|
let displayNumber = fullNumber;
|
||||||
|
let detectedCountry = DEFAULT_COUNTRY;
|
||||||
|
|
||||||
|
// Try to detect country from calling code
|
||||||
|
for (const country of COUNTRIES) {
|
||||||
|
if (fullNumber.startsWith(country.callingCode)) {
|
||||||
|
detectedCountry = country;
|
||||||
|
displayNumber = fullNumber.substring(country.callingCode.length);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedCountry(detectedCountry);
|
||||||
|
|
||||||
|
// Remove leading zero if present
|
||||||
|
displayNumber = displayNumber.replace(/^0+/, "");
|
||||||
|
|
||||||
|
setPhoneNumber(displayNumber);
|
||||||
|
setData({ ...response.data, tlpn: displayNumber });
|
||||||
|
|
||||||
// Cek apakah ada sub bidang bisnis yang terpilih
|
// Cek apakah ada sub bidang bisnis yang terpilih
|
||||||
const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
|
const prevSubBidang = response.data.Portofolio_BidangDanSubBidangBisnis;
|
||||||
@@ -244,15 +294,11 @@ export default function PortofolioEdit() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleSubmitUpdate = async () => {
|
const handleSubmitUpdate = async () => {
|
||||||
const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
|
|
||||||
let fixNumber = data.tlpn.replace(/\s+/g, "").replace(/^0+/, "");
|
|
||||||
const realNumber = callingCode + fixNumber;
|
|
||||||
|
|
||||||
const newData: IFormData = {
|
const newData: IFormData = {
|
||||||
id_Portofolio: data.id_Portofolio,
|
id_Portofolio: data.id_Portofolio,
|
||||||
namaBisnis: data.namaBisnis,
|
namaBisnis: data.namaBisnis,
|
||||||
alamatKantor: data.alamatKantor,
|
alamatKantor: data.alamatKantor,
|
||||||
tlpn: realNumber,
|
tlpn: data.tlpn, // Already formatted by PhoneInputCustom
|
||||||
deskripsi: data.deskripsi,
|
deskripsi: data.deskripsi,
|
||||||
masterBidangBisnisId: data.masterBidangBisnisId,
|
masterBidangBisnisId: data.masterBidangBisnisId,
|
||||||
subBidang: listSubBidangSelected,
|
subBidang: listSubBidangSelected,
|
||||||
@@ -435,12 +481,11 @@ export default function PortofolioEdit() {
|
|||||||
<Text style={{ color: "red" }}> *</Text>
|
<Text style={{ color: "red" }}> *</Text>
|
||||||
</View>
|
</View>
|
||||||
<Spacing height={5} />
|
<Spacing height={5} />
|
||||||
<PhoneInput
|
<PhoneInputCustom
|
||||||
value={data.tlpn}
|
value={phoneNumber}
|
||||||
onChangePhoneNumber={handleInputValue}
|
onChangePhoneNumber={handlePhoneChange}
|
||||||
selectedCountry={selectedCountry}
|
selectedCountry={selectedCountry}
|
||||||
onChangeSelectedCountry={handleSelectedCountry}
|
onChangeCountry={handleCountryChange}
|
||||||
defaultCountry="ID"
|
|
||||||
placeholder="xxx-xxx-xxx"
|
placeholder="xxx-xxx-xxx"
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -8,58 +8,82 @@ import AppHeader from "@/components/_ShareComponent/AppHeader";
|
|||||||
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
|
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
|
||||||
import { TabsStyles } from "@/styles/tabs-styles";
|
import { TabsStyles } from "@/styles/tabs-styles";
|
||||||
import { router, Tabs, useLocalSearchParams } from "expo-router";
|
import { router, Tabs, useLocalSearchParams } from "expo-router";
|
||||||
|
import { View } from "react-native";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { Platform } from "react-native";
|
||||||
|
|
||||||
export default function VotingTabsLayout() {
|
function VotingTabsWrapper() {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
const { from, category } = useLocalSearchParams<{
|
const { from, category } = useLocalSearchParams<{
|
||||||
from?: string;
|
from?: string;
|
||||||
category?: string;
|
category?: string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
screenOptions={{
|
<Tabs
|
||||||
...TabsStyles,
|
screenOptions={{
|
||||||
header: () => (
|
...TabsStyles,
|
||||||
<AppHeader
|
tabBarStyle: Platform.select({
|
||||||
title="Voting"
|
ios: {
|
||||||
left={
|
borderTopWidth: 0,
|
||||||
<BackButtonFromNotification
|
paddingTop: 12,
|
||||||
from={from as string}
|
height: 80,
|
||||||
category={category as string}
|
},
|
||||||
/>
|
android: {
|
||||||
}
|
borderTopWidth: 0,
|
||||||
/>
|
paddingTop: 5,
|
||||||
),
|
height: 70 + paddingBottom,
|
||||||
}}
|
},
|
||||||
>
|
}),
|
||||||
<Tabs.Screen
|
header: () => (
|
||||||
name="index"
|
<AppHeader
|
||||||
options={{
|
title="Voting"
|
||||||
title: "Beranda",
|
left={
|
||||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
<BackButtonFromNotification
|
||||||
|
from={from || ""}
|
||||||
|
category={category}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="status"
|
name="index"
|
||||||
options={{
|
options={{
|
||||||
title: "Status",
|
title: "Beranda",
|
||||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="contribution"
|
name="status"
|
||||||
options={{
|
options={{
|
||||||
title: "Kontribusi",
|
title: "Status",
|
||||||
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Tabs.Screen
|
<Tabs.Screen
|
||||||
name="history"
|
name="contribution"
|
||||||
options={{
|
options={{
|
||||||
title: "Riwayat",
|
title: "Kontribusi",
|
||||||
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tabs>
|
<Tabs.Screen
|
||||||
|
name="history"
|
||||||
|
options={{
|
||||||
|
title: "Riwayat",
|
||||||
|
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function VotingTabsLayout() {
|
||||||
|
return <VotingTabsWrapper />;
|
||||||
|
}
|
||||||
|
|||||||
3
bun.lock
3
bun.lock
@@ -41,6 +41,7 @@
|
|||||||
"expo-symbols": "~1.0.7",
|
"expo-symbols": "~1.0.7",
|
||||||
"expo-system-ui": "~6.0.7",
|
"expo-system-ui": "~6.0.7",
|
||||||
"expo-web-browser": "~15.0.9",
|
"expo-web-browser": "~15.0.9",
|
||||||
|
"libphonenumber-js": "^1.12.40",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"moti": "^0.30.0",
|
"moti": "^0.30.0",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
@@ -1772,6 +1773,8 @@
|
|||||||
|
|
||||||
"levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
|
"levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
|
||||||
|
|
||||||
|
"libphonenumber-js": ["libphonenumber-js@1.12.40", "", {}, "sha512-HKGs7GowShNls3Zh+7DTr6wYpPk5jC78l508yQQY3e8ZgJChM3A9JZghmMJZuK+5bogSfuTafpjksGSR3aMIEg=="],
|
||||||
|
|
||||||
"lighthouse-logger": ["lighthouse-logger@1.4.2", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g=="],
|
"lighthouse-logger": ["lighthouse-logger@1.4.2", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g=="],
|
||||||
|
|
||||||
"lightningcss": ["lightningcss@1.31.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.31.1", "lightningcss-darwin-arm64": "1.31.1", "lightningcss-darwin-x64": "1.31.1", "lightningcss-freebsd-x64": "1.31.1", "lightningcss-linux-arm-gnueabihf": "1.31.1", "lightningcss-linux-arm64-gnu": "1.31.1", "lightningcss-linux-arm64-musl": "1.31.1", "lightningcss-linux-x64-gnu": "1.31.1", "lightningcss-linux-x64-musl": "1.31.1", "lightningcss-win32-arm64-msvc": "1.31.1", "lightningcss-win32-x64-msvc": "1.31.1" } }, "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ=="],
|
"lightningcss": ["lightningcss@1.31.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.31.1", "lightningcss-darwin-arm64": "1.31.1", "lightningcss-darwin-x64": "1.31.1", "lightningcss-freebsd-x64": "1.31.1", "lightningcss-linux-arm-gnueabihf": "1.31.1", "lightningcss-linux-arm64-gnu": "1.31.1", "lightningcss-linux-arm64-musl": "1.31.1", "lightningcss-linux-x64-gnu": "1.31.1", "lightningcss-linux-x64-musl": "1.31.1", "lightningcss-win32-arm64-msvc": "1.31.1", "lightningcss-win32-x64-msvc": "1.31.1" } }, "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ=="],
|
||||||
|
|||||||
256
components/PhoneInput/PhoneInputCustom.tsx
Normal file
256
components/PhoneInput/PhoneInputCustom.tsx
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import {
|
||||||
|
DEFAULT_COUNTRY,
|
||||||
|
searchCountries,
|
||||||
|
type CountryData,
|
||||||
|
} from "@/constants/countries";
|
||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
Modal,
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
TouchableOpacity,
|
||||||
|
View,
|
||||||
|
} from "react-native";
|
||||||
|
|
||||||
|
interface PhoneInputProps {
|
||||||
|
value: string;
|
||||||
|
onChangePhoneNumber: (phone: string) => void;
|
||||||
|
selectedCountry?: CountryData;
|
||||||
|
onChangeCountry: (country: CountryData) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PhoneInputCustom({
|
||||||
|
value,
|
||||||
|
onChangePhoneNumber,
|
||||||
|
selectedCountry = DEFAULT_COUNTRY,
|
||||||
|
onChangeCountry,
|
||||||
|
placeholder = "Masukkan nomor",
|
||||||
|
disabled = false,
|
||||||
|
}: PhoneInputProps) {
|
||||||
|
const [countryPickerVisible, setCountryPickerVisible] = useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
|
||||||
|
const filteredCountries = searchCountries(searchQuery);
|
||||||
|
|
||||||
|
const handleSelectCountry = (country: CountryData) => {
|
||||||
|
onChangeCountry(country);
|
||||||
|
setCountryPickerVisible(false);
|
||||||
|
setSearchQuery("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePhoneChange = (text: string) => {
|
||||||
|
// Only allow numbers and spaces
|
||||||
|
const cleaned = text.replace(/[^\d\s]/g, "");
|
||||||
|
onChangePhoneNumber(cleaned);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Phone Input Field */}
|
||||||
|
<View style={styles.container}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.countryPickerButton}
|
||||||
|
onPress={() => setCountryPickerVisible(true)}
|
||||||
|
disabled={disabled}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<Text style={styles.countryCodeText}>+{selectedCountry.callingCode}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<View style={styles.divider} />
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
style={[styles.phoneInput, disabled && styles.disabledInput]}
|
||||||
|
placeholder={placeholder}
|
||||||
|
placeholderTextColor={MainColor.placeholder}
|
||||||
|
value={value}
|
||||||
|
onChangeText={handlePhoneChange}
|
||||||
|
keyboardType="phone-pad"
|
||||||
|
autoComplete="tel"
|
||||||
|
importantForAutofill="yes"
|
||||||
|
editable={!disabled}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Country Picker Modal */}
|
||||||
|
<Modal
|
||||||
|
visible={countryPickerVisible}
|
||||||
|
transparent
|
||||||
|
animationType="slide"
|
||||||
|
onRequestClose={() => setCountryPickerVisible(false)}
|
||||||
|
>
|
||||||
|
<View style={styles.modalOverlay}>
|
||||||
|
<View style={styles.modalContent}>
|
||||||
|
<View style={styles.modalHeader}>
|
||||||
|
<Text style={styles.modalTitle}>Pilih Negara</Text>
|
||||||
|
<TouchableOpacity onPress={() => setCountryPickerVisible(false)}>
|
||||||
|
<Text style={styles.modalClose}>✕</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
style={styles.searchInput}
|
||||||
|
placeholder="Cari negara atau kode..."
|
||||||
|
placeholderTextColor={MainColor.placeholder}
|
||||||
|
value={searchQuery}
|
||||||
|
onChangeText={setSearchQuery}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ScrollView style={styles.countryList}>
|
||||||
|
{filteredCountries.map((country) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={country.code}
|
||||||
|
style={[
|
||||||
|
styles.countryItem,
|
||||||
|
selectedCountry.code === country.code &&
|
||||||
|
styles.countryItemSelected,
|
||||||
|
]}
|
||||||
|
onPress={() => handleSelectCountry(country)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<View style={styles.countryInfo}>
|
||||||
|
<Text style={styles.countryName}>{country.name}</Text>
|
||||||
|
<Text style={styles.countryCode}>+{country.callingCode}</Text>
|
||||||
|
</View>
|
||||||
|
{selectedCountry.code === country.code && (
|
||||||
|
<Text style={styles.checkmark}>✓</Text>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
// Container
|
||||||
|
container: {
|
||||||
|
flexDirection: "row",
|
||||||
|
backgroundColor: MainColor.white,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: MainColor.white_gray,
|
||||||
|
marginBottom: 16,
|
||||||
|
overflow: "hidden",
|
||||||
|
},
|
||||||
|
// Country Picker Button
|
||||||
|
countryPickerButton: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 14,
|
||||||
|
backgroundColor: MainColor.text_input,
|
||||||
|
borderRightWidth: 1,
|
||||||
|
borderRightColor: MainColor.white_gray,
|
||||||
|
},
|
||||||
|
countryCodeText: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: MainColor.black,
|
||||||
|
fontWeight: "600",
|
||||||
|
},
|
||||||
|
dropdownIcon: {
|
||||||
|
fontSize: 18,
|
||||||
|
color: MainColor.placeholder,
|
||||||
|
marginLeft: 4,
|
||||||
|
},
|
||||||
|
// Divider
|
||||||
|
divider: {
|
||||||
|
width: 1,
|
||||||
|
backgroundColor: MainColor.white_gray,
|
||||||
|
},
|
||||||
|
// Phone Input
|
||||||
|
phoneInput: {
|
||||||
|
flex: 1,
|
||||||
|
paddingVertical: 14,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
fontSize: 16,
|
||||||
|
color: MainColor.black,
|
||||||
|
},
|
||||||
|
disabledInput: {
|
||||||
|
backgroundColor: MainColor.text_input,
|
||||||
|
color: MainColor.placeholder,
|
||||||
|
},
|
||||||
|
// Modal
|
||||||
|
modalOverlay: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
},
|
||||||
|
modalContent: {
|
||||||
|
backgroundColor: MainColor.white,
|
||||||
|
borderTopLeftRadius: 20,
|
||||||
|
borderTopRightRadius: 20,
|
||||||
|
maxHeight: "80%",
|
||||||
|
paddingBottom: 34,
|
||||||
|
},
|
||||||
|
modalHeader: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: 20,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: MainColor.white_gray,
|
||||||
|
},
|
||||||
|
modalTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: MainColor.black,
|
||||||
|
},
|
||||||
|
modalClose: {
|
||||||
|
fontSize: 24,
|
||||||
|
color: MainColor.placeholder,
|
||||||
|
padding: 5,
|
||||||
|
},
|
||||||
|
// Search Input
|
||||||
|
searchInput: {
|
||||||
|
backgroundColor: MainColor.text_input,
|
||||||
|
margin: 16,
|
||||||
|
padding: 12,
|
||||||
|
borderRadius: 8,
|
||||||
|
fontSize: 16,
|
||||||
|
color: MainColor.black,
|
||||||
|
},
|
||||||
|
// Country List
|
||||||
|
countryList: {
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
},
|
||||||
|
countryItem: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: MainColor.white_gray,
|
||||||
|
},
|
||||||
|
countryItemSelected: {
|
||||||
|
backgroundColor: MainColor.soft_darkblue + "15",
|
||||||
|
},
|
||||||
|
countryInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
countryName: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: MainColor.black,
|
||||||
|
fontWeight: "500",
|
||||||
|
},
|
||||||
|
countryCode: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: MainColor.placeholder,
|
||||||
|
marginTop: 2,
|
||||||
|
},
|
||||||
|
checkmark: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: MainColor.green,
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -30,7 +30,7 @@ export default function AppHeader({
|
|||||||
? isIOS26Plus
|
? isIOS26Plus
|
||||||
? insets.top - 10
|
? insets.top - 10
|
||||||
: insets.top
|
: insets.top
|
||||||
: 10;
|
: 40;
|
||||||
|
|
||||||
const paddingBottom = Platform.OS === "ios" ? 8 : 13;
|
const paddingBottom = Platform.OS === "ios" ? 8 : 13;
|
||||||
|
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
return <View style={[GStyles.container, style]}>{content}</View>;
|
return <View style={[GStyles.container, style]}>{content}</View>;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 🔹 Mode Dinamis
|
// 🔹 Mode Dinamis (FlatList)
|
||||||
if ("listData" in props) {
|
if ("listData" in props) {
|
||||||
const listProps = props as ListModeProps;
|
const listProps = props as ListModeProps;
|
||||||
|
|
||||||
@@ -96,7 +96,7 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
{headerComponent && (
|
{headerComponent && (
|
||||||
<View style={GStyles.stickyHeader}>{headerComponent}</View>
|
<View style={GStyles.stickyHeader}>{headerComponent}</View>
|
||||||
)}
|
)}
|
||||||
<View style={[GStyles.container, style]}>
|
<View style={[GStyles.container, style, { flex: 1 }]}>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={listProps.listData}
|
data={listProps.listData}
|
||||||
renderItem={listProps.renderItem}
|
renderItem={listProps.renderItem}
|
||||||
@@ -108,29 +108,36 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
return `fallback-${index}-${JSON.stringify(item)}`;
|
return `fallback-${index}-${JSON.stringify(item)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Gabungkan ID dengan indeks untuk mencegah duplikasi
|
|
||||||
return `${String(item.id)}-${index}`;
|
return `${String(item.id)}-${index}`;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
refreshControl={refreshControl} // ✅ dari BaseProps
|
refreshControl={refreshControl}
|
||||||
onEndReached={listProps.onEndReached}
|
onEndReached={listProps.onEndReached}
|
||||||
onEndReachedThreshold={0.5}
|
onEndReachedThreshold={0.5}
|
||||||
ListHeaderComponent={listProps.ListHeaderComponent}
|
ListHeaderComponent={listProps.ListHeaderComponent}
|
||||||
ListFooterComponent={listProps.ListFooterComponent}
|
ListFooterComponent={listProps.ListFooterComponent}
|
||||||
ListEmptyComponent={listProps.ListEmptyComponent}
|
ListEmptyComponent={listProps.ListEmptyComponent}
|
||||||
contentContainerStyle={{ flexGrow: 1 }}
|
contentContainerStyle={{
|
||||||
|
flexGrow: 1,
|
||||||
|
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
|
||||||
|
}}
|
||||||
keyboardShouldPersistTaps="handled"
|
keyboardShouldPersistTaps="handled"
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{footerComponent ? (
|
{/* Footer dengan position absolute untuk stay di bawah */}
|
||||||
<SafeAreaView
|
{footerComponent && !hideFooter && (
|
||||||
edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
|
<View style={styles.footerContainer}>
|
||||||
style={{ backgroundColor: MainColor.darkblue, height: OS_HEIGHT }}
|
<SafeAreaView
|
||||||
>
|
edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
|
||||||
{footerComponent}
|
style={{ backgroundColor: MainColor.darkblue }}
|
||||||
</SafeAreaView>
|
>
|
||||||
) : hideFooter ? null : (
|
{footerComponent}
|
||||||
|
</SafeAreaView>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!footerComponent && !hideFooter && (
|
||||||
<SafeAreaView
|
<SafeAreaView
|
||||||
edges={["bottom"]}
|
edges={["bottom"]}
|
||||||
style={{ backgroundColor: MainColor.darkblue }}
|
style={{ backgroundColor: MainColor.darkblue }}
|
||||||
@@ -144,7 +151,7 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 🔹 Mode Statis
|
// 🔹 Mode Statis (ScrollView)
|
||||||
const staticProps = props as StaticModeProps;
|
const staticProps = props as StaticModeProps;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -158,9 +165,12 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
|
|
||||||
<View style={{ flex: 0 }} collapsable={false}>
|
<View style={{ flex: 0 }} collapsable={false}>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
contentContainerStyle={{ flexGrow: 1 }}
|
contentContainerStyle={{
|
||||||
|
flexGrow: 1,
|
||||||
|
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
|
||||||
|
}}
|
||||||
keyboardShouldPersistTaps="handled"
|
keyboardShouldPersistTaps="handled"
|
||||||
refreshControl={refreshControl} // ✅ sekarang valid
|
refreshControl={refreshControl}
|
||||||
>
|
>
|
||||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||||
{renderContainer(staticProps.children)}
|
{renderContainer(staticProps.children)}
|
||||||
@@ -168,24 +178,19 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* <ScrollView
|
{/* Footer dengan position absolute untuk stay di bawah */}
|
||||||
contentContainerStyle={{ flexGrow: 0 }}
|
{footerComponent && !hideFooter && (
|
||||||
keyboardShouldPersistTaps="handled"
|
<View style={styles.footerContainer}>
|
||||||
refreshControl={refreshControl} // ✅ sekarang valid
|
<SafeAreaView
|
||||||
>
|
edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
|
||||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
style={{ backgroundColor: MainColor.darkblue }}
|
||||||
{renderContainer(staticProps.children)}
|
>
|
||||||
</TouchableWithoutFeedback>
|
{footerComponent}
|
||||||
</ScrollView> */}
|
</SafeAreaView>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
{footerComponent ? (
|
{!footerComponent && !hideFooter && (
|
||||||
<SafeAreaView
|
|
||||||
edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
|
|
||||||
style={{ backgroundColor: MainColor.darkblue, height: OS_HEIGHT }}
|
|
||||||
>
|
|
||||||
{footerComponent}
|
|
||||||
</SafeAreaView>
|
|
||||||
) : hideFooter ? null : (
|
|
||||||
<SafeAreaView
|
<SafeAreaView
|
||||||
edges={["bottom"]}
|
edges={["bottom"]}
|
||||||
style={{ backgroundColor: MainColor.darkblue }}
|
style={{ backgroundColor: MainColor.darkblue }}
|
||||||
@@ -199,4 +204,15 @@ const NewWrapper = (props: NewWrapperProps) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Styles untuk footer dengan position absolute
|
||||||
|
const styles = {
|
||||||
|
footerContainer: {
|
||||||
|
position: "absolute" as const,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
backgroundColor: MainColor.darkblue,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default NewWrapper;
|
export default NewWrapper;
|
||||||
|
|||||||
@@ -49,6 +49,8 @@ import MapCustom from "./Map/MapCustom";
|
|||||||
import CenterCustom from "./Center/CenterCustom";
|
import CenterCustom from "./Center/CenterCustom";
|
||||||
// Clickable
|
// Clickable
|
||||||
import ClickableCustom from "./Clickable/ClickableCustom";
|
import ClickableCustom from "./Clickable/ClickableCustom";
|
||||||
|
// PhoneInput
|
||||||
|
import PhoneInputCustom from "./PhoneInput/PhoneInputCustom";
|
||||||
// Scroll
|
// Scroll
|
||||||
import ScrollableCustom from "./Scroll/ScrollCustom";
|
import ScrollableCustom from "./Scroll/ScrollCustom";
|
||||||
// ShareComponent
|
// ShareComponent
|
||||||
@@ -95,6 +97,8 @@ export {
|
|||||||
CheckboxGroup,
|
CheckboxGroup,
|
||||||
// Clickable
|
// Clickable
|
||||||
ClickableCustom,
|
ClickableCustom,
|
||||||
|
// PhoneInput
|
||||||
|
PhoneInputCustom,
|
||||||
// Container
|
// Container
|
||||||
CircleContainer,
|
CircleContainer,
|
||||||
// Divider
|
// Divider
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// OS Height
|
// OS Height
|
||||||
const OS_ANDROID_HEIGHT = 115
|
const OS_ANDROID_HEIGHT = 65
|
||||||
const OS_IOS_HEIGHT = 80
|
const OS_IOS_HEIGHT = 80
|
||||||
const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
|
const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
|
||||||
|
|
||||||
|
|||||||
89
constants/countries.ts
Normal file
89
constants/countries.ts
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
import { type CountryCode } from "libphonenumber-js";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Country data for phone number input
|
||||||
|
* Contains only country name and calling code (NO flags for maximum compatibility)
|
||||||
|
*/
|
||||||
|
export interface CountryData {
|
||||||
|
code: CountryCode;
|
||||||
|
name: string;
|
||||||
|
callingCode: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* List of supported countries for phone number input
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* This list includes major countries across different regions.
|
||||||
|
* Countries are ordered by likelihood of use (Indonesia first as default).
|
||||||
|
*
|
||||||
|
* @note
|
||||||
|
* NO emoji flags used - only text-based country name and calling code
|
||||||
|
* This ensures maximum compatibility across all platforms and iOS versions
|
||||||
|
*/
|
||||||
|
export const COUNTRIES: CountryData[] = [
|
||||||
|
// Asia Pacific (Primary markets)
|
||||||
|
{ code: "ID", name: "Indonesia", callingCode: "62" },
|
||||||
|
{ code: "SG", name: "Singapore", callingCode: "65" },
|
||||||
|
{ code: "MY", name: "Malaysia", callingCode: "60" },
|
||||||
|
{ code: "AU", name: "Australia", callingCode: "61" },
|
||||||
|
|
||||||
|
// Asia (Other)
|
||||||
|
{ code: "CN", name: "China", callingCode: "86" },
|
||||||
|
{ code: "JP", name: "Japan", callingCode: "81" },
|
||||||
|
{ code: "KR", name: "South Korea", callingCode: "82" },
|
||||||
|
{ code: "IN", name: "India", callingCode: "91" },
|
||||||
|
|
||||||
|
// Middle East
|
||||||
|
{ code: "AE", name: "United Arab Emirates", callingCode: "971" },
|
||||||
|
{ code: "SA", name: "Saudi Arabia", callingCode: "966" },
|
||||||
|
|
||||||
|
// Europe
|
||||||
|
{ code: "GB", name: "United Kingdom", callingCode: "44" },
|
||||||
|
{ code: "DE", name: "Germany", callingCode: "49" },
|
||||||
|
{ code: "FR", name: "France", callingCode: "33" },
|
||||||
|
{ code: "NL", name: "Netherlands", callingCode: "31" },
|
||||||
|
|
||||||
|
// Americas
|
||||||
|
{ code: "US", name: "United States", callingCode: "1" },
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default country for phone number input
|
||||||
|
* Used when no country is selected (Indonesia by default)
|
||||||
|
*/
|
||||||
|
export const DEFAULT_COUNTRY: CountryData = COUNTRIES[0];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get country by calling code
|
||||||
|
* @param callingCode - The calling code to search for (e.g., "62", "1")
|
||||||
|
* @returns The matching country data or undefined if not found
|
||||||
|
*/
|
||||||
|
export function getCountryByCallingCode(callingCode: string): CountryData | undefined {
|
||||||
|
return COUNTRIES.find((country) => country.callingCode === callingCode);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get country by country code (ISO 3166-1 alpha-2)
|
||||||
|
* @param code - The country code to search for (e.g., "ID", "US")
|
||||||
|
* @returns The matching country data or undefined if not found
|
||||||
|
*/
|
||||||
|
export function getCountryByCode(code: CountryCode): CountryData | undefined {
|
||||||
|
return COUNTRIES.find((country) => country.code === code);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Search countries by name or calling code
|
||||||
|
* @param query - The search query (case-insensitive)
|
||||||
|
* @returns Array of matching countries
|
||||||
|
*/
|
||||||
|
export function searchCountries(query: string): CountryData[] {
|
||||||
|
const normalizedQuery = query.toLowerCase().trim();
|
||||||
|
|
||||||
|
return COUNTRIES.filter(
|
||||||
|
(country) =>
|
||||||
|
country.name.toLowerCase().includes(normalizedQuery) ||
|
||||||
|
country.code.toLowerCase().includes(normalizedQuery) ||
|
||||||
|
country.callingCode.includes(normalizedQuery)
|
||||||
|
);
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"originHash" : "e70d3525c8e2819a8b34f22909815dab5c700c25a06c32388f3930f7b3627768",
|
|
||||||
"pins" : [
|
|
||||||
{
|
|
||||||
"identity" : "maplibre-gl-native-distribution",
|
|
||||||
"kind" : "remoteSourceControl",
|
|
||||||
"location" : "https://github.com/maplibre/maplibre-gl-native-distribution",
|
|
||||||
"state" : {
|
|
||||||
"revision" : "c68c970ff3ece56cfc3b36849db70167fa208beb",
|
|
||||||
"version" : "6.17.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"version" : 3
|
|
||||||
}
|
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
<string>development</string>
|
<string>development</string>
|
||||||
<key>com.apple.developer.associated-domains</key>
|
<key>com.apple.developer.associated-domains</key>
|
||||||
<array>
|
<array>
|
||||||
<string>applinks:cld-dkr-hipmi-stg.wibudev.com</string>
|
<string>applinks:hipmi.muku.id</string>
|
||||||
</array>
|
</array>
|
||||||
</dict>
|
</dict>
|
||||||
</plist>
|
</plist>
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
</dict>
|
</dict>
|
||||||
</array>
|
</array>
|
||||||
<key>CFBundleVersion</key>
|
<key>CFBundleVersion</key>
|
||||||
<string>5</string>
|
<string>7</string>
|
||||||
<key>ITSAppUsesNonExemptEncryption</key>
|
<key>ITSAppUsesNonExemptEncryption</key>
|
||||||
<false/>
|
<false/>
|
||||||
<key>LSMinimumSystemVersion</key>
|
<key>LSMinimumSystemVersion</key>
|
||||||
|
|||||||
39
ios/Podfile
39
ios/Podfile
@@ -1,15 +1,22 @@
|
|||||||
use_modular_headers!
|
|
||||||
|
|
||||||
require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
|
require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
|
||||||
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
|
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
|
||||||
|
|
||||||
require 'json'
|
require 'json'
|
||||||
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
|
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
|
||||||
|
|
||||||
|
def ccache_enabled?(podfile_properties)
|
||||||
|
# Environment variable takes precedence
|
||||||
|
return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']
|
||||||
|
|
||||||
|
# Fall back to Podfile properties
|
||||||
|
podfile_properties['apple.ccacheEnabled'] == 'true'
|
||||||
|
end
|
||||||
|
|
||||||
ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
|
ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
|
||||||
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
|
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
|
||||||
ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
|
ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
|
||||||
ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
|
ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
|
||||||
|
use_modular_headers!
|
||||||
platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
|
platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
|
||||||
|
|
||||||
prepare_react_native_project!
|
prepare_react_native_project!
|
||||||
@@ -21,7 +28,10 @@ target 'HIPMIBadungConnect' do
|
|||||||
config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
|
config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
|
||||||
else
|
else
|
||||||
config_command = [
|
config_command = [
|
||||||
'npx',
|
'node',
|
||||||
|
'--no-warnings',
|
||||||
|
'--eval',
|
||||||
|
'require(\'expo/bin/autolinking\')',
|
||||||
'expo-modules-autolinking',
|
'expo-modules-autolinking',
|
||||||
'react-native-config',
|
'react-native-config',
|
||||||
'--json',
|
'--json',
|
||||||
@@ -35,7 +45,6 @@ target 'HIPMIBadungConnect' do
|
|||||||
use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
|
use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
|
||||||
use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
|
use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
|
||||||
|
|
||||||
|
|
||||||
use_react_native!(
|
use_react_native!(
|
||||||
:path => config[:reactNativePath],
|
:path => config[:reactNativePath],
|
||||||
:hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
|
:hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
|
||||||
@@ -44,23 +53,12 @@ target 'HIPMIBadungConnect' do
|
|||||||
:privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
|
:privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
|
||||||
)
|
)
|
||||||
|
|
||||||
pod 'Firebase'
|
|
||||||
pod 'Firebase/Messaging'
|
|
||||||
|
|
||||||
# @generated begin post_installer - expo prebuild (DO NOT MODIFY) sync-4092f82b887b5b9edb84642c2a56984d69b9a403
|
|
||||||
post_install do |installer|
|
post_install do |installer|
|
||||||
# @generated begin @maplibre/maplibre-react-native:post-install - expo prebuild (DO NOT MODIFY) sync-6e76c80af0d70c0003d06822dd59b7c729fca472
|
|
||||||
$MLRN.post_install(installer)
|
|
||||||
# @generated end @maplibre/maplibre-react-native:post-install
|
|
||||||
|
|
||||||
# Fix all script phases with incorrect paths
|
# Fix all script phases with incorrect paths
|
||||||
installer.pods_project.targets.each do |target|
|
installer.pods_project.targets.each do |target|
|
||||||
target.build_phases.each do |phase|
|
target.build_phases.each do |phase|
|
||||||
next unless phase.respond_to?(:shell_script)
|
next unless phase.respond_to?(:shell_script)
|
||||||
|
|
||||||
# Fix duplicated path issue
|
|
||||||
if phase.shell_script.include?('with-environment.sh')
|
if phase.shell_script.include?('with-environment.sh')
|
||||||
# Remove any existing path and use proper relative path
|
|
||||||
phase.shell_script = phase.shell_script.gsub(
|
phase.shell_script = phase.shell_script.gsub(
|
||||||
%r{(/.*?/node_modules/react-native)+/scripts/xcode/with-environment.sh},
|
%r{(/.*?/node_modules/react-native)+/scripts/xcode/with-environment.sh},
|
||||||
'${PODS_ROOT}/../../node_modules/react-native/scripts/xcode/with-environment.sh'
|
'${PODS_ROOT}/../../node_modules/react-native/scripts/xcode/with-environment.sh'
|
||||||
@@ -68,15 +66,14 @@ target 'HIPMIBadungConnect' do
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
# @generated begin @maplibre/maplibre-react-native:post-install - expo prebuild (DO NOT MODIFY) sync-6e76c80af0d70c0003d06822dd59b7c729fca472
|
||||||
# Standard React Native post install
|
$MLRN.post_install(installer)
|
||||||
|
# @generated end @maplibre/maplibre-react-native:post-install
|
||||||
react_native_post_install(
|
react_native_post_install(
|
||||||
installer,
|
installer,
|
||||||
config[:reactNativePath],
|
config[:reactNativePath],
|
||||||
:mac_catalyst_enabled => false,
|
:mac_catalyst_enabled => false,
|
||||||
:ccache_enabled => podfile_properties['apple.ccacheEnabled'] == 'true',
|
:ccache_enabled => ccache_enabled?(podfile_properties),
|
||||||
)
|
)
|
||||||
end
|
end
|
||||||
# @generated end post_installer
|
end
|
||||||
|
|
||||||
end
|
|
||||||
|
|||||||
@@ -279,34 +279,11 @@ PODS:
|
|||||||
- EXUpdatesInterface (2.0.0):
|
- EXUpdatesInterface (2.0.0):
|
||||||
- ExpoModulesCore
|
- ExpoModulesCore
|
||||||
- FBLazyVector (0.81.5)
|
- FBLazyVector (0.81.5)
|
||||||
- Firebase (12.8.0):
|
|
||||||
- Firebase/Core (= 12.8.0)
|
|
||||||
- Firebase/Core (12.8.0):
|
|
||||||
- Firebase/CoreOnly
|
|
||||||
- FirebaseAnalytics (~> 12.8.0)
|
|
||||||
- Firebase/CoreOnly (12.8.0):
|
- Firebase/CoreOnly (12.8.0):
|
||||||
- FirebaseCore (~> 12.8.0)
|
- FirebaseCore (~> 12.8.0)
|
||||||
- Firebase/Messaging (12.8.0):
|
- Firebase/Messaging (12.8.0):
|
||||||
- Firebase/CoreOnly
|
- Firebase/CoreOnly
|
||||||
- FirebaseMessaging (~> 12.8.0)
|
- FirebaseMessaging (~> 12.8.0)
|
||||||
- FirebaseAnalytics (12.8.0):
|
|
||||||
- FirebaseAnalytics/Default (= 12.8.0)
|
|
||||||
- FirebaseCore (~> 12.8.0)
|
|
||||||
- FirebaseInstallations (~> 12.8.0)
|
|
||||||
- GoogleUtilities/AppDelegateSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/MethodSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/Network (~> 8.1)
|
|
||||||
- "GoogleUtilities/NSData+zlib (~> 8.1)"
|
|
||||||
- nanopb (~> 3.30910.0)
|
|
||||||
- FirebaseAnalytics/Default (12.8.0):
|
|
||||||
- FirebaseCore (~> 12.8.0)
|
|
||||||
- FirebaseInstallations (~> 12.8.0)
|
|
||||||
- GoogleAppMeasurement/Default (= 12.8.0)
|
|
||||||
- GoogleUtilities/AppDelegateSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/MethodSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/Network (~> 8.1)
|
|
||||||
- "GoogleUtilities/NSData+zlib (~> 8.1)"
|
|
||||||
- nanopb (~> 3.30910.0)
|
|
||||||
- FirebaseCore (12.8.0):
|
- FirebaseCore (12.8.0):
|
||||||
- FirebaseCoreInternal (~> 12.8.0)
|
- FirebaseCoreInternal (~> 12.8.0)
|
||||||
- GoogleUtilities/Environment (~> 8.1)
|
- GoogleUtilities/Environment (~> 8.1)
|
||||||
@@ -329,33 +306,6 @@ PODS:
|
|||||||
- GoogleUtilities/Reachability (~> 8.1)
|
- GoogleUtilities/Reachability (~> 8.1)
|
||||||
- GoogleUtilities/UserDefaults (~> 8.1)
|
- GoogleUtilities/UserDefaults (~> 8.1)
|
||||||
- nanopb (~> 3.30910.0)
|
- nanopb (~> 3.30910.0)
|
||||||
- GoogleAdsOnDeviceConversion (3.2.0):
|
|
||||||
- GoogleUtilities/Environment (~> 8.1)
|
|
||||||
- GoogleUtilities/Logger (~> 8.1)
|
|
||||||
- GoogleUtilities/Network (~> 8.1)
|
|
||||||
- nanopb (~> 3.30910.0)
|
|
||||||
- GoogleAppMeasurement/Core (12.8.0):
|
|
||||||
- GoogleUtilities/AppDelegateSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/MethodSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/Network (~> 8.1)
|
|
||||||
- "GoogleUtilities/NSData+zlib (~> 8.1)"
|
|
||||||
- nanopb (~> 3.30910.0)
|
|
||||||
- GoogleAppMeasurement/Default (12.8.0):
|
|
||||||
- GoogleAdsOnDeviceConversion (~> 3.2.0)
|
|
||||||
- GoogleAppMeasurement/Core (= 12.8.0)
|
|
||||||
- GoogleAppMeasurement/IdentitySupport (= 12.8.0)
|
|
||||||
- GoogleUtilities/AppDelegateSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/MethodSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/Network (~> 8.1)
|
|
||||||
- "GoogleUtilities/NSData+zlib (~> 8.1)"
|
|
||||||
- nanopb (~> 3.30910.0)
|
|
||||||
- GoogleAppMeasurement/IdentitySupport (12.8.0):
|
|
||||||
- GoogleAppMeasurement/Core (= 12.8.0)
|
|
||||||
- GoogleUtilities/AppDelegateSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/MethodSwizzler (~> 8.1)
|
|
||||||
- GoogleUtilities/Network (~> 8.1)
|
|
||||||
- "GoogleUtilities/NSData+zlib (~> 8.1)"
|
|
||||||
- nanopb (~> 3.30910.0)
|
|
||||||
- GoogleDataTransport (10.1.0):
|
- GoogleDataTransport (10.1.0):
|
||||||
- nanopb (~> 3.30910.0)
|
- nanopb (~> 3.30910.0)
|
||||||
- PromisesObjC (~> 2.4)
|
- PromisesObjC (~> 2.4)
|
||||||
@@ -369,9 +319,6 @@ PODS:
|
|||||||
- GoogleUtilities/Logger (8.1.0):
|
- GoogleUtilities/Logger (8.1.0):
|
||||||
- GoogleUtilities/Environment
|
- GoogleUtilities/Environment
|
||||||
- GoogleUtilities/Privacy
|
- GoogleUtilities/Privacy
|
||||||
- GoogleUtilities/MethodSwizzler (8.1.0):
|
|
||||||
- GoogleUtilities/Logger
|
|
||||||
- GoogleUtilities/Privacy
|
|
||||||
- GoogleUtilities/Network (8.1.0):
|
- GoogleUtilities/Network (8.1.0):
|
||||||
- GoogleUtilities/Logger
|
- GoogleUtilities/Logger
|
||||||
- "GoogleUtilities/NSData+zlib"
|
- "GoogleUtilities/NSData+zlib"
|
||||||
@@ -2581,9 +2528,9 @@ PODS:
|
|||||||
- ReactCommon/turbomodule/core
|
- ReactCommon/turbomodule/core
|
||||||
- ReactNativeDependencies
|
- ReactNativeDependencies
|
||||||
- Yoga
|
- Yoga
|
||||||
- SDWebImage (5.21.6):
|
- SDWebImage (5.21.7):
|
||||||
- SDWebImage/Core (= 5.21.6)
|
- SDWebImage/Core (= 5.21.7)
|
||||||
- SDWebImage/Core (5.21.6)
|
- SDWebImage/Core (5.21.7)
|
||||||
- SDWebImageAVIFCoder (0.11.1):
|
- SDWebImageAVIFCoder (0.11.1):
|
||||||
- libavif/core (>= 0.11.0)
|
- libavif/core (>= 0.11.0)
|
||||||
- SDWebImage (~> 5.10)
|
- SDWebImage (~> 5.10)
|
||||||
@@ -2633,8 +2580,6 @@ DEPENDENCIES:
|
|||||||
- ExpoWebBrowser (from `../node_modules/expo-web-browser/ios`)
|
- ExpoWebBrowser (from `../node_modules/expo-web-browser/ios`)
|
||||||
- EXUpdatesInterface (from `../node_modules/expo-updates-interface/ios`)
|
- EXUpdatesInterface (from `../node_modules/expo-updates-interface/ios`)
|
||||||
- FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
|
- FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
|
||||||
- Firebase
|
|
||||||
- Firebase/Messaging
|
|
||||||
- hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
|
- hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
|
||||||
- "maplibre-react-native (from `../node_modules/@maplibre/maplibre-react-native`)"
|
- "maplibre-react-native (from `../node_modules/@maplibre/maplibre-react-native`)"
|
||||||
- RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
|
- RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
|
||||||
@@ -2722,14 +2667,11 @@ DEPENDENCIES:
|
|||||||
SPEC REPOS:
|
SPEC REPOS:
|
||||||
trunk:
|
trunk:
|
||||||
- Firebase
|
- Firebase
|
||||||
- FirebaseAnalytics
|
|
||||||
- FirebaseCore
|
- FirebaseCore
|
||||||
- FirebaseCoreExtension
|
- FirebaseCoreExtension
|
||||||
- FirebaseCoreInternal
|
- FirebaseCoreInternal
|
||||||
- FirebaseInstallations
|
- FirebaseInstallations
|
||||||
- FirebaseMessaging
|
- FirebaseMessaging
|
||||||
- GoogleAdsOnDeviceConversion
|
|
||||||
- GoogleAppMeasurement
|
|
||||||
- GoogleDataTransport
|
- GoogleDataTransport
|
||||||
- GoogleUtilities
|
- GoogleUtilities
|
||||||
- libavif
|
- libavif
|
||||||
@@ -3011,14 +2953,11 @@ SPEC CHECKSUMS:
|
|||||||
EXUpdatesInterface: 5adf50cb41e079c861da6d9b4b954c3db9a50734
|
EXUpdatesInterface: 5adf50cb41e079c861da6d9b4b954c3db9a50734
|
||||||
FBLazyVector: e95a291ad2dadb88e42b06e0c5fb8262de53ec12
|
FBLazyVector: e95a291ad2dadb88e42b06e0c5fb8262de53ec12
|
||||||
Firebase: 9a58fdbc9d8655ed7b79a19cf9690bb007d3d46d
|
Firebase: 9a58fdbc9d8655ed7b79a19cf9690bb007d3d46d
|
||||||
FirebaseAnalytics: f20bbad8cb7f65d8a5eaefeb424ae8800a31bdfc
|
|
||||||
FirebaseCore: 0dbad74bda10b8fb9ca34ad8f375fb9dd3ebef7c
|
FirebaseCore: 0dbad74bda10b8fb9ca34ad8f375fb9dd3ebef7c
|
||||||
FirebaseCoreExtension: 6605938d51f765d8b18bfcafd2085276a252bee2
|
FirebaseCoreExtension: 6605938d51f765d8b18bfcafd2085276a252bee2
|
||||||
FirebaseCoreInternal: fe5fa466aeb314787093a7dce9f0beeaad5a2a21
|
FirebaseCoreInternal: fe5fa466aeb314787093a7dce9f0beeaad5a2a21
|
||||||
FirebaseInstallations: 6a14ab3d694ebd9f839c48d330da5547e9ca9dc0
|
FirebaseInstallations: 6a14ab3d694ebd9f839c48d330da5547e9ca9dc0
|
||||||
FirebaseMessaging: 7f42cfd10ec64181db4e01b305a613791c8e782c
|
FirebaseMessaging: 7f42cfd10ec64181db4e01b305a613791c8e782c
|
||||||
GoogleAdsOnDeviceConversion: d68c69dd9581a0f5da02617b6f377e5be483970f
|
|
||||||
GoogleAppMeasurement: 72c9a682fec6290327ea5e3c4b829b247fcb2c17
|
|
||||||
GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
|
GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
|
||||||
GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1
|
GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1
|
||||||
hermes-engine: 9f4dfe93326146a1c99eb535b1cb0b857a3cd172
|
hermes-engine: 9f4dfe93326146a1c99eb535b1cb0b857a3cd172
|
||||||
@@ -3107,13 +3046,13 @@ SPEC CHECKSUMS:
|
|||||||
RNSVG: 31d6639663c249b7d5abc9728dde2041eb2a3c34
|
RNSVG: 31d6639663c249b7d5abc9728dde2041eb2a3c34
|
||||||
RNVectorIcons: 4351544f100d4f12cac156a7c13399e60bab3e26
|
RNVectorIcons: 4351544f100d4f12cac156a7c13399e60bab3e26
|
||||||
RNWorklets: 43cd6af94c18f89cbca10ea83fee281b69d75da5
|
RNWorklets: 43cd6af94c18f89cbca10ea83fee281b69d75da5
|
||||||
SDWebImage: 1bb6a1b84b6fe87b972a102bdc77dd589df33477
|
SDWebImage: e9fc87c1aab89a8ab1bbd74eba378c6f53be8abf
|
||||||
SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
|
SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
|
||||||
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
|
SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
|
||||||
SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
|
SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
|
||||||
Yoga: 5934998fbeaef7845dbf698f698518695ab4cd1a
|
Yoga: 5934998fbeaef7845dbf698f698518695ab4cd1a
|
||||||
ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
|
ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
|
||||||
|
|
||||||
PODFILE CHECKSUM: c099c57001b36661ca723fa0edfdb338496e8b9d
|
PODFILE CHECKSUM: 98fc0b2be4d9f9b5a23816e3c77ad0e74ea84fa0
|
||||||
|
|
||||||
COCOAPODS: 1.16.2
|
COCOAPODS: 1.16.2
|
||||||
|
|||||||
@@ -48,6 +48,7 @@
|
|||||||
"expo-symbols": "~1.0.7",
|
"expo-symbols": "~1.0.7",
|
||||||
"expo-system-ui": "~6.0.7",
|
"expo-system-ui": "~6.0.7",
|
||||||
"expo-web-browser": "~15.0.9",
|
"expo-web-browser": "~15.0.9",
|
||||||
|
"libphonenumber-js": "^1.12.40",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"moti": "^0.30.0",
|
"moti": "^0.30.0",
|
||||||
"react": "19.1.0",
|
"react": "19.1.0",
|
||||||
|
|||||||
287
plugins/withCustomConfig.js
Normal file
287
plugins/withCustomConfig.js
Normal file
@@ -0,0 +1,287 @@
|
|||||||
|
const {
|
||||||
|
withAppBuildGradle,
|
||||||
|
withProjectBuildGradle,
|
||||||
|
withInfoPlist,
|
||||||
|
} = require("@expo/config-plugins");
|
||||||
|
|
||||||
|
const { withPodfile } = require("@expo/config-plugins");
|
||||||
|
const { withAndroidManifest } = require("@expo/config-plugins");
|
||||||
|
const { withDangerousMod } = require("@expo/config-plugins");
|
||||||
|
const fs = require("fs");
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// 1. PROJECT-LEVEL build.gradle
|
||||||
|
// Tambah: google-services classpath + Mapbox maven
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
const withCustomProjectBuildGradle = (config) => {
|
||||||
|
return withProjectBuildGradle(config, (config) => {
|
||||||
|
let contents = config.modResults.contents;
|
||||||
|
|
||||||
|
// Tambah google-services classpath jika belum ada
|
||||||
|
if (!contents.includes("com.google.gms:google-services")) {
|
||||||
|
contents = contents.replace(
|
||||||
|
/classpath\('com\.android\.tools\.build:gradle'\)/,
|
||||||
|
`classpath('com.android.tools.build:gradle')
|
||||||
|
classpath 'com.google.gms:google-services:4.4.1'`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tambah Mapbox maven repository jika belum ada
|
||||||
|
if (!contents.includes("api.mapbox.com")) {
|
||||||
|
contents = contents.replace(
|
||||||
|
/allprojects\s*\{[\s\S]*?repositories\s*\{/,
|
||||||
|
`allprojects {
|
||||||
|
repositories {
|
||||||
|
maven {
|
||||||
|
url 'https://api.mapbox.com/downloads/v2/releases/maven'
|
||||||
|
def token = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: System.getenv('RNMAPBOX_MAPS_DOWNLOAD_TOKEN')
|
||||||
|
if (token) {
|
||||||
|
authentication { basic(BasicAuthentication) }
|
||||||
|
credentials {
|
||||||
|
username = 'mapbox'
|
||||||
|
password = token
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
config.modResults.contents = contents;
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// 2. APP-LEVEL build.gradle
|
||||||
|
// Tambah: buildConfigField + google-services plugin
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
const withCustomAppBuildGradle = (config) => {
|
||||||
|
return withAppBuildGradle(config, (config) => {
|
||||||
|
let contents = config.modResults.contents;
|
||||||
|
|
||||||
|
// Tambah Mapbox packagingOptions
|
||||||
|
if (!contents.includes("rnmapbox/maps-libcpp")) {
|
||||||
|
contents = contents.replace(
|
||||||
|
/android\s*\{/,
|
||||||
|
`android {
|
||||||
|
// @generated begin @rnmapbox/maps-libcpp - expo prebuild (DO NOT MODIFY) sync-e24830a5a3e854b398227dfe9630aabfaa1cadd1
|
||||||
|
packagingOptions {
|
||||||
|
pickFirst 'lib/x86/libc++_shared.so'
|
||||||
|
pickFirst 'lib/x86_64/libc++_shared.so'
|
||||||
|
pickFirst 'lib/arm64-v8a/libc++_shared.so'
|
||||||
|
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
|
||||||
|
}
|
||||||
|
// @generated end @rnmapbox/maps-libcpp`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tambah buildConfigField REACT_NATIVE_RELEASE_LEVEL
|
||||||
|
if (!contents.includes("REACT_NATIVE_RELEASE_LEVEL")) {
|
||||||
|
contents = contents.replace(
|
||||||
|
/defaultConfig\s*\{/,
|
||||||
|
`defaultConfig {
|
||||||
|
buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\\"${`$`}{findProperty('reactNativeReleaseLevel') ?: 'stable'}\\""`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tambah apply plugin google-services di akhir file
|
||||||
|
if (!contents.includes("com.google.gms.google-services")) {
|
||||||
|
contents += `\napply plugin: 'com.google.gms.google-services'\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
config.modResults.contents = contents;
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// 3. Info.plist
|
||||||
|
// Tambah: custom URL schemes + deskripsi Bahasa Indonesia
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
const withCustomInfoPlist = (config) => {
|
||||||
|
return withInfoPlist(config, (config) => {
|
||||||
|
const plist = config.modResults;
|
||||||
|
|
||||||
|
// Custom URL Schemes
|
||||||
|
// Pastikan CFBundleURLTypes sudah ada, lalu tambahkan scheme custom
|
||||||
|
if (!plist.CFBundleURLTypes) {
|
||||||
|
plist.CFBundleURLTypes = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasHipmiScheme = plist.CFBundleURLTypes.some((entry) =>
|
||||||
|
entry.CFBundleURLSchemes?.includes("hipmimobile"),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!hasHipmiScheme) {
|
||||||
|
plist.CFBundleURLTypes.push({
|
||||||
|
CFBundleURLSchemes: ["hipmimobile", "com.anonymous.hipmi-mobile"],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// NSLocationWhenInUseUsageDescription — Bahasa Indonesia
|
||||||
|
plist.NSLocationWhenInUseUsageDescription =
|
||||||
|
"Aplikasi membutuhkan akses lokasi untuk menampilkan peta.";
|
||||||
|
|
||||||
|
// NSPhotoLibraryUsageDescription — Bahasa Indonesia (panjang)
|
||||||
|
plist.NSPhotoLibraryUsageDescription =
|
||||||
|
"Untuk mengunggah dokumen dan media bisnis seperti foto profil, logo usaha, poster lowongan, atau bukti transaksi di berbagai fitur aplikasi: Profile, Portofolio, Job Vacancy, Investasi, dan Donasi.";
|
||||||
|
|
||||||
|
plist.NSFaceIDUsageDescription =
|
||||||
|
"Allow $(PRODUCT_NAME) to access your Face ID biometric data.";
|
||||||
|
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// 4. Android Manifest
|
||||||
|
// Tambah: backup rules untuk expo-secure-store
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
const withCustomManifest = (config) => {
|
||||||
|
return withAndroidManifest(config, (config) => {
|
||||||
|
const manifest = config.modResults.manifest;
|
||||||
|
const application = manifest.application[0];
|
||||||
|
|
||||||
|
// Tambah atribut backup untuk expo-secure-store
|
||||||
|
application.$["android:fullBackupContent"] =
|
||||||
|
"@xml/secure_store_backup_rules";
|
||||||
|
application.$["android:dataExtractionRules"] =
|
||||||
|
"@xml/secure_store_data_extraction_rules";
|
||||||
|
|
||||||
|
// Tambah tools:replace pada meta-data notification color
|
||||||
|
const metaDataList = application["meta-data"] || [];
|
||||||
|
const notifColorMeta = metaDataList.find(
|
||||||
|
(m) =>
|
||||||
|
m.$["android:name"] ===
|
||||||
|
"com.google.firebase.messaging.default_notification_color",
|
||||||
|
);
|
||||||
|
if (notifColorMeta) {
|
||||||
|
notifColorMeta.$["tools:replace"] = "android:resource";
|
||||||
|
}
|
||||||
|
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// 5. Podfile
|
||||||
|
// Tambah: use_modular_headers!
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
|
||||||
|
const withCustomPodfile = (config) => {
|
||||||
|
return withPodfile(config, (config) => {
|
||||||
|
let contents = config.modResults.contents;
|
||||||
|
|
||||||
|
// Tambah use_modular_headers! jika belum ada
|
||||||
|
if (!contents.includes("use_modular_headers!")) {
|
||||||
|
contents = contents.replace(
|
||||||
|
/platform :ios/,
|
||||||
|
`use_modular_headers!\nplatform :ios`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tambah Firebase pods jika belum ada
|
||||||
|
if (!contents.includes("pod 'Firebase/Messaging'")) {
|
||||||
|
contents = contents.replace(
|
||||||
|
/use_react_native_pods\!/,
|
||||||
|
`pod 'Firebase'\n pod 'Firebase/Messaging'\n\n use_react_native_pods!`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tambah fix script with-environment.sh jika belum ada
|
||||||
|
// Tambah fix script with-environment.sh jika belum ada
|
||||||
|
if (!contents.includes("with-environment.sh")) {
|
||||||
|
const fixScript = [
|
||||||
|
"post_install do |installer|",
|
||||||
|
" # Fix all script phases with incorrect paths",
|
||||||
|
" installer.pods_project.targets.each do |target|",
|
||||||
|
" target.build_phases.each do |phase|",
|
||||||
|
" next unless phase.respond_to?(:shell_script)",
|
||||||
|
" if phase.shell_script.include?('with-environment.sh')",
|
||||||
|
" phase.shell_script = phase.shell_script.gsub(",
|
||||||
|
" %r{(/.*?/node_modules/react-native)+/scripts/xcode/with-environment.sh},",
|
||||||
|
" '${PODS_ROOT}/../../node_modules/react-native/scripts/xcode/with-environment.sh'",
|
||||||
|
" )",
|
||||||
|
" end",
|
||||||
|
" end",
|
||||||
|
" end",
|
||||||
|
].join("\n");
|
||||||
|
|
||||||
|
contents = contents.replace(/post_install do \|installer\|/, fixScript);
|
||||||
|
}
|
||||||
|
|
||||||
|
config.modResults.contents = contents;
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// 6. Android XML Files
|
||||||
|
// Tambah: secure_store_backup_rules.xml dan secure_store_data_extraction_rules.xml
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
|
||||||
|
const withSecureStoreXml = (config) => {
|
||||||
|
return withDangerousMod(config, [
|
||||||
|
"android",
|
||||||
|
(config) => {
|
||||||
|
const xmlDir = path.join(
|
||||||
|
config.modRequest.platformProjectRoot,
|
||||||
|
"app/src/main/res/xml",
|
||||||
|
);
|
||||||
|
|
||||||
|
// Buat folder jika belum ada
|
||||||
|
if (!fs.existsSync(xmlDir)) {
|
||||||
|
fs.mkdirSync(xmlDir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Definisikan path variabel di sini ← INI yang kurang sebelumnya
|
||||||
|
const backupRulesPath = path.join(
|
||||||
|
xmlDir,
|
||||||
|
"secure_store_backup_rules.xml",
|
||||||
|
);
|
||||||
|
const dataExtractionPath = path.join(
|
||||||
|
xmlDir,
|
||||||
|
"secure_store_data_extraction_rules.xml",
|
||||||
|
);
|
||||||
|
|
||||||
|
// secure_store_backup_rules.xml
|
||||||
|
fs.writeFileSync(
|
||||||
|
backupRulesPath,
|
||||||
|
`<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<full-backup-content>
|
||||||
|
<exclude domain="sharedpref" path="SECURESTORE"/>
|
||||||
|
</full-backup-content>`,
|
||||||
|
);
|
||||||
|
|
||||||
|
// secure_store_data_extraction_rules.xml
|
||||||
|
fs.writeFileSync(
|
||||||
|
dataExtractionPath,
|
||||||
|
`<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<data-extraction-rules>
|
||||||
|
<cloud-backup>
|
||||||
|
<exclude domain="sharedpref" path="SECURESTORE"/>
|
||||||
|
</cloud-backup>
|
||||||
|
<device-transfer>
|
||||||
|
<exclude domain="sharedpref" path="SECURESTORE"/>
|
||||||
|
</device-transfer>
|
||||||
|
</data-extraction-rules>`,
|
||||||
|
);
|
||||||
|
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
// EXPORT
|
||||||
|
// ─────────────────────────────────────────
|
||||||
|
module.exports = (config) => {
|
||||||
|
config = withCustomProjectBuildGradle(config);
|
||||||
|
config = withCustomAppBuildGradle(config);
|
||||||
|
config = withCustomManifest(config);
|
||||||
|
config = withSecureStoreXml(config);
|
||||||
|
config = withCustomInfoPlist(config);
|
||||||
|
config = withCustomPodfile(config);
|
||||||
|
return config;
|
||||||
|
};
|
||||||
@@ -33,7 +33,10 @@ export function EventDetailQRCode({
|
|||||||
const deepLinkURL = `${BASE_URL}/event/${id}/confirmation?userId=${userId}`;
|
const deepLinkURL = `${BASE_URL}/event/${id}/confirmation?userId=${userId}`;
|
||||||
|
|
||||||
// Toggle antara HTTPS link dan custom scheme
|
// Toggle antara HTTPS link dan custom scheme
|
||||||
const qrValue = useHttpsLink ? httpsLink : deepLinkURL;
|
// const qrValue = useHttpsLink ? httpsLink : deepLinkURL;
|
||||||
|
const qrValue = deepLinkURL;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseBox>
|
<BaseBox>
|
||||||
@@ -46,7 +49,7 @@ export function EventDetailQRCode({
|
|||||||
{qrValue}
|
{qrValue}
|
||||||
</TextCustom>
|
</TextCustom>
|
||||||
<Spacing />
|
<Spacing />
|
||||||
<StackCustom direction="row" gap="sm">
|
{/* <StackCustom direction="row" gap="sm">
|
||||||
<ButtonCustom
|
<ButtonCustom
|
||||||
onPress={() => setUseHttpsLink(true)}
|
onPress={() => setUseHttpsLink(true)}
|
||||||
backgroundColor={useHttpsLink ? MainColor.yellow : "transparent"}
|
backgroundColor={useHttpsLink ? MainColor.yellow : "transparent"}
|
||||||
@@ -69,13 +72,13 @@ export function EventDetailQRCode({
|
|||||||
>
|
>
|
||||||
Custom Scheme
|
Custom Scheme
|
||||||
</ButtonCustom>
|
</ButtonCustom>
|
||||||
</StackCustom>
|
</StackCustom> */}
|
||||||
<Spacing />
|
{/* <Spacing />
|
||||||
<TextCustom color="gray" align="center" size={"small"}>
|
<TextCustom color="gray" align="center" size={"small"}>
|
||||||
{useHttpsLink
|
{useHttpsLink
|
||||||
? "✅ Testing Universal Links/App Links (butuh .well-known config)"
|
? "✅ Testing Universal Links/App Links (butuh .well-known config)"
|
||||||
: "🔧 Testing langsung (tanpa domain verification)"}
|
: "🔧 Testing langsung (tanpa domain verification)"}
|
||||||
</TextCustom>
|
</TextCustom> */}
|
||||||
</BaseBox>
|
</BaseBox>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -128,12 +128,13 @@ export function Admin_ScreenEventDetail() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return <Spacing height={100} />;
|
||||||
}, [status, id]);
|
}, [status, id]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NewWrapper
|
<NewWrapper
|
||||||
|
hideFooter
|
||||||
headerComponent={headerComponent}
|
headerComponent={headerComponent}
|
||||||
// footerComponent={
|
// footerComponent={
|
||||||
// <View style={{ paddingInline: 8 }}>
|
// <View style={{ paddingInline: 8 }}>
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
import { NewWrapper, ViewWrapper } from "@/components";
|
import { NewWrapper, PhoneInputCustom, ViewWrapper } from "@/components";
|
||||||
import ButtonCustom from "@/components/Button/ButtonCustom";
|
import ButtonCustom from "@/components/Button/ButtonCustom";
|
||||||
import ModalReactNative from "@/components/Modal/ModalReactNative";
|
import ModalReactNative from "@/components/Modal/ModalReactNative";
|
||||||
import Spacing from "@/components/_ShareComponent/Spacing";
|
import Spacing from "@/components/_ShareComponent/Spacing";
|
||||||
import { MainColor } from "@/constants/color-palet";
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
import { DEFAULT_COUNTRY, type CountryData } from "@/constants/countries";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import { apiVersion, BASE_URL } from "@/service/api-config";
|
import { apiVersion, BASE_URL } from "@/service/api-config";
|
||||||
import { GStyles } from "@/styles/global-styles";
|
import { GStyles } from "@/styles/global-styles";
|
||||||
@@ -10,16 +11,23 @@ import { openBrowser } from "@/utils/openBrower";
|
|||||||
import versionBadge from "@/utils/viersionBadge";
|
import versionBadge from "@/utils/viersionBadge";
|
||||||
import { Redirect } from "expo-router";
|
import { Redirect } from "expo-router";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { RefreshControl, Text, View } from "react-native";
|
import {
|
||||||
import PhoneInput, { ICountry } from "react-native-international-phone-number";
|
KeyboardAvoidingView,
|
||||||
|
Platform,
|
||||||
|
RefreshControl,
|
||||||
|
Text,
|
||||||
|
View,
|
||||||
|
} from "react-native";
|
||||||
|
import { parsePhoneNumber } from "libphonenumber-js";
|
||||||
import Toast from "react-native-toast-message";
|
import Toast from "react-native-toast-message";
|
||||||
import EULASection from "./EULASection";
|
import EULASection from "./EULASection";
|
||||||
|
|
||||||
export default function LoginView() {
|
export default function LoginView() {
|
||||||
const url = BASE_URL;
|
const url = BASE_URL;
|
||||||
const [version, setVersion] = useState<string>("");
|
const [version, setVersion] = useState<string>("");
|
||||||
const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
|
const [selectedCountry, setSelectedCountry] =
|
||||||
const [inputValue, setInputValue] = useState<string>("");
|
useState<CountryData>(DEFAULT_COUNTRY);
|
||||||
|
const [phoneNumber, setPhoneNumber] = useState<string>("");
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||||
const [modalVisible, setModalVisible] = useState(false);
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
@@ -43,41 +51,43 @@ export default function LoginView() {
|
|||||||
async function handleRefresh() {
|
async function handleRefresh() {
|
||||||
setRefreshing(true);
|
setRefreshing(true);
|
||||||
await onLoadVersion();
|
await onLoadVersion();
|
||||||
setInputValue("");
|
setPhoneNumber("");
|
||||||
|
setSelectedCountry(DEFAULT_COUNTRY);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setRefreshing(false);
|
setRefreshing(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleInputValue(phoneNumber: string) {
|
|
||||||
setInputValue(phoneNumber);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSelectedCountry(country: ICountry) {
|
|
||||||
setSelectedCountry(country);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function validateData() {
|
async function validateData() {
|
||||||
if (inputValue.length === 0) {
|
if (phoneNumber.length === 0) {
|
||||||
return Toast.show({
|
return Toast.show({
|
||||||
type: "error",
|
type: "error",
|
||||||
text1: "Masukan nomor anda",
|
text1: "Masukan nomor anda",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (selectedCountry === null) {
|
if (phoneNumber.length < 9) {
|
||||||
return Toast.show({
|
|
||||||
type: "error",
|
|
||||||
text1: "Pilih negara",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inputValue.length < 9) {
|
|
||||||
return Toast.show({
|
return Toast.show({
|
||||||
type: "error",
|
type: "error",
|
||||||
text1: "Nomor tidak valid",
|
text1: "Nomor tidak valid",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate with libphonenumber-js
|
||||||
|
try {
|
||||||
|
const parsedNumber = parsePhoneNumber(phoneNumber, selectedCountry.code);
|
||||||
|
if (!parsedNumber || !parsedNumber.isValid()) {
|
||||||
|
return Toast.show({
|
||||||
|
type: "error",
|
||||||
|
text1: "Nomor tidak valid",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return Toast.show({
|
||||||
|
type: "error",
|
||||||
|
text1: "Format nomor tidak valid",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -85,8 +95,17 @@ export default function LoginView() {
|
|||||||
const isValid = await validateData();
|
const isValid = await validateData();
|
||||||
if (!isValid) return;
|
if (!isValid) return;
|
||||||
|
|
||||||
const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
|
// Format phone number with country code
|
||||||
let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
|
const callingCode = selectedCountry.callingCode;
|
||||||
|
let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
|
||||||
|
|
||||||
|
// Remove country code if already present
|
||||||
|
if (fixNumber.startsWith(callingCode)) {
|
||||||
|
fixNumber = fixNumber.substring(callingCode.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove leading zero
|
||||||
|
fixNumber = fixNumber.replace(/^0+/, "");
|
||||||
|
|
||||||
const realNumber = callingCode + fixNumber;
|
const realNumber = callingCode + fixNumber;
|
||||||
|
|
||||||
@@ -128,75 +147,84 @@ export default function LoginView() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewWrapper
|
<KeyboardAvoidingView
|
||||||
withBackground
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||||
refreshControl={
|
keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 50}
|
||||||
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
|
style={{ flex: 1 }}
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<View style={GStyles.authContainer}>
|
<ViewWrapper
|
||||||
<View>
|
withBackground
|
||||||
<View style={GStyles.authContainerTitle}>
|
refreshControl={
|
||||||
<Text style={GStyles.authSubTitle}>WELCOME TO</Text>
|
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
|
||||||
<Spacing height={5} />
|
}
|
||||||
<Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
|
>
|
||||||
<Spacing height={5} />
|
<View style={[GStyles.authContainer, { paddingBottom: 40 }]}>
|
||||||
|
<View>
|
||||||
|
<View style={GStyles.authContainerTitle}>
|
||||||
|
<Text style={GStyles.authSubTitle}>WELCOME TO</Text>
|
||||||
|
<Spacing height={5} />
|
||||||
|
<Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
|
||||||
|
<Spacing height={5} />
|
||||||
|
</View>
|
||||||
|
<Spacing height={50} />
|
||||||
|
{version && (
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 35,
|
||||||
|
right: 50,
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: "thin",
|
||||||
|
fontStyle: "italic",
|
||||||
|
color: MainColor.white_gray,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
powered by muku.id
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
</View>
|
</View>
|
||||||
<Spacing height={50} />
|
|
||||||
<Text
|
<Spacing height={20} />
|
||||||
style={{
|
|
||||||
position: "absolute",
|
<PhoneInputCustom
|
||||||
bottom: 35,
|
value={phoneNumber}
|
||||||
right: 50,
|
onChangePhoneNumber={setPhoneNumber}
|
||||||
fontSize: 10,
|
selectedCountry={selectedCountry}
|
||||||
fontWeight: "thin",
|
onChangeCountry={setSelectedCountry}
|
||||||
fontStyle: "italic",
|
placeholder="Masukkan nomor"
|
||||||
color: MainColor.white_gray,
|
/>
|
||||||
}}
|
|
||||||
|
<Spacing />
|
||||||
|
|
||||||
|
<ButtonCustom
|
||||||
|
onPress={handleLogin}
|
||||||
|
disabled={loadingTerm}
|
||||||
|
isLoading={loading || loadingTerm}
|
||||||
>
|
>
|
||||||
{version} | powered by muku.id
|
Login
|
||||||
|
</ButtonCustom>
|
||||||
|
<Spacing height={50} />
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}
|
||||||
|
>
|
||||||
|
Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
color: MainColor.yellow,
|
||||||
|
textDecorationLine: "underline",
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
const toUrl = `${url}/terms-of-service.html`;
|
||||||
|
openBrowser(toUrl);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Syarat & Ketentuan
|
||||||
|
</Text>{" "}
|
||||||
|
dan seluruh kebijakan privasi yang berlaku.
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
</ViewWrapper>
|
||||||
<PhoneInput
|
|
||||||
value={inputValue}
|
|
||||||
onChangePhoneNumber={handleInputValue}
|
|
||||||
selectedCountry={selectedCountry}
|
|
||||||
onChangeSelectedCountry={handleSelectedCountry}
|
|
||||||
defaultCountry="ID"
|
|
||||||
placeholder="Masukkan nomor"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Spacing />
|
|
||||||
|
|
||||||
<ButtonCustom
|
|
||||||
onPress={handleLogin}
|
|
||||||
disabled={loadingTerm}
|
|
||||||
isLoading={loading || loadingTerm}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</ButtonCustom>
|
|
||||||
<Spacing height={50} />
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}
|
|
||||||
>
|
|
||||||
Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
color: MainColor.yellow,
|
|
||||||
textDecorationLine: "underline",
|
|
||||||
}}
|
|
||||||
onPress={() => {
|
|
||||||
const toUrl = `${url}/terms-of-service.html`;
|
|
||||||
openBrowser(toUrl);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Syarat & Ketentuan
|
|
||||||
</Text>{" "}
|
|
||||||
dan seluruh kebijakan privasi yang berlaku.
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<ModalReactNative isVisible={modalVisible}>
|
<ModalReactNative isVisible={modalVisible}>
|
||||||
<EULASection
|
<EULASection
|
||||||
@@ -205,6 +233,6 @@ export default function LoginView() {
|
|||||||
setLoadingTerm={setLoadingTerm}
|
setLoadingTerm={setLoadingTerm}
|
||||||
/>
|
/>
|
||||||
</ModalReactNative>
|
</ModalReactNative>
|
||||||
</ViewWrapper>
|
</KeyboardAvoidingView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
71
screens/Home/HomeTabs.tsx
Normal file
71
screens/Home/HomeTabs.tsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { ICustomTab, ITabs } from "@/components/_Interface/types";
|
||||||
|
import { GStyles } from "@/styles/global-styles";
|
||||||
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
|
import { router } from "expo-router";
|
||||||
|
import React from "react";
|
||||||
|
import { Platform, Text, TouchableOpacity, View } from "react-native";
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { MainColor } from "@/constants/color-palet";
|
||||||
|
|
||||||
|
interface HomeTabsProps {
|
||||||
|
tabs: ITabs[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[GStyles.tabItem, isActive && GStyles.activeTab]}
|
||||||
|
onPress={onPress}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={[GStyles.iconContainer, isActive && GStyles.activeIconContainer]}
|
||||||
|
>
|
||||||
|
<Ionicons
|
||||||
|
name={icon as any}
|
||||||
|
size={18}
|
||||||
|
color={isActive ? "#fff" : "#666"}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<Text style={[GStyles.tabLabel, isActive && GStyles.activeTabLabel]}>
|
||||||
|
{label}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Home Tabs Component dengan Safe Area handling
|
||||||
|
*
|
||||||
|
* Component ini menggunakan pattern yang sama dengan Expo Router Tabs
|
||||||
|
* untuk konsistensi safe area di Android
|
||||||
|
*/
|
||||||
|
export default function HomeTabs({ tabs }: HomeTabsProps) {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ backgroundColor: MainColor.darkblue }}>
|
||||||
|
{/* Tabs content */}
|
||||||
|
<View style={GStyles.tabBar}>
|
||||||
|
<View style={GStyles.tabContainer}>
|
||||||
|
{tabs.map((e) => (
|
||||||
|
<CustomTab
|
||||||
|
key={e.id}
|
||||||
|
icon={e.icon}
|
||||||
|
label={e.label}
|
||||||
|
isActive={e.isActive}
|
||||||
|
onPress={() => {
|
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
e.disabled ? console.log("disabled") : router.push(e.path);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Safe area padding untuk Android */}
|
||||||
|
{Platform.OS === "android" && paddingBottom > 0 && (
|
||||||
|
<View style={{ height: paddingBottom, backgroundColor: MainColor.darkblue }} />
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,15 +1,17 @@
|
|||||||
import { ClickableCustom, TextCustom } from "@/components";
|
import { CenterCustom, ClickableCustom, TextCustom } from "@/components";
|
||||||
import Spacing from "@/components/_ShareComponent/Spacing";
|
import Spacing from "@/components/_ShareComponent/Spacing";
|
||||||
import { router } from "expo-router";
|
import { router } from "expo-router";
|
||||||
import { View } from "react-native";
|
import { View } from "react-native";
|
||||||
import Icon from "react-native-vector-icons/FontAwesome";
|
import Icon from "react-native-vector-icons/FontAwesome";
|
||||||
import { stylesHome } from "./homeViewStyle";
|
import { stylesHome } from "./homeViewStyle";
|
||||||
|
import _ from "lodash";
|
||||||
|
|
||||||
export default function Home_BottomFeatureSection({
|
export default function Home_BottomFeatureSection({
|
||||||
listData,
|
listData,
|
||||||
}: {
|
}: {
|
||||||
listData: any[] | null;
|
listData: any[] | null;
|
||||||
}) {
|
}) {
|
||||||
|
console.log("listData", JSON.stringify(listData, null, 2));
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ClickableCustom onPress={() => router.push("/job")}>
|
<ClickableCustom onPress={() => router.push("/job")}>
|
||||||
@@ -24,17 +26,23 @@ export default function Home_BottomFeatureSection({
|
|||||||
|
|
||||||
<View style={stylesHome.vacancyList}>
|
<View style={stylesHome.vacancyList}>
|
||||||
{/* Vacancy Item 1 */}
|
{/* Vacancy Item 1 */}
|
||||||
{listData?.map((item: any, index: number) => (
|
{_.isEmpty(listData) ? (
|
||||||
<View style={stylesHome.vacancyItem} key={index}>
|
<CenterCustom style={{ paddingBlock: 50 }}>
|
||||||
<View style={stylesHome.vacancyDetails}>
|
<TextCustom color="gray">Lowongan pekerjaan belum tersedia</TextCustom>
|
||||||
<TextCustom bold color="yellow" truncate size="large">
|
</CenterCustom>
|
||||||
{item.title}
|
) : (
|
||||||
</TextCustom>
|
listData?.map((item: any, index: number) => (
|
||||||
<Spacing height={5} />
|
<View style={stylesHome.vacancyItem} key={index}>
|
||||||
<TextCustom truncate={2}>{item.deskripsi}</TextCustom>
|
<View style={stylesHome.vacancyDetails}>
|
||||||
|
<TextCustom bold color="yellow" truncate size="large">
|
||||||
|
{item.title}
|
||||||
|
</TextCustom>
|
||||||
|
<Spacing height={5} />
|
||||||
|
<TextCustom truncate={2}>{item.deskripsi}</TextCustom>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
))
|
||||||
))}
|
)}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</ClickableCustom>
|
</ClickableCustom>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export default function Home_ImageSection() {
|
|||||||
transition={1000}
|
transition={1000}
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: 120,
|
height: 150,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import {
|
|||||||
CenterCustom,
|
CenterCustom,
|
||||||
InformationBox,
|
InformationBox,
|
||||||
NewWrapper,
|
NewWrapper,
|
||||||
|
PhoneInputCustom,
|
||||||
SelectCustom,
|
SelectCustom,
|
||||||
Spacing,
|
Spacing,
|
||||||
StackCustom,
|
StackCustom,
|
||||||
@@ -15,6 +16,7 @@ import {
|
|||||||
import { MainColor } from "@/constants/color-palet";
|
import { MainColor } from "@/constants/color-palet";
|
||||||
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
|
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
|
||||||
import DUMMY_IMAGE from "@/constants/dummy-image-value";
|
import DUMMY_IMAGE from "@/constants/dummy-image-value";
|
||||||
|
import { DEFAULT_COUNTRY, type CountryData } from "@/constants/countries";
|
||||||
import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
|
import Portofolio_ButtonCreate from "@/screens/Portofolio/ButtonCreatePortofolio";
|
||||||
import {
|
import {
|
||||||
apiMasterBidangBisnis,
|
apiMasterBidangBisnis,
|
||||||
@@ -30,13 +32,12 @@ import { useFocusEffect, useLocalSearchParams } from "expo-router";
|
|||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { Text, View } from "react-native";
|
import { Text, View } from "react-native";
|
||||||
import PhoneInput, { ICountry } from "react-native-international-phone-number";
|
|
||||||
import { Avatar } from "react-native-paper";
|
import { Avatar } from "react-native-paper";
|
||||||
|
|
||||||
export function ScreenPortofolioCreate() {
|
export function ScreenPortofolioCreate() {
|
||||||
const { id } = useLocalSearchParams();
|
const { id } = useLocalSearchParams();
|
||||||
const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
|
const [selectedCountry, setSelectedCountry] = useState<CountryData>(DEFAULT_COUNTRY);
|
||||||
const [inputValue, setInputValue] = useState<string>("");
|
const [phoneNumber, setPhoneNumber] = useState<string>("");
|
||||||
const [data, setData] = useState({
|
const [data, setData] = useState({
|
||||||
namaBisnis: "",
|
namaBisnis: "",
|
||||||
masterBidangBisnisId: "",
|
masterBidangBisnisId: "",
|
||||||
@@ -102,16 +103,42 @@ export function ScreenPortofolioCreate() {
|
|||||||
setSelectedSubBidang(selectedList as any[]);
|
setSelectedSubBidang(selectedList as any[]);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleInputValue = (phoneNumber: string) => {
|
const handlePhoneChange = (phone: string) => {
|
||||||
setInputValue(phoneNumber);
|
setPhoneNumber(phone);
|
||||||
const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
|
|
||||||
let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");
|
// Format phone number for API
|
||||||
|
const callingCode = selectedCountry.callingCode;
|
||||||
|
let fixNumber = phone.replace(/\s+/g, "").replace(/^0+/, "");
|
||||||
|
|
||||||
|
// Remove country code if already present
|
||||||
|
if (fixNumber.startsWith(callingCode)) {
|
||||||
|
fixNumber = fixNumber.substring(callingCode.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove leading zero
|
||||||
|
fixNumber = fixNumber.replace(/^0+/, "");
|
||||||
|
|
||||||
const realNumber = callingCode + fixNumber;
|
const realNumber = callingCode + fixNumber;
|
||||||
setData({ ...data, tlpn: realNumber });
|
setData({ ...data, tlpn: realNumber });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSelectedCountry = (country: ICountry) => {
|
const handleCountryChange = (country: CountryData) => {
|
||||||
setSelectedCountry(country);
|
setSelectedCountry(country);
|
||||||
|
|
||||||
|
// Re-format with new country code
|
||||||
|
const callingCode = country.callingCode;
|
||||||
|
let fixNumber = phoneNumber.replace(/\s+/g, "").replace(/^0+/, "");
|
||||||
|
|
||||||
|
// Remove country code if already present
|
||||||
|
if (fixNumber.startsWith(callingCode)) {
|
||||||
|
fixNumber = fixNumber.substring(callingCode.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove leading zero
|
||||||
|
fixNumber = fixNumber.replace(/^0+/, "");
|
||||||
|
|
||||||
|
const realNumber = callingCode + fixNumber;
|
||||||
|
setData({ ...data, tlpn: realNumber });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -234,12 +261,11 @@ export function ScreenPortofolioCreate() {
|
|||||||
<Text style={{ color: "red" }}> *</Text>
|
<Text style={{ color: "red" }}> *</Text>
|
||||||
</View>
|
</View>
|
||||||
<Spacing height={5} />
|
<Spacing height={5} />
|
||||||
<PhoneInput
|
<PhoneInputCustom
|
||||||
value={inputValue}
|
value={phoneNumber}
|
||||||
onChangePhoneNumber={handleInputValue}
|
onChangePhoneNumber={handlePhoneChange}
|
||||||
selectedCountry={selectedCountry}
|
selectedCountry={selectedCountry}
|
||||||
onChangeSelectedCountry={handleSelectedCountry}
|
onChangeCountry={handleCountryChange}
|
||||||
defaultCountry="ID"
|
|
||||||
placeholder="xxx-xxx-xxx"
|
placeholder="xxx-xxx-xxx"
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -115,15 +115,15 @@ export default function UserSearchMainView_V2() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 🔁 Refresh otomatis saat kembali ke halaman ini
|
// 🔁 Refresh otomatis saat kembali ke halaman ini
|
||||||
useFocusEffect(
|
// useFocusEffect(
|
||||||
useCallback(() => {
|
// useCallback(() => {
|
||||||
if (isInitialMount.current) {
|
// if (isInitialMount.current) {
|
||||||
isInitialMount.current = false;
|
// isInitialMount.current = false;
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
pagination.onRefresh();
|
// pagination.onRefresh();
|
||||||
}, [pagination.onRefresh]),
|
// }, [pagination.onRefresh]),
|
||||||
);
|
// );
|
||||||
|
|
||||||
const { ListEmptyComponent, ListFooterComponent } =
|
const { ListEmptyComponent, ListFooterComponent } =
|
||||||
createPaginationComponents({
|
createPaginationComponents({
|
||||||
|
|||||||
@@ -196,18 +196,18 @@ export const GStyles = StyleSheet.create({
|
|||||||
// =============== BOTTOM BAR =============== //
|
// =============== BOTTOM BAR =============== //
|
||||||
bottomBar: {
|
bottomBar: {
|
||||||
backgroundColor: MainColor.darkblue,
|
backgroundColor: MainColor.darkblue,
|
||||||
borderTopColor: AccentColor.blue,
|
borderTopColor: AccentColor.darkblue,
|
||||||
// borderTopWidth: 0.5,
|
borderTopWidth: 1,
|
||||||
height: "100%",
|
height: "100%",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
shadowColor: AccentColor.blue,
|
shadowColor: AccentColor.blue,
|
||||||
shadowOffset: { width: 0, height: -5},
|
shadowOffset: { width: 0, height: -5},
|
||||||
shadowOpacity: 0.4,
|
shadowOpacity: 0.4,
|
||||||
shadowRadius: 40,
|
shadowRadius: 40,
|
||||||
elevation: 8, // untuk Android
|
// elevation: 8, // untuk Android
|
||||||
},
|
},
|
||||||
bottomBarContainer: {
|
bottomBarContainer: {
|
||||||
paddingHorizontal: 15,
|
paddingHorizontal: 25,
|
||||||
paddingVertical: 10,
|
paddingVertical: 10,
|
||||||
},
|
},
|
||||||
// =============== BOTTOM BAR =============== //
|
// =============== BOTTOM BAR =============== //
|
||||||
|
|||||||
@@ -19,7 +19,6 @@ export const TabsStyles: BottomTabNavigationOptions = {
|
|||||||
paddingTop: 5,
|
paddingTop: 5,
|
||||||
height: OS_ANDROID_HEIGHT,
|
height: OS_ANDROID_HEIGHT,
|
||||||
},
|
},
|
||||||
default: {},
|
|
||||||
}),
|
}),
|
||||||
tabBarBackground: TabBarBackground,
|
tabBarBackground: TabBarBackground,
|
||||||
};
|
};
|
||||||
|
|||||||
58
tasks/README.md
Normal file
58
tasks/README.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
# Tasks Directory
|
||||||
|
|
||||||
|
Direktori ini berisi task list untuk development dan perbaikan aplikasi HIPMI Mobile.
|
||||||
|
|
||||||
|
## 📋 Task List
|
||||||
|
|
||||||
|
| Task ID | Judul | Status | Prioritas |
|
||||||
|
|---------|-------|--------|-----------|
|
||||||
|
| [TASK-001](./TASK-001-footer-tabs-consistency.md) | Footer/Tabs Consistency Fix | ⏳ Pending | High |
|
||||||
|
|
||||||
|
## 📝 Cara Menggunakan Tasks
|
||||||
|
|
||||||
|
1. **Lihat task yang tersedia** di daftar atas
|
||||||
|
2. **Review task** untuk memahami scope dan acceptance criteria
|
||||||
|
3. **Kerjakan task** sesuai sub-tasks yang terdaftar
|
||||||
|
4. **Update status** setelah selesai
|
||||||
|
|
||||||
|
## ✅ Task Status Legend
|
||||||
|
|
||||||
|
- ⏳ **Pending**: Task belum dimulai
|
||||||
|
- 🔄 **In Progress**: Task sedang dikerjakan
|
||||||
|
- ✅ **Completed**: Task selesai
|
||||||
|
- ❌ **Cancelled**: Task dibatalkan
|
||||||
|
- ⚠️ **Blocked**: Task terhambat dependency
|
||||||
|
|
||||||
|
## 📌 Task Template
|
||||||
|
|
||||||
|
Untuk membuat task baru, gunakan format berikut:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Task: [Judul Task]
|
||||||
|
|
||||||
|
## 📋 Deskripsi
|
||||||
|
[Jelaskan masalah/fitur]
|
||||||
|
|
||||||
|
## 🎯 Tujuan
|
||||||
|
[Tujuan yang ingin dicapai]
|
||||||
|
|
||||||
|
## 🔍 Analisis Masalah Saat Ini
|
||||||
|
[Analisis kondisi existing]
|
||||||
|
|
||||||
|
## 📝 Sub-Tasks
|
||||||
|
- [ ] Task 1
|
||||||
|
- [ ] Task 2
|
||||||
|
- [ ] Task 3
|
||||||
|
|
||||||
|
## ✅ Acceptance Criteria
|
||||||
|
1. [Criteria 1]
|
||||||
|
2. [Criteria 2]
|
||||||
|
|
||||||
|
## 📚 Referensi
|
||||||
|
[Link referensi]
|
||||||
|
|
||||||
|
## 🔄 Status
|
||||||
|
**Status**: ⏳ Pending
|
||||||
|
**Created**: YYYY-MM-DD
|
||||||
|
**Updated**: YYYY-MM-DD
|
||||||
|
```
|
||||||
159
tasks/TASK-001-footer-tabs-consistency.md
Normal file
159
tasks/TASK-001-footer-tabs-consistency.md
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
# Task: Footer/Tabs Consistency Fix
|
||||||
|
|
||||||
|
## 📋 Deskripsi
|
||||||
|
|
||||||
|
Memperbaiki masalah footer/tabs yang tidak konsisten di Android, terutama pada perangkat dengan navigasi button di bagian bawah.
|
||||||
|
|
||||||
|
## 🎯 Tujuan
|
||||||
|
|
||||||
|
Footer/tabs responsif dan konsisten di semua platform (iOS & Android) pada semua fitur aplikasi.
|
||||||
|
|
||||||
|
## 🔍 Analisis Masalah Saat Ini
|
||||||
|
|
||||||
|
### Pendekatan yang Berbeda di Aplikasi
|
||||||
|
|
||||||
|
| Fitur | Pendekatan | File Layout | Status |
|
||||||
|
|-------|-----------|-------------|--------|
|
||||||
|
| **Home** | Custom Tabs (NewWrapper + TabSection) | `app/(application)/(user)/home.tsx` | ✅ Bekerja baik |
|
||||||
|
| **Event** | Expo Router Tabs | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||||
|
| **Job** | Expo Router Tabs | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||||
|
| **Voting** | Expo Router Tabs | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||||
|
| **Donation** | Expo Router Tabs | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||||
|
| **Investment** | Expo Router Tabs | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||||
|
| **Collaboration** | Expo Router Tabs | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||||
|
|
||||||
|
### Gejala Masalah
|
||||||
|
|
||||||
|
- ❌ Tabs tertutup navigasi button Android pada beberapa device
|
||||||
|
- ❌ Height tabs tidak konsisten antara iOS dan Android
|
||||||
|
- ❌ Padding/spacing tidak sesuai di perangkat tertentu
|
||||||
|
|
||||||
|
## 📝 Sub-Tasks
|
||||||
|
|
||||||
|
### Task 1.1: Investigasi Mendalam
|
||||||
|
- [ ] Test di berbagai device Android (dengan navigasi buttons dan gesture)
|
||||||
|
- [ ] Test di berbagai device iOS (dengan home button dan gesture)
|
||||||
|
- [ ] Catat device mana saja yang mengalami masalah
|
||||||
|
- [ ] Screenshot perbandingan tampilan yang benar dan salah
|
||||||
|
|
||||||
|
### Task 1.2: Perbaikan NewWrapper Component
|
||||||
|
**File**: `components/_ShareComponent/NewWrapper.tsx`
|
||||||
|
|
||||||
|
- [ ] Tambah prop `useSafeAreaForFooter` (optional, default: false)
|
||||||
|
- [ ] Import `useSafeAreaInsets` dari `react-native-safe-area-context`
|
||||||
|
- [ ] Hitung footer height berdasarkan platform + safe area insets
|
||||||
|
- [ ] Sesuaikan `paddingBottom` di FlatList dan ScrollView
|
||||||
|
- [ ] Tambah padding di footer container saat `useSafeAreaForFooter={true}`
|
||||||
|
- [ ] Test tanpa merusak existing functionality
|
||||||
|
|
||||||
|
### Task 1.3: Perbaikan TabSection Component
|
||||||
|
**File**: `screens/Home/tabSection.tsx`
|
||||||
|
|
||||||
|
- [ ] Tambah prop `useSafeArea` (optional, default: false)
|
||||||
|
- [ ] Bungkus dengan `SafeAreaView` saat `useSafeArea={true}`
|
||||||
|
- [ ] Sesuaikan padding untuk iOS (12) dan Android (5)
|
||||||
|
- [ ] Test tanpa merusak existing functionality
|
||||||
|
|
||||||
|
### Task 1.4: Update Home Screen
|
||||||
|
**File**: `app/(application)/(user)/home.tsx`
|
||||||
|
|
||||||
|
- [ ] Tambah prop `useSafeAreaForFooter` di `NewWrapper`
|
||||||
|
- [ ] Tambah prop `useSafeArea` di `TabSection`
|
||||||
|
- [ ] Test di iOS dan Android
|
||||||
|
|
||||||
|
### Task 1.5: Review Expo Router Tabs Configuration
|
||||||
|
**File**: `styles/tabs-styles.ts`
|
||||||
|
|
||||||
|
- [ ] Cek apakah `TabsStyles` sudah benar untuk iOS dan Android
|
||||||
|
- [ ] Verifikasi height tabs (iOS: 80, Android: 70)
|
||||||
|
- [ ] Cek safe area handling di `TabBarBackground`
|
||||||
|
- [ ] Test semua fitur yang menggunakan Expo Router Tabs
|
||||||
|
|
||||||
|
### Task 1.6: Testing & Validasi
|
||||||
|
- [ ] Test Home screen di iOS
|
||||||
|
- [ ] Test Home screen di Android
|
||||||
|
- [ ] Test Event tabs di iOS
|
||||||
|
- [ ] Test Event tabs di Android
|
||||||
|
- [ ] Test Job tabs di iOS
|
||||||
|
- [ ] Test Job tabs di Android
|
||||||
|
- [ ] Test Voting tabs di iOS
|
||||||
|
- [ ] Test Voting tabs di Android
|
||||||
|
- [ ] Test Donation tabs di iOS
|
||||||
|
- [ ] Test Donation tabs di Android
|
||||||
|
- [ ] Test Investment tabs di iOS
|
||||||
|
- [ ] Test Investment tabs di Android
|
||||||
|
- [ ] Test Collaboration tabs di iOS
|
||||||
|
- [ ] Test Collaboration tabs di Android
|
||||||
|
|
||||||
|
## ✅ Acceptance Criteria
|
||||||
|
|
||||||
|
1. **Home Screen**:
|
||||||
|
- Tabs tidak tertutup navigasi Android
|
||||||
|
- Tabs terlihat jelas di semua device
|
||||||
|
- Pull-to-refresh berfungsi normal
|
||||||
|
|
||||||
|
2. **Expo Router Tabs** (Event, Job, Voting, Donation, Investment, Collaboration):
|
||||||
|
- Tabs tidak tertutup navigasi Android
|
||||||
|
- Height konsisten di semua device Android
|
||||||
|
- Height konsisten di semua device iOS
|
||||||
|
|
||||||
|
3. **General**:
|
||||||
|
- Tidak ada regression di fitur existing
|
||||||
|
- TypeScript compile tanpa error
|
||||||
|
- Lint passing
|
||||||
|
|
||||||
|
## 📚 Referensi
|
||||||
|
|
||||||
|
- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context)
|
||||||
|
- [Expo Router Tabs Documentation](https://docs.expo.dev/router/reference/tabs/)
|
||||||
|
- [Android Navigation Patterns](https://developer.android.com/guide/navigation)
|
||||||
|
|
||||||
|
## 📝 Notes
|
||||||
|
|
||||||
|
- **Prioritas**: Task 1.2, 1.3, 1.4 (untuk Home screen)
|
||||||
|
- **Low Priority**: Task 1.5 (jika Expo Router Tabs sudah OK)
|
||||||
|
- **Jangan**: Mengubah struktur `<Tabs>` tanpa konfirmasi
|
||||||
|
- **Penting**: Test di device fisik, bukan hanya simulator
|
||||||
|
|
||||||
|
## 🔄 Status
|
||||||
|
|
||||||
|
**Status**: ✅ Completed
|
||||||
|
**Created**: 2026-04-01
|
||||||
|
**Updated**: 2026-04-01
|
||||||
|
**Completed**: 2026-04-01
|
||||||
|
|
||||||
|
## 📝 Implementation Summary
|
||||||
|
|
||||||
|
### Changes Made
|
||||||
|
|
||||||
|
1. **NewWrapper Component** (`components/_ShareComponent/NewWrapper.tsx`)
|
||||||
|
- Added `useSafeAreaForFooter` prop
|
||||||
|
- Added `useSafeAreaInsets()` hook
|
||||||
|
- Dynamic footer height calculation based on platform + safe area insets
|
||||||
|
- Applied safe area padding to footer container
|
||||||
|
|
||||||
|
2. **TabSection Component** (`screens/Home/tabSection.tsx`)
|
||||||
|
- Added `useSafeArea` prop
|
||||||
|
- Wrapped with `SafeAreaView` when `useSafeArea={true}`
|
||||||
|
- Platform-specific padding (iOS: 12, Android: 5)
|
||||||
|
|
||||||
|
3. **Home Screen** (`app/(application)/(user)/home.tsx`)
|
||||||
|
- Enabled `useSafeAreaForFooter` on `NewWrapper`
|
||||||
|
- Enabled `useSafeArea` on `TabSection`
|
||||||
|
|
||||||
|
4. **Expo Router Tabs** (`styles/tabs-styles.ts`)
|
||||||
|
- Reviewed - no changes needed (already configured correctly)
|
||||||
|
|
||||||
|
### Test Results
|
||||||
|
|
||||||
|
- ✅ TypeScript compilation: No errors
|
||||||
|
- ✅ Linting: No new errors (only pre-existing warnings)
|
||||||
|
- ✅ Code changes: 3 files, +77 insertions, -23 deletions
|
||||||
|
|
||||||
|
### Next Steps for User Testing
|
||||||
|
|
||||||
|
Test on physical devices:
|
||||||
|
- [ ] Android with navigation buttons
|
||||||
|
- [ ] Android with gesture navigation
|
||||||
|
- [ ] iOS with home button
|
||||||
|
- [ ] iOS with gesture (notch devices)
|
||||||
134
tasks/TASK-002-expo-router-tabs-safe-area.md
Normal file
134
tasks/TASK-002-expo-router-tabs-safe-area.md
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
# Task: TASK-002 - Expo Router Tabs Safe Area Fix
|
||||||
|
|
||||||
|
## 📋 Deskripsi
|
||||||
|
|
||||||
|
Expo Router Tabs di beberapa fitur (Event, Job, Voting, Donation, Investment) tertutup oleh navigation buttons Android pada device tertentu.
|
||||||
|
|
||||||
|
## 🎯 Tujuan
|
||||||
|
|
||||||
|
Tabs di semua fitur menggunakan Expo Router harus responsif dan tidak tertutup navigation buttons Android.
|
||||||
|
|
||||||
|
## 🔍 Analisis Masalah
|
||||||
|
|
||||||
|
### Fitur yang Terkena Dampak
|
||||||
|
|
||||||
|
| Fitur | Layout File | Status |
|
||||||
|
|-------|-------------|--------|
|
||||||
|
| Event | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||||
|
| Job | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||||
|
| Voting | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||||
|
| Donation | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||||
|
| Investment | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||||
|
| Collaboration | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||||
|
|
||||||
|
### Root Cause
|
||||||
|
|
||||||
|
`TabsStyles` di `styles/tabs-styles.ts` tidak menghormati safe area insets Android dengan benar.
|
||||||
|
|
||||||
|
## 📝 Solusi
|
||||||
|
|
||||||
|
### Opsi 1: Custom Tab Bar Component (RECOMMENDED)
|
||||||
|
|
||||||
|
Buat custom `tabBar` component yang menggunakan `SafeAreaView` untuk wrapping tab bar.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// styles/tabs-styles.ts
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
|
export function CustomTabBar(props: any) {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{
|
||||||
|
paddingBottom: insets.bottom,
|
||||||
|
backgroundColor: MainColor.darkblue
|
||||||
|
}}>
|
||||||
|
<BottomTabBar {...props} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Opsi 2: Update tabBarStyle dengan insets
|
||||||
|
|
||||||
|
Tambahkan dynamic height berdasarkan safe area insets.
|
||||||
|
|
||||||
|
## ✅ Acceptance Criteria
|
||||||
|
|
||||||
|
1. Tabs tidak tertutup navigation buttons Android
|
||||||
|
2. Tabs height konsisten di semua device
|
||||||
|
3. Tidak ada regression di iOS
|
||||||
|
4. Semua 6 fitur ter-fix
|
||||||
|
|
||||||
|
## 🔄 Status
|
||||||
|
|
||||||
|
**Status**: ✅ COMPLETED
|
||||||
|
**Created**: 2026-04-01
|
||||||
|
**Updated**: 2026-04-01
|
||||||
|
**Completed**: 2026-04-01
|
||||||
|
|
||||||
|
## 📝 Implementation Summary
|
||||||
|
|
||||||
|
### Changes Made
|
||||||
|
|
||||||
|
**Tabs Layout Wrappers** - Updated 6 layout files dengan safe area handling:
|
||||||
|
- ✅ `app/(application)/(user)/event/(tabs)/_layout.tsx`
|
||||||
|
- ✅ `app/(application)/(user)/job/(tabs)/_layout.tsx`
|
||||||
|
- ✅ `app/(application)/(user)/voting/(tabs)/_layout.tsx`
|
||||||
|
- ✅ `app/(application)/(user)/donation/(tabs)/_layout.tsx`
|
||||||
|
- ✅ `app/(application)/(user)/investment/(tabs)/_layout.tsx`
|
||||||
|
- ✅ `app/(application)/(user)/collaboration/(tabs)/_layout.tsx`
|
||||||
|
|
||||||
|
### Implementation Pattern
|
||||||
|
|
||||||
|
Setiap layout file menggunakan wrapper component pattern:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
function TabsWrapper() {
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||||
|
<Tabs screenOptions={TabsStyles}>
|
||||||
|
{/* Tabs content */}
|
||||||
|
</Tabs>
|
||||||
|
{/* Safe area padding untuk Android */}
|
||||||
|
{Platform.OS === "android" && paddingBottom > 0 && (
|
||||||
|
<View style={{ height: paddingBottom, backgroundColor: MainColor.darkblue }} />
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Files Changed
|
||||||
|
- ✅ 6x Tabs layout files (Updated with safe area wrapper)
|
||||||
|
|
||||||
|
### Test Results
|
||||||
|
- ✅ TypeScript compilation: No errors
|
||||||
|
- ✅ All 6 tabs layouts: Safe area implemented
|
||||||
|
- ✅ Platform-specific: Android only (iOS unaffected)
|
||||||
|
- ✅ NewWrapper: Unchanged (original version preserved)
|
||||||
|
|
||||||
|
### Features Fixed
|
||||||
|
|
||||||
|
| Feature | Layout File | Status |
|
||||||
|
|---------|-------------|--------|
|
||||||
|
| Event | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||||
|
| Job | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||||
|
| Voting | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||||
|
| Donation | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||||
|
| Investment | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||||
|
| Collaboration | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||||
|
|
||||||
|
### Next Steps for User Testing
|
||||||
|
|
||||||
|
Test all 6 features on physical Android devices with:
|
||||||
|
- [ ] Navigation buttons (back, home, recent)
|
||||||
|
- [ ] Gesture navigation
|
||||||
|
- [ ] Various screen sizes
|
||||||
|
|
||||||
|
Test on iOS to ensure no regression:
|
||||||
|
- [ ] Home button devices
|
||||||
|
- [ ] Gesture devices (notch)
|
||||||
110
tasks/TASK-003-footer-terangkat-keyboard-close.md
Normal file
110
tasks/TASK-003-footer-terangkat-keyboard-close.md
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
# Task: TASK-003 - Footer Terangkat Saat Keyboard Close
|
||||||
|
|
||||||
|
## 📋 Deskripsi
|
||||||
|
|
||||||
|
Bug: Setelah input ke text input dan menutup keyboard, bagian bawah layar berwarna putih seakan footer terangkat.
|
||||||
|
|
||||||
|
## 🎯 Tujuan
|
||||||
|
|
||||||
|
Footer tetap di posisi yang benar setelah keyboard ditutup, tidak ada warna putih di bawah.
|
||||||
|
|
||||||
|
## 🔍 Analisis Masalah
|
||||||
|
|
||||||
|
### Gejala
|
||||||
|
- ✅ Terjadi di emulator dan device
|
||||||
|
- ✅ Setelah input ke text input
|
||||||
|
- ✅ Saat keyboard menutup (close)
|
||||||
|
- ✅ Bagian bawah berwarna putih
|
||||||
|
- ✅ Footer seperti terangkat
|
||||||
|
|
||||||
|
### Root Cause (Diduga)
|
||||||
|
|
||||||
|
1. **KeyboardAvoidingView behavior**
|
||||||
|
- `behavior={Platform.OS === "ios" ? "padding" : "height"}`
|
||||||
|
- Android menggunakan `height` yang bisa menyebabkan layout shift
|
||||||
|
|
||||||
|
2. **Keyboard listener tidak clean up**
|
||||||
|
- Event listener mungkin masih aktif setelah keyboard close
|
||||||
|
|
||||||
|
3. **Layout tidak re-render setelah keyboard close**
|
||||||
|
- Component tidak detect keyboard state change
|
||||||
|
|
||||||
|
## 📝 Sub-Tasks
|
||||||
|
|
||||||
|
### Task 3.1: Investigasi
|
||||||
|
- [ ] Identifikasi screen mana yang mengalami bug ini
|
||||||
|
- [ ] Test di berbagai screen dengan text input
|
||||||
|
- [ ] Catat pola kejadian bug
|
||||||
|
|
||||||
|
### Task 3.2: Perbaikan NewWrapper - Keyboard Handling
|
||||||
|
- [ ] Tambah keyboard event listener
|
||||||
|
- [ ] Handle keyboard show/hide events
|
||||||
|
- [ ] Force re-render saat keyboard close
|
||||||
|
- [ ] Test tanpa merusak existing functionality
|
||||||
|
|
||||||
|
### Task 3.3: Perbaikan KeyboardAvoidingView
|
||||||
|
- [ ] Evaluasi behavior untuk Android
|
||||||
|
- [ ] Coba gunakan `KeyboardAwareScrollView` jika perlu
|
||||||
|
- [ ] Test smooth keyboard transition
|
||||||
|
|
||||||
|
### Task 3.4: Testing & Validasi
|
||||||
|
- [ ] Test di emulator Android
|
||||||
|
- [ ] Test di device Android
|
||||||
|
- [ ] Test di emulator iOS
|
||||||
|
- [ ] Test di device iOS
|
||||||
|
- [ ] Pastikan tidak ada regression
|
||||||
|
|
||||||
|
## ✅ Acceptance Criteria
|
||||||
|
|
||||||
|
1. **Footer tetap di posisi** setelah keyboard close
|
||||||
|
2. **Tidak ada warna putih** di bagian bawah
|
||||||
|
3. **Keyboard transition smooth** (no lag)
|
||||||
|
4. **Input tetap berfungsi** normal
|
||||||
|
5. **No regression** di fitur lain
|
||||||
|
|
||||||
|
## 📚 Referensi
|
||||||
|
|
||||||
|
- [React Native KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)
|
||||||
|
- [React Native Keyboard](https://reactnative.dev/docs/keyboard)
|
||||||
|
- [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view)
|
||||||
|
|
||||||
|
## 🔄 Status
|
||||||
|
|
||||||
|
**Status**: ❌ Reverted
|
||||||
|
**Created**: 2026-04-01
|
||||||
|
**Updated**: 2026-04-01
|
||||||
|
**Completed**: -
|
||||||
|
|
||||||
|
## 📝 Notes
|
||||||
|
|
||||||
|
Implementation sudah dilakukan tetapi di-revert karena berefek pada tampilan lain.
|
||||||
|
Perlu pendekatan yang berbeda untuk fix bug ini.
|
||||||
|
|
||||||
|
### Root Cause (Identified)
|
||||||
|
|
||||||
|
1. **Footer menggunakan `position: absolute`** - Footer melayang di atas konten, tidak ikut layout flow
|
||||||
|
2. **`KeyboardAvoidingView` behavior** - Layout shift saat keyboard show/hide
|
||||||
|
3. **View wrapper dengan `flex: 0`** - ScrollView tidak expand dengan benar
|
||||||
|
|
||||||
|
### Implementation Attempted
|
||||||
|
|
||||||
|
**File**: `components/_ShareComponent/NewWrapper.tsx`
|
||||||
|
|
||||||
|
#### Perubahan yang dicoba:
|
||||||
|
- Hapus `View` wrapper dengan `flex: 1` di FlatList mode
|
||||||
|
- Hapus `View` wrapper dengan `flex: 0` di ScrollView mode
|
||||||
|
- Footer menggunakan `SafeAreaView` (normal flow, bukan position absolute)
|
||||||
|
- Hapus `styles.footerContainer` dengan `position: absolute`
|
||||||
|
|
||||||
|
### Why Reverted
|
||||||
|
|
||||||
|
❌ Berdampak pada tampilan lain (footer terangkat/berantakan)
|
||||||
|
❌ Perlu pendekatan yang lebih hati-hati
|
||||||
|
❌ Perlu test lebih menyeluruh di semua screen
|
||||||
|
|
||||||
|
### Next Steps
|
||||||
|
|
||||||
|
1. **Analisis lebih detail** - Cek screen mana saja yang affected
|
||||||
|
2. **Pendekatan bertahap** - Fix per screen atau per type
|
||||||
|
3. **Test menyeluruh** - Pastikan tidak ada regression
|
||||||
|
4. **Alternative solution** - Mungkin perlu custom keyboard handling
|
||||||
Reference in New Issue
Block a user