Text box cover when keyboard open ios system in react native,but working fine in android part.
You can either use:
KeyboardAvoidingView : https://facebook.github.io/react-native/docs/keyboardavoidingview
<KeyboardAvoidingView
style={{flex: 1}}
behavior={'padding'}
keyboardVerticalOffset={65}>
<FlatList .../>
<TextInput ... />
</KeyboardAvoidingView>
or for Android:
Adjust keyboard using android:windowSoftInputMode="adjustPan" settings in your AndroidManifest.xml :
<application
...
>
<activity
android:name=".MainActivity"
android:label="#string/app_name"
...
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustPan"
...
android:authorities="${applicationId}">
</activity>
</application>
refer: How do not move view when keyboard shows in React Native?
Related
I'm currently trying to set a full background image on my login view. I want to be able to fill my Background image on the whole screen for the iPhone 11. I've read a bit about safeAreaView and SafeAreaViewInset but not sure how I can implement that in my current case.
I've used the following code to do so but noticed that iPhone 11 has like a white bar at the bottom and top of the phone. Is this something that can't be overlapped since it's like the navigation?
How app currently looks
return <SafeAreaView style={styles.container}><Background source={require('../../assets/images/background-cover.jpg')}>
<CoverLogo width={100} height={100} color={Colors.White} />
<Introduction loop={false}>
<TextHeading text={`#test`} />
<TextPage text={`Btest2`} />
<TextPage text={`Ttest3`} />
<TextPage text={`test4 Sign up !`} />
</Background>
</SafeAreaView>
The fixed header is scrolling after keyboard is open on iOS device. Is there any possibility to have fixed header after keyboard is open? I do not want to have header scrolling with the content.
Here is explained similar problem:
https://medium.com/#im_rahul/safari-and-position-fixed-978122be5f29
I am facing the problem in the React project using Cordova.
Thank you very much for your help.
use keyboardAvoidingView from 'react-native'
docs
import {
KeyboardAvoidingView
} from 'react-native';
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
returnKeyType="next"
placeholder="Mobile No."
placeholderTextColor="powderblue"
keyboardType="number-pad"
onSubmitEditing={() => this.passwordInput.focus()}
style={styles.input}
onChangeText={(value) => this.setState({mobileno:value})}
value={this.state.mobileno}
/>
<TextInput
returnKeyType="go"
placeholder="Password"
placeholderTextColor="powderblue"
style={styles.input}
secureTextEntry
ref={input => (this.passwordInput = input)}
onChangeText={(value) => this.setState({pssd:value})}
value={this.state.pssd}
/>
</View>
</KeyboardAvoidingView>
If you are hiding status bar the KeyboardAvoiding will push everything including the header to top, it’s a bug of KeyboardAvoidingView in react native.
To make your header fixed while keyboard is shown, make your statusbar hidden=false
I have the following two EditTexts:
When I click on either of the two, it appears a Dialog with a list of products and a filter above them in this way:
The problem is that when I tap on the filter, the keyboard is hiding part of the products. My question is how to make the Dialog adjust to the keyboard so all its content can be seen. I tried with:
filterListDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);
But it's only working on Android 4 OS and not on Android 7 OS, and I'd like it to work on both operating systems.
Do you add the windowSoftInputMode property to adjustNothing in the AndroidManifest.xml of the activities that use the dialog fragment like following code.
<application android:allowBackup="true" android:icon="#mipmap/ic_launcher" android:label="#string/app_name" android:roundIcon="#mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="#style/AppTheme">
<activity
android:windowSoftInputMode="adjustNothing"
android:name=".MainActivity" />
</application>
Before show the CustomDialog ,you should set the customDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);
CustomDialog customDialog = new CustomDialog(this);
customDialog.Window.SetSoftInputMode(SoftInput.AdjustResize);
customDialog.Show();
There is running GIF.
The following is a demo.
https://github.com/851265601/CustomDialog-
I am trying to use the element in React Native. It works fine on Android but is not displaying on iOS.
<Picker selectedValue={'java'} >
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
You need to set a height and a width to your picker element
<Picker selectedValue={'java'} style={{height: 100, width: 100}}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
Btw, the picker wont appear like the keyboard could.
To display on iOS I needed to add a <Text> element with a title for the <Picker> and place both inside a <View> element
e.g.
<View>
<Text>Select Language</Text>
<Picker selectedValue={'java'} >
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
I also noticed adding the alignItems: 'center' style to the element caused it to not display.
It's because of the style #react-native-picker/picker support two different style
#platform android => it has the style props
#platforn ios => for ios itemStyle
I am creating a mobile application with Ionic framework , When i test it with iOS device my status bar turn into white color after the application is fully loaded. I need to change the color from white to black. It works fine with Android Device.
This is the issue
I tried the following methods and nothing works
I made change to my config.xml file which was mentioned in many website as following
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
I further added the statusbar native event handlers under my app.component.ts
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
statusBar.backgroundColorByHexString('#000000');
statusBar.show();
splashScreen.hide();
});
is there a better solution to solve this issue.
The HTML of this project
app.html
<ion-nav [root]="rootPage"></ion-nav>