test screen

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -19,6 +19,7 @@ export default function TabsLayout() {
 			// rippleColor={theme.colors.transparent}
 			// ios
 			// blurEffect="systemChromeMaterial"
+			// disableTransparentOnScrollEdge={true}
 		>
 			<NativeTabs.Trigger name="index">
 				<Label selectedStyle={{ color: theme.colors.textPrimary }}>Hosts</Label>

apps/mobile/src/app/(test)/_layout.tsx

@@ -0,0 +1,34 @@
+import { Icon, Label, NativeTabs } from 'expo-router/unstable-native-tabs';
+import React from 'react';
+import { useTheme } from '@/lib/theme';
+
+export default function TabsLayout() {
+	const theme = useTheme();
+	return (
+		<NativeTabs
+			// common
+			backgroundColor={theme.colors.surface}
+			iconColor={theme.colors.muted}
+			labelStyle={{ color: theme.colors.muted }}
+			tintColor={theme.colors.primary}
+			shadowColor={theme.colors.shadow}
+			// android
+			backBehavior="initialRoute"
+			indicatorColor={theme.colors.primary}
+			// labelVisibilityMode="labeled"
+			// rippleColor={theme.colors.transparent}
+			// ios
+			// blurEffect="systemChromeMaterial"
+			// disableTransparentOnScrollEdge={true}
+		>
+			<NativeTabs.Trigger name="index">
+				<Label selectedStyle={{ color: theme.colors.textPrimary }}>Hosts</Label>
+				<Icon
+					selectedColor={theme.colors.textPrimary}
+					sf="house.fill"
+					drawable="ic_menu_myplaces"
+				/>
+			</NativeTabs.Trigger>
+		</NativeTabs>
+	);
+}

apps/mobile/src/app/(test)/index.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useState } from 'react';
+import {
+	Text,
+	View,
+	StyleSheet,
+	type TextInputProps,
+	TextInput,
+} from 'react-native';
+import {
+	KeyboardAvoidingView,
+	KeyboardToolbar,
+} from 'react-native-keyboard-controller';
+
+export default function ToolbarExample() {
+	return (
+		<>
+			<View
+				style={{
+					flex: 1,
+					borderWidth: 10,
+					borderColor: 'green',
+					// paddingBottom: 100,
+					marginBottom: 100,
+					justifyContent: 'flex-start',
+				}}
+			>
+				<KeyboardAvoidingView
+					behavior="height"
+					keyboardVerticalOffset={50}
+					style={{
+						flex: 1,
+						paddingHorizontal: 16,
+						backgroundColor: 'white',
+						borderWidth: 10,
+						borderColor: 'red',
+						// paddingBottom: 100,
+						// marginBottom: 100,
+						justifyContent: 'flex-end',
+					}}
+				>
+					<View
+						style={{
+							borderWidth: 10,
+							borderColor: 'blue',
+							// marginBottom: 50,
+						}}
+					>
+						<TextInputAndLabel placeholder="Your name" title="Name" />
+					</View>
+				</KeyboardAvoidingView>
+			</View>
+			<KeyboardToolbar />
+		</>
+	);
+}
+
+type CustomTextInputProps = {
+	title?: string;
+} & TextInputProps;
+
+const TextInputAndLabel = (props: CustomTextInputProps) => {
+	const { title, ...rest } = props;
+	const [isFocused, setFocused] = useState(false);
+
+	const onFocus = useCallback<NonNullable<TextInputProps['onFocus']>>((e) => {
+		setFocused(true);
+		props.onFocus?.(e);
+	}, []);
+
+	const onBlur = useCallback<NonNullable<TextInputProps['onBlur']>>((e) => {
+		setFocused(false);
+		props.onBlur?.(e);
+	}, []);
+
+	return (
+		<>
+			{!!title && <Text style={textInputStyles.title}>{title}</Text>}
+			<TextInput
+				placeholderTextColor="#6c6c6c"
+				style={[
+					textInputStyles.container,
+					rest.editable === false && textInputStyles.disabled,
+					isFocused && textInputStyles.focused,
+				]}
+				// multiline
+				numberOfLines={2}
+				testID={rest.placeholder}
+				{...rest}
+				placeholder={`${rest.placeholder}`}
+				onFocus={onFocus}
+				onBlur={onBlur}
+			/>
+		</>
+	);
+};
+
+const textInputStyles = StyleSheet.create({
+	title: {
+		marginBottom: 6,
+		marginLeft: 3,
+		color: 'black',
+		fontSize: 16,
+	},
+	container: {
+		width: '100%',
+		minHeight: 50,
+		maxHeight: 200,
+		borderColor: 'black',
+		borderWidth: 2,
+		marginRight: 160,
+		borderRadius: 10,
+		color: 'black',
+		paddingHorizontal: 12,
+	},
+	disabled: {
+		opacity: 0.5,
+	},
+	focused: {
+		borderColor: '#20AAFF',
+	},
+});

