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 ponent 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..
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 ponent 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..
Share Improve this question edited Apr 18, 2016 at 21:31 Tjoeaon asked Apr 18, 2016 at 21:07 TjoeaonTjoeaon 1,5235 gold badges19 silver badges44 bronze badges4 Answers
Reset to default 6I tried your example (on android), and with exact code you provided, screen is pletely empty. Without styles on text input, they are not showing, and you've set styles.title and styles.body to your TextInput ponents -> in styles.title and styles.body you don't have (both) width and height. So what you can do is:
- Add
widthto 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]}andstyle={[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
}
});
I believe we are reading the same book, becausee I had the same problem.
I solved it by removing the alignItems: 'center' in the container style and adding flex: 1 to the inputContainer style. It still doesn't look like the book sample, but at least the fields are now visible.
Here's what my code looks like:
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,
}
});
If your <Text> don't have height in your <View>, try removing flex : 1 from your container.
I solved it with 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,
}
});