React Native - unable to change font when secureTextEntry is set

Question

const entryInput = forwardRef((props, ref) => {
return (
    <View
        style={{
            fontFamily: "roboto-regular",
            color: "rgba(255,0,0,0.6)",
            fontSize: hp("1.5%")
        }}>
        <Text style={styles.text}>{props.show_err ? props.err : null}</Text>
        <TextInput
            ref={ref}
            style={{
                borderColor:
                    !props.err || props.err === "" || props.err === props.empty_err
                        ? "gray"
                        : "rgba(255,0,0,0.6)",
                backgroundColor: "rgba(213, 213, 213, 0.1)",
                borderWidth: wp("0.3%"),
                borderRadius: wp("1%"),
                width: wp("85%"),
                height: hp("5.2%"),
                fontFamily: "roboto-regular",
                fontSize: hp("2%"),
                fontWeight: "normal"
            }}
            returnKeyType={props.last ? "done" : "next"}
            blurOnSubmit={props.last ? true : false}
            placeholderTextColor={"gray"}
            paddingLeft={wp("2%")}
            paddingRight={hp("2%")}
            placeholder={props.placeholder}
            onSubmitEditing={() => {
                if (props.next_input) {
                    props.next_input.current.focus();
                } else if (props.action) {
                    props.action();
                }
            }}
            onChangeText={(text) => {
                if (props.setText) props.setText(text);
                if (props.validate) props.validate(text);
            }}
        />
    </View>
);});

New to react native... trying to create an input field for a password.

This custom component works great, but when I add the secureTextEntry={true} the font changes for no reason (it's not roboto-regular), it doesn't even change to the default font.

I noticed that when I remove the fontFamily key from the style object then save my code and the expo client reloads, then add fontFamily again and reload again the TextInput behaves as expected and the font is the one I set (roboto-regular), however the bug reappears when manually reloading the app.

Answer 1

The accepted answer will work on luck. The refs can be both defined or undefined when the component is being mounted.

Add the following to your component to properly solve the issue:

  const _inputRef = useRef(null);
  const setRef = useCallback((node) => {
    if (_inputRef.current) {
      // Make sure to cleanup any events/references added to the last instance
    }
    if (node) {
      // Check if a node is actually passed. Otherwise node would be null.
      // You can now do what you need to, setNativeProps, addEventListeners, measure, etc.
      node.setNativeProps({
        style: { fontFamily: "Quicksand-Medium" },
      });
    }
    // Save a reference to the node
    _inputRef.current = node;
  }, []);

Make sure your TextInput has this ref assigned:

    <TextInput ref={setRef} ... />

Answer 2

Adding the following to my custom component fixed the problem:

    useEffect(() => {
    if (ref) {
        ref.current.setNativeProps({
            style: { fontFamily: "roboto-regular" }
        });
    }
}, []);