54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { useRef } from 'react'
|
|
|
|
import { Composer, Messages } from '@status-im/components'
|
|
import { Stack, useTheme } from '@tamagui/core'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import {
|
|
Keyboard,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
TouchableWithoutFeedback,
|
|
} from 'react-native'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { ScrollView } from 'tamagui'
|
|
|
|
import type { RootStackParamList } from '../App'
|
|
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
|
|
|
type ChannelScreenProps = NativeStackScreenProps<RootStackParamList, 'Channel'>
|
|
|
|
export const ChannelScreen = ({ route }: ChannelScreenProps) => {
|
|
const insets = useSafeAreaInsets()
|
|
const theme = useTheme()
|
|
|
|
// We need to get the channel name from the route params
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const _channelName = route.params.channelId
|
|
const scrollRef = useRef(null)
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
style={{ height: '100%', flex: 1, backgroundColor: theme.background.val }}
|
|
>
|
|
<StatusBar style={'dark'} animated />
|
|
<ScrollView
|
|
ref={scrollRef}
|
|
paddingHorizontal={12}
|
|
width="100%"
|
|
onContentSizeChange={() => scrollRef.current?.scrollToEnd()}
|
|
>
|
|
<Stack pt={insets.top + 60} pb={insets.bottom}>
|
|
<Messages />
|
|
</Stack>
|
|
</ScrollView>
|
|
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
|
<Stack>
|
|
<Composer />
|
|
</Stack>
|
|
</TouchableWithoutFeedback>
|
|
</KeyboardAvoidingView>
|
|
)
|
|
}
|