Nsryjdtyk

I have a really simple but styled TextInput, declared as an own component.

It looks like this:

import React from 'react';

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

import styled from 'styled-components'



const StyledInput = styled.TextInput`

    margin-bottom: 16px;

    width: 345px;

    padding-left: 8px;

`;



class Input extends React.Component {

    constructor(props) {

        super(props);

        this.state = { text: '' };

    }



    render() {

        return(

            <StyledInput

                style={{height: 40, borderColor: 'gray', borderWidth: 1}}

                // onChangeText={(text) => this.setState({text})}

                value={this.state.text}

                placeholder={this.props.placeholder}

                secureTextEntry={this.props.isPassword}

            />

        )

    }

}



export default Input

My intention is to include that component in a scene and trigger the onChangeText event whenever the text input has changed. I've tried countless of ways... but with no success of passing the value.

<Input style={{height: 40, borderColor: 'gray', borderWidth: 1}}

    onChangeText={(code) => this.setState({code})}

    label='Aktiveringskods'

    placeholder='Aktiveringskod:'

/>

Using a regular TextInput does work flawless however:

<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}

    onChangeText={(username) => this.setState({username})}

    label='Välj användarnamn'

    placeholder='Användarnamn:'

/>

What am I missing here?

The reason is you hadn't pass onChangeText to TextInput in your custom Input.

render() {

    return(

        <StyledInput

            {...this.props}

            style={{height: 40, borderColor: 'gray', borderWidth: 1}}

            value={this.state.text}

            placeholder={this.props.placeholder}

            secureTextEntry={this.props.isPassword}

        />

    )

}