Geek Answers Handbook

React Native: TextInput disappears when typed in View

I am currently studying React Native with a book that explains how to create an application to work. However, I cannot continue due to this error / error. This happens on iOS, but I'm not sure if this also happens on Android, since I did not set my Android emulator to just stream.

My container <View>has two <TextInputs>working fine. When I transfer both inputs to the views, they simply “disappear”.

Here is my NoteScreen.js component:

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 strange things;

  • Both of my entrances are width and height
  • Inputs also disappear if they do not have any styles applied to them.
  • This only happens with text inputs, just plain text.

, , , - .

+4
3

( Android), , , . , styles.title styles.body TextInput → styles.title styles.body, () . , , :

  • width

  • textInput title/body : style={[styles.textInput, styles.title]} style={[styles.textInput, styles.body]}

, :

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
    }

});
+3

, , .

, alignItems: 'center' flex: 1 inputContainer. - , .

:

import React, { StyleSheet, Text, TextInput, View } from "react-native";
import dismissKeyboard from "dismissKeyboard";

export default class NoteScreen extends React.Component {

    render() {
        handleTitleEditingEnd = (text) => { this.refs.body.focus(); };

        return (
            <View style={styles.container}>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="title"
                        placeholder="Untitled"
                        style={[styles.textInput, styles.title]}
                        onEndEditing={handleTitleEditingEnd}
                        returnKeyType="next"
                    />
                </View>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="body"
                        multiline={true}
                        placeholder="Start typing"
                        style={[styles.textInput, styles.body]}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        // alignItems: "center",
        marginTop: 64
    },
    inputContainer: {
        borderBottomColor: "#9E7CE3",
        borderBottomWidth: 1,
        flexDirection: "row",
        marginBottom: 10,
        flex: 1,
    },
    textInput: {
        flex: 1,
        fontSize: 16,
    }, 
    title: {
        height: 40,
    },
    body: {
        flex: 1,
    }
});
0

I solved it with the code below:

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

export default class NoteScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
            <TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, 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]}/>
        </View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 64
  },
  title: {
    height: 40
  },
  body: {
    height: 160,
    flex: 1
  },
  inputContainer: {
    borderBottomColor: '#9E7CE3',
    borderBottomWidth: 1,
    flexDirection: 'row',
    marginBottom: 10
  },
  textInput: {
    flex: 1,
    fontSize: 16,
    width: 300,
  }
});
0
source

More articles:


All Articles