fix: jarak keyboard

Deskripsi:
- otomatis jarak input dengan keyboard ios

No Issues
This commit is contained in:
2025-08-05 17:24:49 +08:00
parent 1d555bf950
commit 1e2069ca42
11 changed files with 35 additions and 13 deletions

View File

@@ -17,6 +17,7 @@ import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { KeyboardAvoidingView, Platform, Pressable, ScrollView, View } from "react-native"; import { KeyboardAvoidingView, Platform, Pressable, ScrollView, View } from "react-native";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
type Props = { type Props = {
id: string id: string
@@ -49,6 +50,7 @@ export default function DetailDiscussionGeneral() {
const [loadingKomentar, setLoadingKomentar] = useState(true) const [loadingKomentar, setLoadingKomentar] = useState(true)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index) const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-general/${id}`); const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-general/${id}`);
const headerHeight = useHeaderHeight();
useEffect(() => { useEffect(() => {
const onValueChange = reference.on('value', snapshot => { const onValueChange = reference.on('value', snapshot => {
@@ -197,7 +199,7 @@ export default function DetailDiscussionGeneral() {
</ScrollView> </ScrollView>
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<View style={[ <View style={[
Styles.contentItemCenter, Styles.contentItemCenter,

View File

@@ -17,6 +17,7 @@ import {
View View
} from "react-native"; } from "react-native";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function CalendarDivisionCreate() { export default function CalendarDivisionCreate() {
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
@@ -24,6 +25,7 @@ export default function CalendarDivisionCreate() {
const [isSelect, setSelect] = useState(false) const [isSelect, setSelect] = useState(false)
const update = useSelector((state: any) => state.calendarCreate) const update = useSelector((state: any) => state.calendarCreate)
const dispatch = useDispatch() const dispatch = useDispatch()
const headerHeight = useHeaderHeight();
const [error, setError] = useState({ const [error, setError] = useState({
title: false, title: false,
dateStart: false, dateStart: false,
@@ -145,7 +147,7 @@ export default function CalendarDivisionCreate() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>

View File

@@ -20,6 +20,7 @@ import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native"; import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
type Props = { type Props = {
id: string; id: string;
@@ -59,6 +60,7 @@ export default function DiscussionDetail() {
const arrSkeleton = Array.from({ length: 3 }) const arrSkeleton = Array.from({ length: 3 })
const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-division/${detail}`); const reference = firebase.app().database('https://mobile-darmasaba-default-rtdb.asia-southeast1.firebasedatabase.app').ref(`/discussion-division/${detail}`);
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
const headerHeight = useHeaderHeight();
useEffect(() => { useEffect(() => {
@@ -283,7 +285,7 @@ export default function DiscussionDetail() {
</ScrollView> </ScrollView>
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<View <View
style={[ style={[

View File

@@ -19,6 +19,7 @@ import {
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import DateTimePicker, { DateType } from "react-native-ui-datepicker"; import DateTimePicker, { DateType } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function TaskDivisionAddTask() { export default function TaskDivisionAddTask() {
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
@@ -27,6 +28,7 @@ export default function TaskDivisionAddTask() {
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const [disable, setDisable] = useState(true); const [disable, setDisable] = useState(true);
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const headerHeight = useHeaderHeight();
const [range, setRange] = useState<{ const [range, setRange] = useState<{
startDate: DateType; startDate: DateType;
endDate: DateType; endDate: DateType;
@@ -129,7 +131,7 @@ export default function TaskDivisionAddTask() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>

View File

@@ -20,8 +20,10 @@ import DateTimePicker, {
DateType DateType
} from "react-native-ui-datepicker"; } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function CreateTaskAddTugas() { export default function CreateTaskAddTugas() {
const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const [disable, setDisable] = useState(true); const [disable, setDisable] = useState(true);
const [range, setRange] = useState<{ const [range, setRange] = useState<{
@@ -103,7 +105,7 @@ export default function CreateTaskAddTugas() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>

View File

@@ -6,10 +6,11 @@ import Styles from "@/constants/Styles";
import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api"; import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import 'intl'; import { useHeaderHeight } from '@react-navigation/elements';
import 'intl/locale-data/jsonp/id';
import dayjs from "dayjs"; import dayjs from "dayjs";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import 'intl';
import 'intl/locale-data/jsonp/id';
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
KeyboardAvoidingView, KeyboardAvoidingView,
@@ -23,6 +24,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function UpdateProjectTaskDivision() { export default function UpdateProjectTaskDivision() {
const headerHeight = useHeaderHeight();
const { detail } = useLocalSearchParams<{ detail: string }>(); const { detail } = useLocalSearchParams<{ detail: string }>();
const dispatch = useDispatch(); const dispatch = useDispatch();
const update = useSelector((state: any) => state.taskUpdate); const update = useSelector((state: any) => state.taskUpdate);
@@ -151,7 +153,7 @@ export default function UpdateProjectTaskDivision() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>

View File

@@ -24,8 +24,10 @@ import {
} from "react-native"; } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function CreateMember() { export default function CreateMember() {
const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.memberUpdate) const update = useSelector((state: any) => state.memberUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -230,7 +232,7 @@ export default function CreateMember() {
<KeyboardAvoidingView <KeyboardAvoidingView
style={[Styles.h100]} style={[Styles.h100]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>

View File

@@ -22,6 +22,7 @@ import {
} from "react-native"; } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
type Props = { type Props = {
id: string; id: string;
@@ -38,6 +39,7 @@ type Props = {
}; };
export default function EditMember() { export default function EditMember() {
const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.memberUpdate) const update = useSelector((state: any) => state.memberUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -259,7 +261,7 @@ export default function EditMember() {
<KeyboardAvoidingView <KeyboardAvoidingView
style={[Styles.h100]} style={[Styles.h100]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>

View File

@@ -23,8 +23,10 @@ import DateTimePicker, {
DateType DateType
} from "react-native-ui-datepicker"; } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function ProjectAddTask() { export default function ProjectAddTask() {
const headerHeight = useHeaderHeight();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate) const update = useSelector((state: any) => state.projectUpdate)
@@ -114,7 +116,7 @@ export default function ProjectAddTask() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>

View File

@@ -20,8 +20,10 @@ import DateTimePicker, {
DateType DateType
} from "react-native-ui-datepicker"; } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useHeaderHeight } from '@react-navigation/elements';
export default function CreateProjectAddTask() { export default function CreateProjectAddTask() {
const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const [disable, setDisable] = useState(true); const [disable, setDisable] = useState(true);
const [range, setRange] = useState<{ const [range, setRange] = useState<{
@@ -103,7 +105,7 @@ export default function CreateProjectAddTask() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>

View File

@@ -6,6 +6,7 @@ import Styles from "@/constants/Styles";
import { apiEditProjectTask, apiGetProjectTask } from "@/lib/api"; import { apiEditProjectTask, apiGetProjectTask } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useHeaderHeight } from '@react-navigation/elements';
import dayjs from "dayjs"; import dayjs from "dayjs";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import 'intl'; import 'intl';
@@ -17,6 +18,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function UpdateProjectTask() { export default function UpdateProjectTask() {
const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate) const update = useSelector((state: any) => state.projectUpdate)
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
@@ -125,7 +127,7 @@ export default function UpdateProjectTask() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={110} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>