React Native: TextInput disappears when put into View

Question

Currently I'm learning React Native with the help of a book in which is explained how to build a to do app. However I can't continue because of this error/bug. This is happening in IOS, not sure if this also happens on Android as I haven't set up my Android emulator just jet.

My <View> container has two <TextInputs>, working fine. When I wrap both inputs into views, they simply 'disappear'.

Here is my component NoteScreen.js:

import React, {
    Component,
    StyleSheet,
    TextInput,
    View
} from 'react-native';

export default class NoteScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.inputContainer}>
                    <TextInput 
                        ref="title" 
                        autoFocus={true} 
                               autoCapitalize="sentences"
            placeholder="Untitled"
            style={styles.title}

            onEndEditing={(text) => {this.refs.body.focus()}}
          />
        </View>
        <View style={styles.inputContainer}>
          <TextInput
            ref="body"
            multiline={true}
            placeholder="Start typing"
            style={styles.body}

            textAlignVertical="top"
            underlineColorAndroid="transparent"
          />
        </View>
        </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 64
    },
    textInput: {
        color: '#ffffff',
        flex: 1,
        width: 60,
        height: 60,
        fontSize: 16
    },
    inputContainer: {
        borderBottomColor: '#9E7CE3',
        borderBottomWidth: 1,
        flex: 1,
        flexDirection: 'row',
        marginBottom: 10
    },
    title: {
        fontFamily: 'Overpass-Bold',
        height: 40
    },
    body: {
        fontFamily: 'Overpass-Bold',
        flex: 1
    }
});

I did some research and noticed some weird things;

• Both of my inputs have a width and a height
• The inputs vanish also if they don't have any styles applied to them
• This only happens with text inputs, normal text just renders.

Some insight would be great, I'm thinking this is a bug, or I am just overlooking something..

Answer 1

I tried your example (on android), and with exact code you provided, screen is completely empty. Without styles on text input, they are not showing, and you've set styles.title and styles.body to your TextInput components -> in styles.title and styles.body you don't have (both) width and height. So what you can do is:

• Add width to your title and body styles

or

• Add styles to text input in array and apply both styles for textInput and for title/body like this: style={[styles.textInput, styles.title]} and style={[styles.textInput, styles.body]}

Here is working code for both suggestions i gave you:

import React, {
AppRegistry,
    Component,
    StyleSheet,
    TextInput,
    View
} from 'react-native';

export default class NoteScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="title"
                        autoFocus={true}
                        autoCapitalize="sentences"
                        placeholder="Untitled"
                        style={styles.title}

                        onEndEditing={(text) => {this.refs.body.focus()}}
                    />
                </View>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="body"
                        multiline={true}
                        placeholder="Start typing"
                        style={[styles.textInput, styles.body]}

                        textAlignVertical="top"
                        underlineColorAndroid="transparent"
                    />
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 64
    },
    textInput: {
        color: '#ffffff',
        flex: 1,
        width: 60,
        height: 60,
        fontSize: 16
    },
    inputContainer: {
        borderBottomColor: '#9E7CE3',
        borderBottomWidth: 1,
        flex: 1,
        flexDirection: 'row',
        marginBottom: 10
    },
    title: {
        fontFamily: 'Overpass-Bold',
        height: 40,
        width: 40
    },
    body: {
        fontFamily: 'Overpass-Bold',
        flex: 1
    }

});