'How to extend components of this type - PaperTextInput.Icon or Tab.Navigator when using styled components?
I noticed that my attempts to extend components like PaperTextInput.Icon
or Tab.Navigator
are failing and I'm wondering how am I supposed to extend them? What I'm trying to achieve is replace PaperTextInput.Icon
with StyledInputIcon
which extends PaperTextInput.Icon
. Unfortunately, this doesn't seem to work.
const PasswordInput: FunctionComponent<Props> = ({
label,
value,
error,
toggleShowPassword,
hideInput = true,
...rest
}) => {
return (
<TextInput
label={label}
value={value}
mode="outlined"
error={error}
textContentType="password"
secureTextEntry={hideInput}
right={
<PaperTextInput.Icon
style={styles.icon}
color={colors.primary600}
name={hideInput ? 'eye' : 'eye-off'}
accessibilityLabel={hideInput ? 'Show password' : 'Hide password'}
onPress={toggleShowPassword}
/>
}
{...rest}
/>
);
};
const StyledInputIcon = styled(PaperTextInput.Icon)`
margin-top: 15px;
margin-right: 5px;
`;
export default PasswordInput;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|