63 lines
No EOL
1.6 KiB
TypeScript
63 lines
No EOL
1.6 KiB
TypeScript
import {
|
|
SafeAreaView,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Dimensions
|
|
} from 'react-native';
|
|
|
|
import {useState} from 'react';
|
|
import RenderHtml from 'react-native-render-html';
|
|
import {useNavigation} from '@react-navigation/native';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
|
|
import {Colors} from '@/constants/Colors';
|
|
import {useColorScheme} from '@/hooks/useColorScheme';
|
|
import {ThemedView} from '@/components/ThemedView';
|
|
|
|
export default function CategoryScreen() {
|
|
const colorScheme = useColorScheme() ?? 'light';
|
|
const navigation = useNavigation();
|
|
const [description, setDescription] = useState('');
|
|
|
|
// Load item from storage
|
|
AsyncStorage.getItem('activeCategory').then((data) => {
|
|
const itemData: any = JSON.parse(data ?? '{}');
|
|
|
|
if (itemData != null) {
|
|
const {name, description} = itemData;
|
|
|
|
// Set description
|
|
// @ts-ignore
|
|
setDescription(description);
|
|
|
|
// Set page title
|
|
navigation.setOptions({title: name});
|
|
}
|
|
});
|
|
|
|
// HTML render props
|
|
const source = {html: description};
|
|
const width = Dimensions.get('window').width;
|
|
|
|
return (
|
|
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
|
|
<ScrollView style={styles.container}>
|
|
<ThemedView style={styles.htmlContainer}>
|
|
<RenderHtml
|
|
contentWidth={width}
|
|
source={source}
|
|
/>
|
|
</ThemedView>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 25,
|
|
},
|
|
htmlContainer: {
|
|
paddingBottom: 50,
|
|
},
|
|
}) |