react-native
react-native copied to clipboard
facebook
TextInput and dropdown are not showing in the app in iOS . Does not throw any error as well.
Description
The simple textinput is not visible on my login screen. I have ensured to give it proper height, width etc. any help would be greatly appreciated.
Version
0.69.1
Output of npx react-native info
info Fetching system and libraries information... System: OS: Windows 10 10.0.19043 CPU: (4) x64 Intel(R) Core(TM) i5-7300U CPU @ 2.60GHz Memory: 8.87 GB / 15.88 GB Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 2021.1.0.0 AI-211.7628.21.2111.8193401 Visual Studio: Not Found Languages: Java: 11.0.14.1 npmPackages: @react-native-community/cli: ^8.0.3 => 8.0.3 react: 18.0.0 => 18.0.0 react-native: 0.69.1 => 0.69.1 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
Just a simple textinput is not visible. <KeyboardAwareScrollView contentContainerStyle={[boxStyle.scrollViewCenter, { flexDirection: "column"/* ,justifyContent: 'space-between' / , }, ]} keyboardShouldPersistTaps="always" > <View style={[boxStyle.centerBox/ , colorStyle.whiteBackground */, {height: "100%",flex: 1}]}>
<View style = {{flex: 1}}>
<View style = {{flex: 2,/* backgroundColor: "pink", */alignItems: "center", justifyContent: "space-around"}}>
<Image
style={[ { width: "60%",
height:'80%',
resizeMode: "contain",
}]}
source={require("./../Assets/images/BRHlogoexpanded.png")}
/>
</View>
<View style = {{flex: 4, /* backgroundColor: "yellow", */ justifyContent: "center"}}>
<Image
style={[ { width: "100%",
height:'100%',
resizeMode: "contain",
}]}
source={require("./../Assets/images/signinPageDoll.png")}
/>
</View>
</View>
<View style={[formStyle.formMargin, ]}>
<View style = {{flex: 1}}>
<Text
style={[
fontStyle.bold,
fontStyle.sizeExtraLarge,
colorStyle.blackColor,
]}
>
Hello!
</Text>
</View>
</View>
<View height = {60} /* style={formStyle.formMargin} */>
<Text>hi</Text>
<TextInput
//keyboardType="email-address"
placeholder="Username"
//placeholderTextColor = {color.darkgrayColor.color}
//selectionColor={color.myOrangeColor.color}
//style = {[ renderItem.inputBox]}
/* ref={(input) => {
this.emailRef = input;
}} */
value={this.state.email}
//returnKeyType={"next"}
/* onSubmitEditing={() => {
this.pwdRef.focus();
}} */
onChangeText={(val) => {
this.setState({
email: val
})
}}
/>
</View>
<View height = {60}>
<TextInput
placeholder={"Password"}
placeholderTextColor = {color.darkgrayColor.color}
selectionColor={color.myOrangeColor.color}
style = {[ renderItem.inputBox]}
value={this.state.password}
ref={(input) => {
this.pwdRef = input;
}}
returnKeyType={'done'}
onChangeText={(val) => this.updateInputVal(val, "password")}
secureTextEntry={!this.state.showHidePwd}
onSubmitEditing={() => {
;
}}
/>
<Icon
name={this.state.pwdEye}
style={[formStyle.formIcon, ]}
type="font-awesome"
color="orange"
size = {20}
onPress={() => {
this.showOrHidePassword();
}}
/>
</View>
</View>
</KeyboardAwareScrollView>
Snack, code example, screenshot, or link to a repository
<KeyboardAwareScrollView contentContainerStyle={[boxStyle.scrollViewCenter, { flexDirection: "column"/* ,justifyContent: 'space-between' / , }, ]} keyboardShouldPersistTaps="always" > <View style={[boxStyle.centerBox/ , colorStyle.whiteBackground */, {height: "100%",flex: 1}]}>
<View style = {{flex: 1}}>
<View style = {{flex: 2,/* backgroundColor: "pink", */alignItems: "center", justifyContent: "space-around"}}>
<Image
style={[ { width: "60%",
height:'80%',
resizeMode: "contain",
}]}
source={require("./../Assets/images/BRHlogoexpanded.png")}
/>
</View>
<View style = {{flex: 4, /* backgroundColor: "yellow", */ justifyContent: "center"}}>
<Image
style={[ { width: "100%",
height:'100%',
resizeMode: "contain",
}]}
source={require("./../Assets/images/signinPageDoll.png")}
/>
</View>
</View>
<View style={[formStyle.formMargin, ]}>
<View style = {{flex: 1}}>
<Text
style={[
fontStyle.bold,
fontStyle.sizeExtraLarge,
colorStyle.blackColor,
]}
>
Hello!
</Text>
</View>
</View>
<View height = {60} /* style={formStyle.formMargin} */>
<Text>hi</Text>
<TextInput
//keyboardType="email-address"
placeholder="Username"
//placeholderTextColor = {color.darkgrayColor.color}
//selectionColor={color.myOrangeColor.color}
//style = {[ renderItem.inputBox]}
/* ref={(input) => {
this.emailRef = input;
}} */
value={this.state.email}
//returnKeyType={"next"}
/* onSubmitEditing={() => {
this.pwdRef.focus();
}} */
onChangeText={(val) => {
this.setState({
email: val
})
}}
/>
</View>
<View height = {60}>
<TextInput
placeholder={"Password"}
placeholderTextColor = {color.darkgrayColor.color}
selectionColor={color.myOrangeColor.color}
style = {[ renderItem.inputBox]}
value={this.state.password}
ref={(input) => {
this.pwdRef = input;
}}
returnKeyType={'done'}
onChangeText={(val) => this.updateInputVal(val, "password")}
secureTextEntry={!this.state.showHidePwd}
onSubmitEditing={() => {
;
}}
/>
<Icon
name={this.state.pwdEye}
style={[formStyle.formIcon, ]}
type="font-awesome"
color="orange"
size = {20}
onPress={() => {
this.showOrHidePassword();
}}
/>
</View>
</View>
</KeyboardAwareScrollView>
Update: The issue is resolved in windows for android after I reinstall the node , npm and anroid studio. But the issue persists in mac for iOS.
Hello @saisheelap , recently i have a same problem, when I make a project, the TextInput's not showing in my device (Iphone XR), but my friends that has a android device not have this problem:
https://user-images.githubusercontent.com/56566628/186922114-565ab0a2-717e-4911-b193-76927a20fd25.jpeg
Can u see? in the TextInputs have a Placeholder text and it is virtualyy invisible.
Maybe TextInputs having a problem with IOS devices
what u think about this
can u assignee to me?
