Input font family change, react native expo

Viewed 17

I need to change the fontfamily that I write in the input box, not the one in the label. The one that the user "inputs"

I thought that the : fontFamily Montserrat_700Bold was enough for it, but i'm still hearing that is not the same font, though it seems.

Any help would be great, thanks.

this is my input component:

import React, { useState, useEffect } from "react";
import { useNavigation,  } from '@react-navigation/native';

import { View, StyleSheet, TouchableOpacity, Image, Dimensions } from "react-native";
import { TextField } from "@softmedialab/react-native-material-textfield";
import colors from "../colors";
import sizes from "../sizes";

import { CustomText as Text } from "../Text/Text";
import { color } from "react-native-reanimated";



 const WIDTH = Dimensions.get('window').width;


export const MaterialInput = (props) => {
    const { placeholder, formik, password, style, name, changePassword, isFocused } = props;
    const [showPass, setShowPass] = useState(false);
    const navigation = useNavigation();



    let formikProps = {};

    if (formik) {
        formikProps = {
            value: formik.values[name],
            onChangeText: formik.handleChange(name),
            error: formik.touched[name] && formik.errors[name],
        };
    }

    return (
        <View >
            <TextField
                fontFamily={"Montserrat_700Bold"}
                fontSize={sizes.subtitle}
                labelFontSize={10}
                activeLineWidth={0}
                tintColor={colors.black}
                textColor={colors.text_secondary}
                baseColor={colors.text_primary}
                titleTextStyle={{}}
                labelTextStyle={{ fontFamily: "Montserrat_700Bold" }}

                inputContainerStyle={[{  backgroundColor: isFocused ? colors.light : colors.grey,
                    borderRadius: 3, borderWidth: 0.5,paddingLeft:5, paddingTop:6, height: 56, width:WIDTH -50,  marginVertical:10,
                    alignSelf:"center",

                }, style]}

                
                {...formikProps}
                {...props}
                secureTextEntry={password && !showPass}
            />

            

            {changePassword ? (
                <View style={styles.subtitle}>

                    <TouchableOpacity onPress={() => navigation.navigate("NewPassword")} >
                        <Text style={styles.subtitle}> Cambiar </Text>
                    </TouchableOpacity>
                </View>
            ) : null}
        </View>
    );
0 Answers
Related