React Native Can't focus in TextInput

Question

class Main extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: '',
            password: '',
        }
        console.log('yes')
        this._handleTextChange = this._handleTextChange.bind(this)
    }

    _handleTextChange(id, text) {
        console.log(text)
        var newState = Object.assign({}, this.state);
        var newState = Object.assign({}, this.state);
        newState[id] = text
        this.setState(newState)
    }

    render() {
        console.log('ass')
        return (
            <View style={MainStyle.justFlexOne}>
                <View style={MainStyle.coverImageWrapper}>
                    <Image source={require('../assets/images/cursive.jpg')} style={MainStyle.coverImage}/>
                </View>
                <View style={MainStyle.mainBackground}>
                    <TouchableHighlight>
                        <Text style={MainStyle.bigFontDefault}>
                            Comma
                        </Text>
                    </TouchableHighlight>
                    <TextInput
                        style={MainStyle.TextInputs}
                        value={this.state.id}
                        editable={true}
                        onChangeText={(text) => {console.log('asdf');this.setState({id:text})}}
                        placeholder='text'
                    />
                </View>
            </View>
        )

    }
}

const MainStyle = StyleSheet.create({
    justFlexOne: {
        flex: 1,
    },
    mainBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
    bigFontDefault: {
        color: '#fafafa',
        fontSize: 60,
        textShadowOffset: {width: 0, height: 1},
        textShadowRadius: 8,
        textShadowColor: 'rgba(21,42,55,0.4)',
        fontFamily: 'Optima-Italic',
        fontWeight: '500',

    },
    coverImageWrapper: {
        position: 'absolute',
        top: 0, left: 0, bottom: 0, right: 0,
    },
    coverImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover',
    },
    textInputs: {
        height: 40,
        width: 200,
        color: '#fcc439',
        backgroundColor: 'rgba(0,0,0,0.4)',
        borderColor: '#fcc439',
    }
})

Problem is, I can't focus into TextInput on iOS Simulator operated by XCode(Version 8.2.1).(it means I can't type some characters in input.) I have done what I can handle (like click, enter etc...) using mac keyboard, trackpad even apple mouse. In despite of Connect hardware Keyboard is turned on.

Also StyleSheet doesn't work on TextInput as well.(it works well on other component.)

How can I fix this problem??

Answer 1

change

style={MainStyle.TextInputs}

to

style={MainStyle.textInputs}