Customize TextInput Label of the react-native-paper in the case of React Native Web

Question

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

Answer 1

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.

https://github.com/callstack/react-native-paper/issues/1505

Answer 2

label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>} 

Answer 3

You can pass a component for the label prop. For Example:

export const Input = styled(TextInput).attrs({
   dense: true,
   activeUnderlineColor: theme.colors.ui.blueDark,
   label: <Text style={{fontSize: 50}}>My Custom Label</Text>
})`
   width: 100%;
   height: 50px;
   font-size: 16px;
`

However, I have not looked for a way to control the scale when the animation occurs.