ethan/fressh
1
0
Fork 0
mirror of https://github.com/EthanShoeDev/fressh.git synced 2026-01-11 14:22:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

test screen

Browse Source
This commit is contained in:
EthanShoeDev
2025-09-22 15:51:19 -04:00
parent 3b606c2f78
commit a9bee1fb80
6 changed files with 283 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/mobile/src/app/(tabs)/_layout.tsx
View File

@@ -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>

34
apps/mobile/src/app/(test)/_layout.tsx Normal file
View File

@@ -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>
);
}

121
apps/mobile/src/app/(test)/index.tsx Normal file
View File

@@ -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',
},
});

5
apps/mobile/src/app/(test)/rn-keyboard/_layout.tsx Normal file
View File

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

121
apps/mobile/src/app/(test)/rn-keyboard/index.tsx Normal file
View File

@@ -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',
},
});

2
apps/mobile/src/app/index.tsx
View File

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