44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import type { TextProps as RNTextProps } from 'react-native';
|
|
import { StyleSheet, TextInput } from 'react-native';
|
|
import Animated, { useAnimatedProps } from 'react-native-reanimated';
|
|
import useDefaultStyles from './Colors';
|
|
|
|
const styles = StyleSheet.create({
|
|
baseStyle: {
|
|
color: 'black',
|
|
},
|
|
});
|
|
Animated.addWhitelistedNativeProps({ text: true });
|
|
|
|
interface TextProps {
|
|
text: Animated.SharedValue<string>;
|
|
style?: Animated.AnimateProps<RNTextProps>['style'];
|
|
}
|
|
|
|
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
|
|
|
|
const ReText = (props: TextProps) => {
|
|
const { text, style } = { style: {}, ...props };
|
|
const defaultStyles = useDefaultStyles();
|
|
|
|
const animatedProps = useAnimatedProps(() => {
|
|
return {
|
|
text: text.value,
|
|
// Here we use any because the text prop is not available in the type
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
} as any;
|
|
});
|
|
|
|
return (
|
|
<AnimatedTextInput
|
|
underlineColorAndroid="transparent"
|
|
editable={false}
|
|
value={text.value}
|
|
style={[styles.baseStyle, defaultStyles.text, style]}
|
|
{...{ animatedProps }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ReText; |