apps/mobile/src/app/(test)/rn-keyboard/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from 'expo-router';
+
+export default function Layout() {
+	return <Stack />;
+}

apps/mobile/src/app/(test)/rn-keyboard/index.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useState } from 'react';
+import {
+	Text,
+	View,
+	StyleSheet,
+	type TextInputProps,
+	TextInput,
+} from 'react-native';
+import {
+	KeyboardAvoidingView,
+	KeyboardToolbar,
+} from 'react-native-keyboard-controller';
+
+export default function ToolbarExample() {
+	return (
+		<>
+			<View
+				style={{
+					flex: 1,
+					borderWidth: 10,
+					borderColor: 'green',
+					// paddingBottom: 100,
+					// marginBottom: 100,
+					justifyContent: 'flex-start',
+				}}
+			>
+				<KeyboardAvoidingView
+					behavior="height"
+					keyboardVerticalOffset={160}
+					style={{
+						flex: 1,
+						paddingHorizontal: 16,
+						backgroundColor: 'white',
+						borderWidth: 10,
+						borderColor: 'red',
+						// paddingBottom: 100,
+						// marginBottom: 100,
+						justifyContent: 'flex-end',
+					}}
+				>
+					<View
+						style={{
+							borderWidth: 10,
+							borderColor: 'blue',
+							// marginBottom: 50,
+						}}
+					>
+						<TextInputAndLabel placeholder="Your name" title="Name" />
+					</View>
+				</KeyboardAvoidingView>
+			</View>
+			<KeyboardToolbar />
+		</>
+	);
+}
+
+type CustomTextInputProps = {
+	title?: string;
+} & TextInputProps;
+
+const TextInputAndLabel = (props: CustomTextInputProps) => {
+	const { title, ...rest } = props;
+	const [isFocused, setFocused] = useState(false);
+
+	const onFocus = useCallback<NonNullable<TextInputProps['onFocus']>>((e) => {
+		setFocused(true);
+		props.onFocus?.(e);
+	}, []);
+
+	const onBlur = useCallback<NonNullable<TextInputProps['onBlur']>>((e) => {
+		setFocused(false);
+		props.onBlur?.(e);
+	}, []);
+
+	return (
+		<>
+			{!!title && <Text style={textInputStyles.title}>{title}</Text>}
+			<TextInput
+				placeholderTextColor="#6c6c6c"
+				style={[
+					textInputStyles.container,
+					rest.editable === false && textInputStyles.disabled,
+					isFocused && textInputStyles.focused,
+				]}
+				// multiline
+				numberOfLines={2}
+				testID={rest.placeholder}
+				{...rest}
+				placeholder={`${rest.placeholder}`}
+				onFocus={onFocus}
+				onBlur={onBlur}
+			/>
+		</>
+	);
+};
+
+const textInputStyles = StyleSheet.create({
+	title: {
+		marginBottom: 6,
+		marginLeft: 3,
+		color: 'black',
+		fontSize: 16,
+	},
+	container: {
+		width: '100%',
+		minHeight: 50,
+		maxHeight: 200,
+		borderColor: 'black',
+		borderWidth: 2,
+		marginRight: 160,
+		borderRadius: 10,
+		color: 'black',
+		paddingHorizontal: 12,
+	},
+	disabled: {
+		opacity: 0.5,
+	},
+	focused: {
+		borderColor: '#20AAFF',
+	},
+});

apps/mobile/src/app/index.tsx

@@ -1,5 +1,5 @@
 import { Redirect } from 'expo-router';
 
 export default function RootRedirect() {
-	return <Redirect href="/(tabs)" />;
+	return <Redirect href="/(test)" />;
 }