I used KeyboardAvoidingView from 'react-native'. Once I focus on input field, the keyboard is still overlay the input. Below is my code
<KeyboardAvoidingView keyboardVerticalOffset = {0} style = {{ flex: 1 }} behavior = "padding" >
<ScrollView>
<View style={styles.formGroup}>
<Text style={styles.labelGroup}>{Question.howToReachJobVacancy }</Text>
<Field
component={CustomTextInput}
multiline={true}
numberOfLines={2}
placeholder='ចុចទីនេះដើម្បីសរសេរចម្លើយ'
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
Here is my CustomTextInput.
<TextField {...inputProps}
value={input.value}
onChangeText={ input.onChange }
onBlur={input.onBlur}
onFocus={input.onFocus}
multiline={true}
labelHeight={0}}/>
I would like to fix iOS keyboard popup over the input field.
Please try with below code
<KeyboardAvoidingView behavior={(Platform.OS === 'ios' ? 'padding' : null)} style={{ flex: 0 }}>
<ScrollView>
<View style={styles.formGroup}>
<Text style={styles.labelGroup}>{Question.howToReachJobVacancy }</Text>
<Field
component={CustomTextInput}
multiline={true}
numberOfLines={2}
placeholder='ចុចទីនេះដើម្បីសរសេរចម្លើយ'
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
Related
I get white screen at the top part of my iOS react native app. I have SafeAreaView as a container housing my code. On some screens the white space is just at the top, some others, just bottom; while some top and bottom. Below is an image:
Below is what my code looks like:
<SafeAreaView style={styles.container}>
<ImageBackground source={backgroundImg} style={styles.image}>
{/* arrow section */}
<TouchableOpacity
style={styles.firstLevelContainer}
onPress={() => navigation.goBack()}>
<Image source={backIcons} style={styles.backIconsStyle}></Image>
</TouchableOpacity>
{/* text Section */}
<View style={styles.secondLevelContainer}>
<CustomText
color={colors.white}
size={30}
capitalize={'none'}
fontType={fonts.nunitoBold}>
{CapitalizeFirstLetter('Create\nan account')}
</CustomText>
</View>
<View style={styles.thirdLevelContainer}>
<ScrollView
style={styles.scrollviewContainer}>
{Formikform()}
</ScrollView>
</View>
<View style={styles.fourthLevelContainer}>
<CustomText
color={colors.white}
size={12}
style={{marginLeft: 10}}
capitalize={'none'}
fontType={fonts.nunitoLight}>
or sign in with
</CustomText>
<View style={styles.displayRow}>
<Image
source={facebookLogo}
style={styles.socialLoginIconSize}></Image>
<Image
source={googleLogo}
style={styles.socialLoginIconSize}></Image>
</View>
</View>
</ImageBackground>
</SafeAreaView>
StyleSheet
container: {
flex: 1,
flexDirection: 'column',
top: 0,
},
formContainer: {
display: 'flex',
marginBottom:hp(20),
marginLeft:hp(5)
},
image: {
flex: 1,
resizeMode: 'cover',
},
That's exactly how SafeAreaView works. If you want your image to cover all of the screen I'd suggest the following UI Hierarchy:
<ImageBackground>
<SafeAreaView>
// your content goes here
</SafeAreaView>
</ImageBackground>
Checkout this snack for more details
Based on this excellent question and answer, I tried to implement autofill function in my app. While the username and password sections can be auto-filled (i.e, Above the keyboard, there is a password button, and once I press the button, Face ID is activated, and I can select an option), but it does not ask when I typed a username and password and pressed the sign in button.
Any suggestion is very appreciated!
import { useForm } from 'react-hook-form';
// Just in case
// "#react-navigation/bottom-tabs": "^5.4.2",
// "#react-navigation/native": "^5.2.6",
// "#react-navigation/stack": "^5.3.1",
...
export default function screen({navigation, route}) {
useEffect(()=> {
register("email");
register("password")
return () => {
console.log("Unmounted");
}
}, [register]);
...
return (
...
<View
style={[
styles.container,
styles.emailSection,
styles.paddingHorizontal,
]}>
<View style={styles.textInputContainer}>
<TextInput
onChangeText={text => {
setValue('email', text);
}}
placeholder={'Email'}
placeholderTextColor="grey"
keyboardType="email-address"
autoCapitalize={'none'}
autoCorrect={false}
textContentType={'username'}
style={styles.textInputFont}
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
onChangeText={text => {
setValue('password', text);
}}
placeholder={'Password'}
placeholderTextColor="grey"
keyboardType="default"
autoCapitalize={'none'}
autoCorrect={false}
secureTextEntry={true}
textContentType={'password'}
style={styles.textInputFont}
/>
</View>
<View>
<TouchableOpacity
onPress={
isEmailLoading ? null : handleSubmit(_onPressEmailSignIn)
}>
<View style={[styles.wideButtonContainer]}>
<Text style={styles.secondaryFont}>Sign In</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.textContainer}>
<TouchableOpacity
onPress={() => navigation.navigate('ForgotPassword')}>
<View>
<Text style={styles.secondaryFont}>Forgot Password</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate('EmailSignUp')}>
<View>
<Text style={styles.secondaryFont}>Sign Up</Text>
</View>
</TouchableOpacity>
</View>
</View>
...
)
- Tried on simulator (iPhone Xs (12.0) and my device (iPhone Xr (13.0))
Having an issue inside a ListView that uses sticky headers. When I scroll down while the refresh is still occurring, my sticky header is shifted down roughly equal to the height of the refresh control.
Any idea what's causing this?
Here is the code for my ListView and the refreshControl:
<View style={{backgroundColor: Colors.stickyHeaderGray, height: SCREEN_HEIGHT-20}}>
<ListView
ref='list'
style={this.container}
dataSource={this.state.ds}
initialListSize={12}
scrollRenderAheadDistance={0}
onEndReached={() => this.setState({ hideLoadingFooter: true })}
onEndReachedThreshold={10}
pageSize={10}
renderRow={(data) => <FeedItem {...data} navigator={this.props.navigator} />}
renderSeparator={this._renderSeparator}
renderSectionHeader={(sectionData, sectionID) =>
<View style={{backgroundColor: Colors.stickyHeaderGray, opacity: 0.96}}>
<TouchableHighlight
onPress={() => this.refs.list.scrollTo({x:0,y:0,animated:true})}
underlayColor={Colors.stickyHeaderGray}>
<View>
<Heading1 style={styles.headers}>{sectionID}
</Heading1>
</View>
</TouchableHighlight>
</View>
}
renderFooter={() =>
this.state.hideLoadingFooter ? null : <View style={styles.footer}><Heading1>Loading </Heading1><Spinner type={'ThreeBounce'} size={40} color={Colors.wabashRed} isVisible={true} /></View>
}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
tintColor={Colors.charcoal}
/>
}
/>
</View>
I am having a strange problem. I wrote up a simple player app with react native and everything is fine in simulator. But when it comes to real device, its play button does not work properly. I tried the app on iPhone 6s and iPhone 5. The problem is that the play button works at second tap. The first tap does nothing.
Here is my whole render code:
render() {
let playIcon = this.state.isPlaying ? 'pause' : 'play';
let titleA = 'Set A: ' + (this.state.isASet ? this._toTime(this.state.pointA) : '-');
let titleB = 'Set B: ' + (this.state.isBSet ? this._toTime(this.state.pointB) : '-');
let time = this._toTime(this.state.time);
let remaining = this._toTime(this.state.duration - this.state.time);
return (
<View style={styles.container}>
<View style={styles.info}>
<Text>Name: {this.props.song.name}</Text>
<Text>Artist: {this.props.song.artist.name}</Text>
<Text># of channels: {this.props.song.tracks.length}</Text>
</View>
<View style={styles.channels}>
{
this.props.song.tracks.map((track, index) => {
return (
<VolumeSlider
key={index}
title={track.name}
volume={this.state.channelVolumes[index]}
onVolumeChange={this._handleChannelVolumeChange.bind(this, index)}
onMutePress={this._handleChannelMutePress.bind(this, index)}
onSoloPress={this._handleChannelSoloPress.bind(this, index)}
isPlayingSolo={this.state.channelSolos[index]}
/>
);
})
}
<VolumeSlider
title='Main'
volume={this.state.mainVolume}
onVolumeChange={this._handleMainVolumeChange.bind(this)}
onMutePress={this._handleMainMutePress.bind(this)}
hideSolo={true}
/>
</View>
<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<TouchableHighlight style={styles.button} onPress={this._handleAPress.bind(this)}>
<Text numberOfLines={1}>{titleA}</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this._handleBPress.bind(this)}>
<Text numberOfLines={1}>{titleB}</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.button}
onPress={this._handleClearLoopPress.bind(this)}
>
<Text numberOfLines={1}>Clear</Text>
</TouchableHighlight>
</View>
<View style={styles.player}>
<TouchableHighlight onPress={this._handlePlayPress.bind(this)}>
<Icon
name={playIcon}
style={styles.playButton}
/>
</TouchableHighlight>
<View style={styles.center}>
<Text style={styles.timelineText}>{time}</Text>
</View>
<View style={styles.sliderContainer}>
<Slider
style={[styles.slider, styles.timelineSlider]}
onSlidingComplete={this._handleTimelineChange.bind(this)}
maximumValue={this.state.duration}
value={this.state.time}
step={0.01}
/>
</View>
<View style={styles.center}>
<Text style={styles.timelineText}>-{remaining}</Text>
</View>
</View>
</View>
);
}
And this is how it looks like on simulator:
I tried changing the location of the play button (I mean I placed it at the top of the app) and it worked. But I don't understand why it does not work when it is at bottom-left corner?
Thank you for your answers.
I found the problem. The problem is NavigatorIOS which is parent of the PlayerScreen of which render function is given belove. The navigator has swipe back gesture and it blocks the first tap on the play button. When I disabled the swipe back gesture of the navigator by falsing its interactivePopGestureEnabled pro, the play button properly worked.
I am attempting to constrict the webview of youtube urls to only show the video (and not the rest of the youtube page). How do you do this? I have figured out some of the props of the webview but would like to gain a deeper understanding of the following props:
automaticallyAdjustContentInsets bool
contentInset {top: number, left: number, bottom: number, right: number}
Here is what I have so far:
Of course, I don't want to see the youtube search tab - and would like to change the dimensions of the webview to do so. How can this be better done? Here is the code to the custom component of each video 'card':
<TouchableHighlight
style={styles.touchCard}
underlayColor={'transparent'}
onPress={this.props.onPress} >
<View style={styles.card}>
<WebView
scrollEnabled={false}
style={styles.videoPreview}
url={this.props.source}
renderLoading={this.renderLoading}
renderError={this.renderError}
automaticallyAdjustContentInsets={false} />
<View style={[styles.container, this.border('organge')]}>
<View style={[styles.header, this.border('blue')]}>
<Text style={[styles.previewText]}>{this.props.text}</Text>
</View>
<View style={[styles.footer, this.border('white')]}>
<View style={styles.sourceRow}>
<View style={[this.border('white')]}>
<ImageButton
style={[styles.logoBtn, , this.border('red'), styles.row]}
resizeMode={'contain'}
onPress={this.onHeartPress}
source={this.props.src} />
</View>
<View style={[this.border('white')]}>
<Text style={[styles.rowText, {fontWeight: 'bold'}]}>{this.props.entryBrand}</Text>
<Text style={[styles.rowText]}>{this.props.postTime}</Text>
</View>
</View>
<View style={[styles.heartRow, this.border('black')]}>
<KeywordBox
style={[styles.category, this.border('blue')]}
key={this.props.key}
text={this.props.category}
onPress={this.props.categoryPress}
selected={this.props.selected} />
</View>
</View>
</View>
</View>
</TouchableHighlight>