CODEWITHSUNDEEP
androidreactjsreact-nativejsxtextinput
Prantik Mondal
Prantik Mondal

Reputation: 493

How to apply custom font in textinput field while typing text in react native?

My text input field is :

<TextInput
     selectionColor={'#1688EA'}
     keyboardType="email-address"
     autoCapitalize='none'
     autoCompleteType='email'
     autoCorrect={true}
     textAlign="center"
     onFocus={this.setFocus.bind(this, true)}
     onBlur={this.setFocus.bind(this, false)}
     numberOfLines={1}
     style={{
             color: "#010101", flex: 1,
             height: 48,
             alignContent: "center",
             fontSize: 17,
             paddingLeft: 28,
             fontFamily: 'Gilroy-SemiBold',
            }}
            onChangeText={(text) => this.setEmailText(text)}
            value={this.state.email}
            ref={(ref) => { this.email_entry = ref }}
/>

Initially typed text using custom font then it became the default font again. How can I resolve it?

Font should look like this [This is my custom font]:

desired output

But font is showing like this [Default font]:

Output is

For better understand, real-time output is: Automatically changing to system font

auto changing font

Version using react-native: 0.61.5 react: 16.9.0

Upvotes: 1

Views: 527

Answers (1)

Elambaruthi K
Elambaruthi K

Reputation: 21

This styling will work for iOS, if you are using android change it to gilroy-semibold or gilroy-medium instead of Gilroy-SemiBold for android(Few semibold fonts won't work in android)

Upvotes: 1

Related Questions