58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
|
/* eslint-disable import/namespace */
|
|
|
|
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
|
|
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
|
|
pb={insets.bottom + Platform.select({ android: 12, ios: 0 })}
|
|
/>
|
|
</Stack>
|
|
</TouchableWithoutFeedback>
|
|
</KeyboardAvoidingView>
|
|
)
|
|
}
|