How to style Label on TextInput ?

Ask your Question

I want to make Label on textinput to small than text inside TextInput

import {
  configureFonts,
  DefaultTheme,
  DarkTheme,
  TextInput,
} from 'react-native-paper';

const fontConfig = {
  default: {
    regular: {
      fontFamily: Fonts.FONTS.PRIMARY,
      fontWeight: 'normal',
      fontSize: 10, // <-- Try using this but not work
    },
  },
};

const theme = {
  ...DarkTheme,
  roundness: 5,
  colors: {
    ...DarkTheme.colors,
    text: Theme.COLORS.WHITE,
    placeholder: Theme.COLORS.WHITE,
    primary: Theme.COLORS.SWITCH_ON,
    background: 'transparent',
  },
  fonts: configureFonts(fontConfig),
};

<TextInput
    theme={tema}
    style={inputStyles}
    selectionColor={Theme.COLORS.WHITE}
    underlineColor={Theme.COLORS.WHITE}
    dense={true}
    {...this.props}
/>

Screenshot :

Current :

const styles = StyleSheet.create({
  input: {
    fontSize: 14,
  },
});

Expected :

const styles = StyleSheet.create({
  input: {
    fontSize: 34,
  },
});

[Trancever]

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.

[Dybovsky]

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