Unable to change font-family of textInput

[ManigandanRaamanathan]

Current behaviour

Unable to change font-family of textInput. Tried setting the fontFamily through style. But not working

Expected behaviour

Be able to set custom font's for text inputs

What have you tried

Tried setting the fontFamily through style. But not working

Your Environment

software	version
ios or android	Android 6.0
react-native	0.57.0
react-native-paper	2.1.3
node	Latest
npm or yarn	Latest

[vieiralucas]

@ManigandanRaamanathan TextInput will pick the regular font from the theme. Check this code
So what you can do is pass the font-family through the theme props

import * as React from 'react';
import { TextInput } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
        theme={{ fonts: { regular: 'Apple Color Emoji' } }}
      />
    );
  }
}

[bijoycse]

Good work

[RuchikaPegasus]

You can directly assign fontfamily to TextInput

import * as React from 'react';
import { TextInput } from 'react-native-paper';

export default class MyComponent extends React.Component {
state = {
text: ''
};

render(){
return (
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => this.setState({ text })}
fontFamily:"fontName"
/>
);
}
}

[erhanbicer]

import * as React from 'react';
import { TextInput } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
        theme={{ fonts: { regular: 'Apple Color Emoji' } }}
      />
    );
  }
}

the following block of code worked💪🏻

import * as React from 'react';
import { TextInput } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
        fontFamily={"Apple Color Emoji"}
        theme={{ fonts: { regular: "" } }}
      />
    );
  }
}

[anabeatrizzz]

This code worked for me:

<TextInput
  theme={
    {
      fonts: {
        regular: {
          fontFamily: 'Poppins-Regular'
        }
      }
    }
  }
/>

[RNtaate]

@anabeatrizzz Thank you very much. Took me a while before I found your solution.

[Suba13]

Using the below code, Still I couldn't change the fontFamily for my Textinput
<TextInput
theme={
{
fonts: {
regular: {
fontFamily: 'ProximaNovaMedium'
}
}
}
}
/>

[mohcenesegouat]

I did all the previous solutions but no one worked for me.
So after long search and attempts I finally achieved a solution
you just need to add the contentStyle property with font family like below :

<TextInput
     label='Email'
       value={this.state.text}
        onChangeText={text => this.setState({ text })}
        contentStyle={{ fontFamily: "Montserrat" }}
      />

[KennedyKeinstein]

I did all the previous solutions but no one worked for me. So after long search and attempts I finally achieved a solution you just need to add the contentStyle property with font family like below :

<TextInput
     label='Email'
       value={this.state.text}
        onChangeText={text => this.setState({ text })}
        contentStyle={{ fontFamily: "Montserrat" }}
      />

Worked for me, thanks

[Pajimo]

I did all the previous solutions but no one worked for me. So after long search and attempts I finally achieved a solution you just need to add the contentStyle property with font family like below :

<TextInput
     label='Email'
       value={this.state.text}
        onChangeText={text => this.setState({ text })}
        contentStyle={{ fontFamily: "Montserrat" }}
      />

This worked for me, thanks

[shubuu07]

contentStyle={{ fontFamily: "Poppins-Medium" }}

its worked for me

[neeraj500]

@mohcenesegouat Thank you so much, been spending hours looking for this 👍

[kiing-dom]

@mohcenesegouat you are a G 🙏🏾.

anyone know how to change the label font?