TextInput flickering when format the text #24585

Activity

1. bhrott

   added

   Type: Bug Report

   on Apr 24, 2019
2. react-native-bot

   added

   Component: TextInputRelated to the TextInput component.Related to the TextInput component.

   on Apr 24, 2019
3. thymikee commented on Apr 25, 2019

   

   thymikee

   on Apr 25, 2019

   Contributor

   More actions

   This the same things that happens here #23578 so closing as duplicate.
   Please chime in there and help us fix it.

   👍React with 👍1Reacted by Ben-Hur Santos Ott

   👎React with 👎1Reacted by Timur
4. thymikee

   closed this as completedon Apr 25, 2019
5. react-native-bot

   added

   Bug

   on May 3, 2019
6. jmathew commented on Jul 11, 2019

   

   jmathew

   on Jul 11, 2019

   Last edited by jmathew

   More actions

   @thymikee I don't think it's a duplicate. The other issue specifically says it's not an issue for iOS. This issue happens on iOS for sure.

   More specifically, the other issue is about a corruption of the value that ultimately ends up in state:

   abcd results in AABCAABCD

   In this issue, the state value is ultimately correct however for a brief period the invalid value is shown to the user.

   If I had to guess its because the native code renders the text input regardless and then it's unset after the JS layer code runs. I believe that's what is happening in the componentDidUpdate of TextInput.js here.

   👍React with 👍7Reacted by thecartine, Onyegbule Kizito, Dominic, Edip, Banky Adebajo, Maciej Janawa and David White
7. Donhv commented on Aug 27, 2019

   

   Donhv

   on Aug 27, 2019

   More actions

   I have same issue. I try use onKeyPress & event.preventDefault() but not work.
8. puneetnerd commented on Sep 9, 2019

   

   puneetnerd

   on Sep 9, 2019

   More actions

   I believe that the solution to the problem lies in onChangeText prop
   in my case i had -----> onChangeText={onChange} {...restInput}
   removing {...restInput} did the job.
   All the best dear reader. May you design something great :)
9. edipkavvas commented on Sep 23, 2019

   

   edipkavvas

   on Sep 23, 2019

   Last edited by edipkavvas

   More actions

   I can't understand how that kind of big issue still remains unresolved. Input is the most important component for almost all kind of applications and it is obviously flickering when we try to disallow some characters using regex. Input shouldn't take any action until the state given to value prop changes, so when it is controlled. It should wait the state change but it can't. A very famous library like react-native shouldn't have that kind of big bug

   👍React with 👍11Reacted by pitchourou, Cássio Santos, Banky Adebajo, Buwaneka Sudheera Thisarasinghe, Gökhan Döşlü, Alfredo Delgado, Timur, Derek Knapp, nmatushevskiy, ayou and 1 more
10. BSThisarasinghe commented on Oct 5, 2019

    

    BSThisarasinghe

    on Oct 5, 2019

    Last edited by BSThisarasinghe

    More actions

    Isn't there a solution found yet? I also have this issue. I'll explain how I begin to have this issue. I added stack navigator to my code. After that I customized my code according to it. After that I started to get this issue.

    `class LoginForm extends Component {

    onEmailChange(text) {
        // console.log(text);
        this.props.emailChanged(text);
    }
    
    onPasswordChange(text) {
        this.props.passwordChanged(text);
    }
    
    onLogin() {
        const { email, password, user } = this.props;
    
        this.props.loginUser({ email, password });
    }
    
    UNSAFE_componentWillReceiveProps(nextProps) {
        console.log(nextProps.email);
    }
    
    renderButton() {
        if (this.props.loading) {
            return <Spinner size="large" />;
        }
    
        return (
            <Button onPress={this.onLogin.bind(this)}>
                Login
            </Button>
        );
    }
    
    render() {
        return (
            <Card>
                <CardSection>
                    <Input
                        label="Email"
                        placeholder="[email protected]"
                        onChangeText={this.onEmailChange.bind(this)}
                        value={this.props.email}
                        secureTextEntry={false}
                    />
                </CardSection>
                <CardSection>
                    <Input
                        secureTextEntry={true}
                        label="Password"
                        placeholder="Password"
                        onChangeText={this.onPasswordChange.bind(this)}
                        value={this.props.password}
                    />
                </CardSection>
                <Text style={styles.errorTextStyle}>
                    {this.props.error}
                </Text>
                <CardSection>
                    {this.renderButton()}
                </CardSection>
            </Card>
        );
    }
    

    }

    const styles = {
    errorTextStyle: {
    fontSize: 20,
    alignSelf: 'center',
    color: 'red'
    }
    }

    const mapStateToProps = state => {
    return {
    email: state.auth.email,
    password: state.auth.password,
    error: state.auth.error,
    loading: state.auth.loading,
    user: state.auth.user
    }
    }

    export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(LoginForm);`

    Here is my code which has the text inputs. So I added it to my App.js file like below.

    `class App extends Component {

    render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <LoginForm />
      </Provider>
    );
    

    }
    }

    export default App;`

    My text inputs were fine until this moment. After that I added stack and drawer navigators by creating another file.

    `const SecondNavigator = createDrawerNavigator({
    Profile: {
    screen: TaskList,
    navigationOptions: ({ navigation }) => ({
    title: 'Your Schedule'
    })
    }
    }, {
    // drawerType: 'slide',
    });

    const MainNavigator = createStackNavigator({
    // Open: { screen: OpenWindow },
    Home: {
    screen: LoginForm,
    navigationOptions: ({ navigation }) => ({
    title: 'Sign In',
    headerStyle: { backgroundColor: '#0680EC', height: 45 },
    headerLeft: null,
    headerRight: null
    })
    },
    Profile: {
    screen: SecondNavigator,
    navigationOptions: ({ navigation }) => ({
    title: 'Your Schedule',
    headerStyle: { backgroundColor: '#0680EC', height: 45 },
    headerLeft: ,
    headerRight:
    })
    }
    });

    const Router = createAppContainer(MainNavigator);

    const mapStateToProps = state => {
    return {
    email: state.auth.email,
    password: state.auth.password,
    error: state.auth.error,
    loading: state.auth.loading,
    user: state.auth.user
    }
    }

    export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser, logOutUser })(Router);`

    Then I added this file to the App.js since login form is already imported in this file.

    `class App extends Component {

    render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
    

    }
    }

    export default App;`

    This is when I started to have this issue. Navigation was fine. Every other operation works fine. But text input is Flickering.

    If anyone has an idea of how to solve it, please advise.
