(FlatInput): change label fontFamily

[fershibli]

Description

I've been trying to customize my Input mode="flat", but one thing that I wasn't able to figure out (even reading the source code) was How to change the fontFamily of my Input's label.

I looked over a lot of issues on this repository and I was able to remove the underline from the input and have a different visual for when it is selected/filled.

While looking the original source, I found that I could change it through the project's Theme, but I'm using styled-components/native's ThemeProvider, I'm not sure the cleanest way to accomplish that. It would be better for me to change it directly on the component.

Please, help me to change the label fontFamily. I would be very grateful. Thanks!

Coding

import React from 'react';
import { Styled, StyleSheet } from './styled';

type FlatInputProps = {
  label: string;
  value: string;
  onChangeText: (text: string) => void;
};

const FlatInput: React.FC<FlatInputProps> = ({
  label,
  value,
  onChangeText,
}) => {
  const [isSelected, setIsSelected] = React.useState(false);
  return (
    <Styled.TextInput
      mode="flat"
      label={label}
      value={value}
      onChangeText={(content) => onChangeText(content)}
      onFocus={() => setIsSelected(true)}
      onBlur={() => setIsSelected(false)}
      underlineColor="transparent"
      underlineStyle={StyleSheet.TextInputUnderline}
      theme={StyleSheet.TextInputTheme}
      contentStyle={StyleSheet.TextInputContentStyle}
      bgColor={value.length || isSelected ? 'white' : ''}
    />
  );
};

export default FlatInput;

import styled from 'styled-components/native';
import { TextInput } from 'react-native-paper';
import FONTS from '@src/theme/fonts';

export const Styled = {
  TextInput: styled(TextInput)<{ bgColor?: string }>`
    width: 100%;
    border: 2px solid #f1f2fe;
    background-color: ${(p) => p.bgColor || '#f1f2fe'};
    font-weight: 700;
    margin-bottom: 8px;
  `,
};

export const StyleSheet = {
  TextInputUnderline: {
    display: 'none',
  },
  TextInputTheme: {
    colors: {
      primary: '#2B3267',
      placeholder: '#2B3267',
    },
  },
  TextInputContentStyle: {
    fontFamily: FONTS?.GT_WALSHEIM,
  },
};

[fershibli]

I was able to achieve it on iOS by assigning label as a styled Text

<Styled.TextInput
  mode="flat"
  label={<Styled.TextH6>{label}</Styled.TextH6>}
  ... />

But as you can see bellow, it didn't work for Android. Any ideas of how to solve this?

(iOS on the left, Android on the right)

[lukewalczak]

Hey @fershibli, could you please create an expo snack or sample github repo from your code?