question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

secureTextEntry changes font size in input with stackedLabel

See original GitHub issue

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node v10.16.0 react-native v0.60.5 react v16.8.6 native-base v2.13.7

android 7.1.2

Expected behaviour

The text in a normal input should have the same font size as the text in an input with secureText={true}

Actual behaviour

The text in a normal input has a larger font size as the text in an input with secureText={true}

Steps to reproduce

EDIT: I just noticed this only happens with stackedLabel, with all other labels the font sizes are the same.

Add a normal input and one input with secureTextEntry={true}, both with stackedLabel

import { Container, Content, Footer, Form, Input, Item, Label } from 'native-base';
import React from 'react';

export interface Props {}

export default class App extends React.PureComponent<Props> {
    public constructor(props: Props) {
        super(props);
    }

    public render() {
        return (
            <Container>
                <Content>
                    <Form>
                        <Item stackedLabel={true}>
                            <Label>Username</Label>
                            <Input />
                        </Item>

                        <Item stackedLabel={true}>
                            <Label>Password</Label>
                            <Input secureTextEntry={true} />
                        </Item>
                    </Form>
                </Content>
                <Footer />
            </Container>
        );
    }
}

Screenshot_20190909-100657

Is the bug present in both iOS and Android or in any one of them?

I’m only developing for android right now, so I could not try to reproduce the issue for iOS, sorry.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
Nikos410commented, Sep 10, 2019

@sankhadeeproy007 The TextInputs also seem to be affected by which label I’m using.

  • inlineLabel / placeholderLabel: Both inputs have small font size, text is aligned left, secureTextEntry works (dots shown)
  • floatingLabel: Both inputs have large font size, text is aligned left, secureTextEntry does not work (Text is visible)
  • stackedLabel: Both inputs have small font size, text is centered, secureTextEntry works
0reactions
Nikos410commented, Sep 12, 2019

Just tried the new version, works. Thanks for the quick fix ❤️

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native - unable to change font when secureTextEntry is ...
trying to create an input field for a password. This custom component works great, but when I add the secureTextEntry={true} the font changes...
Read more >
Controlled TextInput with secureTextEntry={true} font size flicker.
Voters | React Native. Controlled TextInput with secureTextEntry={true} font size flicker.
Read more >
font-size-adjust - CSS: Cascading Style Sheets | MDN
The font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of ...
Read more >
CSS font-size-adjust property - W3Schools
This could result in a big change for the font size. To prevent this, use the font-size-adjust property. All fonts have an "aspect...
Read more >
Change font sizes within the Fonts window on Mac
In many apps on your Mac, add or remove font sizes and change the maximum and minimum values that appear in the Fonts...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found