11. timostuebing commented on Oct 9, 2019

    

    timostuebing

    on Oct 9, 2019

    More actions

    I also have this issue und would love it to be solved or at least learn about a workaround! Cheers
12. lgenzelis commented on Oct 30, 2019

    

    lgenzelis

    on Oct 30, 2019

    Last edited by lgenzelis

    More actions

    I think I found an answer to this issue, and almost due to sheer luck, I must say. The answer is short: NEVER use value to render the value of TextInput. Use defaultValue instead. Tada! That solved my flickering problem! =D

    In the example posted by OP, render function should have been:

    render() {
        return (
          <View style={styles.container}>
            <TextInput
              defaultValue={this.state.text}  // -> Here! This is all we need to modify.
              onChangeText={text => {
                
                text = text.replace(/[0-9]/g, '')
    
                this.setState({
                  text
                })
              }}
              style={styles.input}
            />
          </View>
        );
      }
    

    👍React with 👍2Reacted by Marko Elez and Stephen Crowe

    👎React with 👎6Reacted by Bixente, agrawalsurabhi89, Earl Austin Avila Zuniga, Timur, Derek Knapp and Joel Rorseth
13. dwxw commented on Nov 20, 2019

    

    dwxw

    on Nov 20, 2019

    Last edited by dwxw

    More actions

    The flickering when trying to prevent certain characters from being inputted is still a problem for me on 0.61.4. I tried @lgenzelis idea, but that doesn't work, my regex code is ignored. I get this on both iOS and Android. Could this ticket be reopened?

    import React, {useState} from 'react';
    import {
      TextInput,
      NativeSyntheticEvent,
      TextInputChangeEventData,
    } from 'react-native';
    
    const NUMBERS_ONLY_REGEX = RegExp(/^(\d*(\.\d{0,2})?)?$/);
    
    const MyTextInput: React.FC = props => {
      const [value, setValue] = useState();
    
      const onChangeHandler = (
        e: NativeSyntheticEvent<TextInputChangeEventData>,
      ) => {
        const text = e.nativeEvent.text;
        if (!isValidInput(text)) {
          e.preventDefault();
        } else {
          setValue(text);
        }
      };
    
      return (
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChange={onChangeHandler}
          value={value}
        />
      );
    };
    
    const isValidInput = (input: string): boolean =>
      NUMBERS_ONLY_REGEX.test(input.replace(/,/g, ''));
    
    export default MyTextInput;
    

    👍React with 👍2Reacted by Joe Redridge and Derek Knapp
14. timurridjanovic commented on Feb 17, 2020

    

    timurridjanovic

    on Feb 17, 2020 · Hidden as spam

    show commentMore actions
15. timurridjanovic commented on Feb 18, 2020

    

    timurridjanovic

    on Feb 18, 2020

    More actions

    @thymikee Can you please reopen this issue? It's not the same issue as the one you referenced. This bug is a flickering that happens when you try to prevent a character from being displayed in the input onChangeText. The other issue is some android only bug with formatting of uppercase/lowercase letters..
16. thymikee commented on Feb 18, 2020

    

    thymikee

    on Feb 18, 2020

    Contributor

    More actions

    @timurridjanovic the original issue is about flickering when formatting the text, there's no preventing default in the OP. Feel free to create a new issue with a detailed reproduction.
17. react

    locked as resolved and limited conversation to collaborators on Apr 25, 2020
18. react-native-bot

    added

    Resolution: LockedThis issue was locked by the bot.This issue was locked by the bot.

    on Apr 25, 2020