I'm working with the React Native Web and React Native Paper library with Styled Components. Basically I would like to customize the TextInput inner components: Label and html input
The questions are:
1) How to change Label styles? eg. width\size\color, etc. ?
2) How to change html input styles?
I want to set outline: none
to prevent the blue border show on focus in the case of browser.
I understand that in the case of native we don't have html
and the native-web transpiles it.
And I can't understand how to catch the nested label component to change its styles. Because I want to show gray label when non-filled, violet when filled and the Input text should be black. In the case of the web, it's trivial but in the case of native, I don't know how to handle it.
So is that possible at all?
Thanks for any help. Here is the code example
import React from 'react';
import {
View,
Platform,
} from 'react-native';
import {
TextInput as NativePaperInput,
withTheme,
} from 'react-native-paper';
import styled from 'styled-components/native';
const NativePaperInputThemed = withTheme(NativePaperInput);
export const TextInputStyled = styled(NativePaperInputThemed)`
${(props: any) => {
return `
outline: none; // doesn't work
input: { outline: none; } // doesn't work
& input: { outline: none; } // doesn't work
// Label change style ?
color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work
border-color: '#f92a2a8a'; // doesn't work
height: 52px;
`;
}
}
`;
P.S. Basically even colors and fontFamily doesn't work somehow
Some guy tried to change label style manually, the maintainer reponse:
You can pass fontSize via style prop. However it will affect both label and input text. There is no way to change only one of them.