Pass value from custom TextInput

Question

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?

Answer 1

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}
        />
    )
}