65 lines
No EOL
1.9 KiB
TypeScript
65 lines
No EOL
1.9 KiB
TypeScript
import {
|
|
SafeAreaView,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Dimensions
|
|
} from 'react-native';
|
|
|
|
import { useEffect, 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
|
|
useEffect( () => {
|
|
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,
|
|
},
|
|
} ) |