Skip to content

Commit

Permalink
fully implement keyboard controller
Browse files Browse the repository at this point in the history
  • Loading branch information
@haileyok
haileyok committed May 19, 2024
1 parent a32f29d commit a93c69f
Show file tree
Hide file tree
Showing 3 changed files with 231 additions and 236 deletions.
116 changes: 58 additions & 58 deletions src/App.native.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,43 +88,41 @@ function InnerApp() {

return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<KeyboardProvider enabled={false} statusBarTranslucent={false}>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady}>
<RootSiblingParent>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<GestureHandlerRootView style={s.h100pct}>
<TestCtrls />
<Shell />
</GestureHandlerRootView>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</StatsigProvider>
</QueryProvider>
</React.Fragment>
</RootSiblingParent>
</Splash>
</ThemeProvider>
</Alf>
</KeyboardProvider>
<Alf theme={theme}>
<ThemeProvider theme={theme}>
<Splash isReady={isReady}>
<RootSiblingParent>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<StatsigProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<GestureHandlerRootView style={s.h100pct}>
<TestCtrls />
<Shell />
</GestureHandlerRootView>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</StatsigProvider>
</QueryProvider>
</React.Fragment>
</RootSiblingParent>
</Splash>
</ThemeProvider>
</Alf>
</SafeAreaProvider>
)
}
Expand All @@ -145,27 +143,29 @@ function App() {
* that is set up in the InnerApp component above.
*/
return (
<SessionProvider>
<ShellStateProvider>
<PrefsStateProvider>
<MutedThreadsProvider>
<InvitesStateProvider>
<ModalStateProvider>
<DialogStateProvider>
<LightboxStateProvider>
<I18nProvider>
<PortalProvider>
<InnerApp />
</PortalProvider>
</I18nProvider>
</LightboxStateProvider>
</DialogStateProvider>
</ModalStateProvider>
</InvitesStateProvider>
</MutedThreadsProvider>
</PrefsStateProvider>
</ShellStateProvider>
</SessionProvider>
<KeyboardProvider enabled={true}>
<SessionProvider>
<ShellStateProvider>
<PrefsStateProvider>
<MutedThreadsProvider>
<InvitesStateProvider>
<ModalStateProvider>
<DialogStateProvider>
<LightboxStateProvider>
<I18nProvider>
<PortalProvider>
<InnerApp />
</PortalProvider>
</I18nProvider>
</LightboxStateProvider>
</DialogStateProvider>
</ModalStateProvider>
</InvitesStateProvider>
</MutedThreadsProvider>
</PrefsStateProvider>
</ShellStateProvider>
</SessionProvider>
</KeyboardProvider>
)
}

Expand Down
20 changes: 4 additions & 16 deletions src/screens/Messages/Conversation/MessagesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,18 @@ import React, {useCallback, useRef} from 'react'
import {FlatList, View} from 'react-native'
import {
KeyboardStickyView,
useKeyboardContext,
useKeyboardHandler,
} from 'react-native-keyboard-controller'
import {
runOnJS,
scrollTo,
useAnimatedKeyboard,
useAnimatedRef,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/reanimated2/hook/commonTypes'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {AppBskyRichtextFacet, RichText} from '@atproto/api'
import {useFocusEffect} from '@react-navigation/native'

import {shortenLinks} from '#/lib/strings/rich-text-manip'
import {isIOS, isNative} from '#/platform/detection'
Expand Down Expand Up @@ -79,17 +76,6 @@ export function MessagesList({
blocked?: boolean
footer?: React.ReactNode
}) {
const kbContext = useKeyboardContext()
useFocusEffect(
useCallback(() => {
kbContext.setEnabled(true)

return () => {
kbContext.setEnabled(false)
}
}, [kbContext]),
)

const convoState = useConvoActive()
const {getAgent} = useAgent()

Expand Down Expand Up @@ -219,7 +205,7 @@ export function MessagesList({
const nativeBottomBarHeight = isIOS ? 42 : 60
const bottomOffset = isWeb ? 0 : bottomInset + nativeBottomBarHeight

const kb = useAnimatedKeyboard()
const keyboardHeight = useSharedValue(0)
const keyboardIsOpening = useSharedValue(false)

useKeyboardHandler({
Expand All @@ -229,6 +215,8 @@ export function MessagesList({
},
onMove: e => {
'worklet'
keyboardHeight.value = e.height

if (e.height > bottomOffset) {
console.log('move')
scrollTo(flatListRef, 0, 1e7, false)
Expand All @@ -242,7 +230,7 @@ export function MessagesList({

const animatedListStyle = useAnimatedStyle(() => ({
marginBottom:
kb.height.value > bottomOffset ? kb.height.value : bottomOffset,
keyboardHeight.value > bottomOffset ? keyboardHeight.value : bottomOffset,
}))

// -- Message sending
Expand Down
Loading

0 comments on commit a93c69f

Please sign in to comment.