Skip to content

Chat keyboard overlap example. #394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
trcoffman wants to merge 1 commit into
base: web
Choose a base branch
from
Open

Chat keyboard overlap example. #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 94 additions & 90 deletions example/app/(tabs)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,164 +1,168 @@
import { Link, type LinkProps } from "expo-router";
import { useCallback } from "react";
import { type LayoutChangeEvent, Platform, Pressable, StyleSheet, useColorScheme, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Link, type LinkProps } from 'expo-router';
import { useCallback } from 'react';
import { type LayoutChangeEvent, Platform, Pressable, StyleSheet, useColorScheme, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { LegendList } from "@legendapp/list";
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
import { ThemedText } from "~/components/ThemedText";
import { ThemedView } from "~/components/ThemedView";
import { LegendList } from '@legendapp/list';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { ThemedText } from '~/components/ThemedText';
import { ThemedView } from '~/components/ThemedView';

// @ts-expect-error nativeFabricUIManager is not defined in the global object types
export const IsNewArchitecture = Platform.OS === "web" || global.nativeFabricUIManager != null;
export const IsNewArchitecture = Platform.OS === 'web' || global.nativeFabricUIManager != null;

type ListElement = {
id: number;
title: string;
url: LinkProps["href"];
url: LinkProps['href'];
index: number;
};

const data: ListElement[] = [
{
title: "Bidirectional Infinite List",
url: "/bidirectional-infinite-list",
title: 'Bidirectional Infinite List',
url: '/bidirectional-infinite-list',
},
{
title: "Chat example",
url: "/chat-example",
title: 'Chat example',
url: '/chat-example',
},
{
title: "AI Chat",
url: "/ai-chat",
title: 'AI Chat',
url: '/ai-chat',
},
{
title: "Infinite chat",
url: "/chat-infinite",
title: 'Infinite chat',
url: '/chat-infinite',
},
{
title: "Countries List",
url: "/countries",
title: 'Countries List',
url: '/countries',
},
{
title: "Countries with headers",
url: "/countries-with-headers",
title: 'Countries with headers',
url: '/countries-with-headers',
},
{
title: "Countries with headers fixed",
url: "/countries-with-headers-fixed",
title: 'Countries with headers fixed',
url: '/countries-with-headers-fixed',
},
{
title: "Countries with headers sticky",
url: "/countries-with-headers-sticky",
title: 'Countries with headers sticky',
url: '/countries-with-headers-sticky',
},
{
title: "Lazy List",
url: "/lazy-list",
title: 'Lazy List',
url: '/lazy-list',
},
{
title: "Always render",
url: "/always-render",
title: 'Always render',
url: '/always-render',
},
{
title: "MVCP test",
url: "/mvcp-test",
title: 'MVCP test',
url: '/mvcp-test',
},
{
title: "Accurate scrollToIndex",
url: "/accurate-scrollto",
title: 'Accurate scrollToIndex',
url: '/accurate-scrollto',
},
{
title: "Accurate scrollToIndex 2",
url: "/accurate-scrollto-2",
title: 'Accurate scrollToIndex 2',
url: '/accurate-scrollto-2',
},
{
title: "Columns",
url: "/columns",
title: 'Columns',
url: '/columns',
},
{
title: "Product shelf",
url: "/product-shelf",
title: 'Product shelf',
url: '/product-shelf',
},

{
title: "Cards Columns",
url: "/cards-columns",
title: 'Cards Columns',
url: '/cards-columns',
},
{
title: "Chat keyboard",
url: "/chat-keyboard",
title: 'Chat keyboard',
url: '/chat-keyboard',
},
{
title: "Movies FlashList",
url: "/movies-flashlist",
title: 'Chat keyboard overlap',
url: '/chat-keyboard-overlap',
},
{
title: "Initial scroll index precise navigation",
url: "/initial-scroll-index",
title: 'Movies FlashList',
url: '/movies-flashlist',
},
{
title: "Initial scroll index(free element height)",
url: "/initial-scroll-index-free-height",
title: 'Initial scroll index precise navigation',
url: '/initial-scroll-index',
},
{
title: "Initial scroll index(start at the end)",
url: "/initial-scroll-start-at-the-end",
title: 'Initial scroll index(free element height)',
url: '/initial-scroll-index-free-height',
},
{
title: "Initial Scroll Index keyed",
url: "/initial-scroll-index-keyed",
title: 'Initial scroll index(start at the end)',
url: '/initial-scroll-start-at-the-end',
},
{
title: "Mutable elements",
url: "/mutable-cells",
title: 'Initial Scroll Index keyed',
url: '/initial-scroll-index-keyed',
},
{
title: "Extra data",
url: "/extra-data",
title: 'Mutable elements',
url: '/mutable-cells',
},
{
title: "Countries List(FlashList)",
url: "/countries-flashlist",
title: 'Extra data',
url: '/extra-data',
},
{
title: "Filter elements",
url: "/filter-elements",
title: 'Countries List(FlashList)',
url: '/countries-flashlist',
},
{
title: "Video feed",
url: "/video-feed",
title: 'Filter elements',
url: '/filter-elements',
},
{
title: "Countries Reorder",
url: "/countries-reorder",
title: 'Video feed',
url: '/video-feed',
},
{
title: "Cards FlashList",
url: "/cards-flashlist",
title: 'Countries Reorder',
url: '/countries-reorder',
},
{
title: "Cards no recycle",
url: "/cards-no-recycle",
title: 'Cards FlashList',
url: '/cards-flashlist',
},
{
title: "Cards FlatList",
url: "/cards-flatlist",
title: 'Cards no recycle',
url: '/cards-no-recycle',
},
{
title: "Add to the end",
url: "/add-to-end",
title: 'Cards FlatList',
url: '/cards-flatlist',
},
{
title: "Chat resize outer",
url: "/chat-resize-outer",
title: 'Add to the end',
url: '/add-to-end',
},
{
title: "Accurate scrollToHuge",
url: "/accurate-scrollto-huge",
title: 'Chat resize outer',
url: '/chat-resize-outer',
},
{
title: "Chat keyboard big",
url: "/chat-keyboard-big",
title: 'Accurate scrollToHuge',
url: '/accurate-scrollto-huge',
},
{
title: 'Chat keyboard big',
url: '/chat-keyboard-big',
},
].map(
(v, i) =>
Expand All @@ -171,15 +175,15 @@ const data: ListElement[] = [
const RightIcon = () => <ThemedText type="subtitle">›</ThemedText>;

const ListItem = ({ title, url, index }: ListElement) => {
const theme = useColorScheme() ?? "light";
const theme = useColorScheme() ?? 'light';

return (
<Link asChild href={url}>
<Pressable>
<ThemedView
style={[
styles.item,
{ borderColor: theme === "light" ? "#ccc" : "#666" },
{ borderColor: theme === 'light' ? '#ccc' : '#666' },
index === 0 && { borderTopWidth: 1 },
]}
>
Expand All @@ -194,7 +198,7 @@ const ListItem = ({ title, url, index }: ListElement) => {
const ListElements = () => {
const height = useBottomTabBarHeight();
const onLayout = useCallback((event: LayoutChangeEvent) => {
console.log("onlayout", event.nativeEvent.layout);
console.log('onlayout', event.nativeEvent.layout);
}, []);
return (
<SafeAreaView style={styles.container}>
Expand All @@ -203,16 +207,16 @@ const ListElements = () => {
estimatedItemSize={60}
keyExtractor={(item) => item.id.toString()}
ListFooterComponent={<View />}
ListFooterComponentStyle={{ height: Platform.OS === "ios" ? height : 0 }}
ListFooterComponentStyle={{ height: Platform.OS === 'ios' ? height : 0 }}
ListHeaderComponent={
<View style={{ paddingHorizontal: 16, paddingVertical: 8 }}>
<ThemedText style={{ fontWeight: "bold" }}>
{IsNewArchitecture ? "New" : "Old"} Architecture, {__DEV__ ? "DEV" : "PROD"}, 2.0
<ThemedText style={{ fontWeight: 'bold' }}>
{IsNewArchitecture ? 'New' : 'Old'} Architecture, {__DEV__ ? 'DEV' : 'PROD'}, 2.0
</ThemedText>
</View>
}
onItemSizeChanged={(info) => {
console.log("item size changed", info);
console.log('item size changed', info);
}}
onLayout={onLayout}
renderItem={({ item, index }) => <ListItem {...item} index={index} />}
Expand All @@ -227,11 +231,11 @@ const styles = StyleSheet.create({
},
item: {
borderBottomWidth: 1,
flexDirection: "row",
flexDirection: 'row',
height: 60,
justifyContent: "space-between",
justifyContent: 'space-between',
padding: 16,
width: "100%",
width: '100%',
},
});

Expand Down
Loading