fix(workout-builder): handle keyboard overlap on builder screen
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { View, Text, TextInput, Pressable, ScrollView, Alert } from "react-native";
|
import { View, Text, TextInput, Pressable, ScrollView, Alert, KeyboardAvoidingView, Platform } from "react-native";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useNavigation } from "@react-navigation/native";
|
import { useNavigation } from "@react-navigation/native";
|
||||||
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
||||||
@@ -39,7 +39,12 @@ export function BuilderScreen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollView className="flex-1 bg-white">
|
<KeyboardAvoidingView
|
||||||
|
className="flex-1"
|
||||||
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||||
|
keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
|
||||||
|
>
|
||||||
|
<ScrollView className="flex-1 bg-white" contentContainerStyle={{ paddingBottom: 40 }}>
|
||||||
<View className="p-4">
|
<View className="p-4">
|
||||||
<Text className="text-2xl font-bold text-slate-900 mb-1">{t("buildWorkout")}</Text>
|
<Text className="text-2xl font-bold text-slate-900 mb-1">{t("buildWorkout")}</Text>
|
||||||
<Text className="text-slate-500 mb-4">
|
<Text className="text-slate-500 mb-4">
|
||||||
@@ -163,6 +168,8 @@ export function BuilderScreen() {
|
|||||||
</Text>
|
</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user