Cannot set fontWeight: bold

[juergengunz]

Somehow, it has no effect if I use the style fontWeight:'bold'.

[bhrott]

Hi,

Can you paste here some piece of your code?

[juergengunz]

<TextInputMask onChangeText={(text)=> this.setState({price: text}) } value={this.state.price} keyboardType={'numeric'} returnKeyType='done' autoFocus={true} style={{fontSize:45,fontWeight:'bold',marginBottom:15}} ref={'price'} type={'money'} options={{ unit: '€ ', zeroCents:false }} />

[bhrott]

Hi,

This is a limitation from React-Native and not of this library. Here is the sample: First: native TextInput: Second: TextInputMask:

Here is the code:

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
import {TextInputMask} from 'react-native-masked-text';

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      price: ''
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <TextInput 
            style={styles.input} 
            onChangeText={(text)=> this.setState({price: text}) } 
            value={this.state.price} />
        </View>
        <View style={styles.inputContainer}>
          <TextInputMask 
            onChangeText={(text)=> this.setState({price: text}) } 
            value={this.state.price} 
            keyboardType={'numeric'} 
            returnKeyType='done' 
            autoFocus={true} 
            style={styles.input} 
            ref={'price'} 
            type={'money'} 
            options={{ unit: '€ ', zeroCents:false }} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputContainer: {
    width: '90%',
    height: 100
  },
  input: {
    borderWidth: 1,
    borderColor: 'black',
    flex: 1,
    fontSize:45,
    fontWeight:'bold',
    marginBottom:15
  }
});

[juergengunz]

@benhurott nope you're wrong. I just tested it. It happens only if <TextInputMask > is mounted, if you try it with <TextInput> only (delete/unmount the TextInputMask Component) it works.

So, in fact, there must be a problem with this repo

[bhrott]

@juergengunz look at this code: no reference to TextInputMask, only two native TextInput, one with fontWeight, other without:

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      price: ''
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <TextInput 
            style={[styles.input, { fontWeight:'bold' }]} 
            onChangeText={(text)=> this.setState({price: text}) } 
            value={this.state.price} />
        </View>
        <View style={styles.inputContainer}>
          <TextInput 
            style={[styles.input]} 
            onChangeText={(text)=> this.setState({price: text}) } 
            value={this.state.price} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputContainer: {
    width: '90%',
    height: 100
  },
  input: {
    borderWidth: 1,
    borderColor: 'black',
    flex: 1,
    fontSize:45,
    marginBottom:15
  }
});

And here is the result:

The two components are very very very similar. Can you send me a print of your app screen with the two fields filled?

Here is a sample with Arial fontFamily:

input: {
    borderWidth: 1,
    borderColor: 'black',
    flex: 1,
    fontSize:45,
    fontFamily: 'Arial',
    fontWeight:'bold',
    marginBottom:15
  }