I got a problem with KeyboardAvoidingView I have 3 TextInput and when I want to write something on the last one this one is steal hidden by my keyboard.
export default class App extends React.Component {
render() {
return (
<LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
<KeyboardAvoidingView behavior='padding' enabled>
<TextInput placeholder='Hello World'/>
<View style={{height: 200}}/>
<TextInput placeholder='Hello World'/>
<View style={{height: 200}}/>
<TextInput placeholder='Hello World'/>
</KeyboardAvoidingView>
</LinearGradient>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
Use keyboardVerticalOffset so that the textInput won't be hidden behind the keyboard
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={(Platform.OS === 'ios') ? "padding" : null} enabled
keyboardVerticalOffset={Platform.select({ios: 80, android: 500})}>
And to anyone who is having trouble with a position:'absolute' View
keep being pushed by the keyboard, put the View inside
KeyboardAvoidingView
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={(Platform.OS === 'ios') ? "padding" : null} enabled>
//content here
<Button title="Login" style={{position:'absolute', bottom:20}}/>
</KeyboardAvoidingView>
I am using react-native-keyboard-aware-scroll-view.
This will probably work:
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
<KeyboardAwareScrollView enableOnAndroid extraScrollHeight={pixels[50]}>
<LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
<TextInput placeholder='Hello World'/>
<View style={{height: 200}}/>
<TextInput placeholder='Hello World'/>
<View style={{height: 200}}/>
<TextInput placeholder='Hello World'/>
</LinearGradient>
</KeyboardAwareScrollView>
Usually, on Android, your desired result will be better with no behavior prop given. Whereas on iOS padding may be the right answer. See note on https://facebook.github.io/react-native/docs/keyboardavoidingview#behavior
I usually write something like this:
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
// ...
</KeyboardAvoidingView>
I used #Emma's answer but fixed offsets with keyboardVerticalOffset. I used below one.
<KeyboardAvoidingView
style={styles.keyboardAvoidContainer}
enabled
behavior={"padding"} // you can change that by using Platform
keyboardVerticalOffset={Platform.select({ ios: 60, android: 78 })}
>
I give 60 to VerticalOffset of ios and tested because fully fitted to several of simulators which is contains iPhone X, iPhone 8 and iPhone 6. Then in Android Nexus Emulator, it's fitted with value of 78.
Related
So i am currently making a messaging application and this needs to be able to live messages, I am using a flat list to display these items and everytime i append an item to the messageFetch it takes ages for the flat list to load, (at any time there could be 100's to 1000's of items in the list). How can I speed this up? Also the components are of diffrent sizes.
flatlist component:
<View style={styles.container}>
<View style={styles.topBar} focusable>
<Text style={{ fontFamily: "Roboto-Regular", fontSize: 17, color: "white" }}>{name}</Text>
</View>
<View style={styles.mainChat} focusable>
<View style={[styles.loading, { display: loadedFinished ? "none" : "flex" }]}>
<ActivityIndicator style={[styles.loading, { display: loadedFinished ? "none" : "flex" }]} />
</View>
<FlatList
inverted
ref={list}
data={messageFetch.reverse()}
renderItem={Message}
keyExtractor={(item) => item.index}
/>
</View>
</View>
loadedFinished only runs once and stops at about 3 seconds.
Message Component:
function Message({ item }) {
if (item.embed.type != undefined) {
return <Text>hello<Text>
}
return (
<View style={[mesgStyles.mainMessage, { flexDirection: item.original ? "row-reverse" : "row" }]}>
<Image style={mesgStyles.userPfp} resizeMode="contain" source={{ uri: item.pfp }}></Image>
<View style={mesgStyles.spacer} />
<View style={mesgStyles.messageBody}>
<Text style={mesgStyles.mainText}>{item.text}</Text>
</View>
</View>
);
}
Any help would be greatly appreciated. Thanks
Expected Behavior : In IOS StandAlone app making expo-camera preview not black screen.
Some things to add: I have in app.json the infoPlist the NSCameraUsageDescription-
I ask the user to allow the use of camera, when this pops the screen is blank and when he accepts the preview remains black
When testing this on Dev ( expo app ) it works perfectly
When testing on expo build and open the app on expo app it works too
when i eas build and sent do app store connect , in testflight or in standalone app it doesnt work!
expo-camera version : "expo-camera": "~12.2.0",
Example
return (
{previewVisible && capturedImage ? (
) : (
<Camera style={styles.camera}
type={type}
ref={camera}
flashMode={'auto'}
whiteBalance={"sunny"}
>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-end' }} >
<LinearGradient style={[{ padding: 15, elevation: 10, paddingBottom: 25 }]} colors={['transparent', 'black']}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
<TouchableOpacity onPress={voltarEcraAnterior} style={[styles.previewButtons, styles.circle]}>
<Icon name="icon-cross" style={styles.iconButtonsCamera} size={40}></Icon>
</TouchableOpacity>
<TouchableOpacity onPress={takePicture} style={[styles.previewButtons, styles.circle,]}>
<Icon name="icon-scan" style={styles.iconButtonsCamera} size={40}></Icon>
</TouchableOpacity>
</View>
</LinearGradient>
</View>
</Camera>
)
}
</View >
);
Permissions
const __startCamera = async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
}
I am working with a KeyboardAvoidingView and it's working perfectly fine except for one small issue. In the code below I have a TouchableOpacity that when clicked runs the function addName() which appends to an array and creates a new TextInput - basically when you click it, it adds a new TextInput to the ScrollView.
The KeyboardAvoidingView works perfectly fine except every time a new TextInput is added/rendered, I have to scroll down to see it. Do you know how I can make it automatically scroll to the bottom when a new TextInput is rendered?
Here is my code for the KeyboardAvoidingView:
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS == "ios" ? "padding" : "height"}
>
<HeaderComponent
name={this.props.route.params.bill.barName + " Tab"}
navigation={this.props.navigation}
goHome={true}
goHomePrompt={true}
/>
<View
style={{
marginTop: 30,
marginLeft: 10,
}}
>
<Text
style={{ color: "white", fontSize: 18 }}
allowFontScaling={false}
>
Add people to split with...
</Text>
</View>
<ScrollView keyboardShouldPersistTaps={"handled"}>
{this.state.nameInput.map((value, index) => (
<View style={styles.nameContainer} key={index}>
<View
style={{
width: "90%",
}}
>
<TextInput
style={styles.textInputContainer}
value={value}
onChange={this.handleText(index)}
placeholder={"Enter name..."}
placeholderTextColor={"#333333"}
maxLength={50}
/>
</View>
<View
style={{
width: "10%",
}}
>
<TouchableOpacity
onPress={() => this.handleDelete(index)}
>
<Icon name="cancel" type="material" color="red" />
</TouchableOpacity>
</View>
</View>
))}
<TouchableOpacity onPress={() => this.addName()}>
<Text style={styles.addPerson}>+ Add Person</Text>
</TouchableOpacity>
</ScrollView>
<View style={styles.bottomContainer}>
<TouchableOpacity
style={styles.continueButton}
onPress={() => {
// filters through array to make sure there are no empty strings
let nameInput = this.state.nameInput.filter(
(name) => name !== ""
);
if (
nameInput.length > 1 &&
new Set(nameInput).size === nameInput.length
) {
this.setState({ nameInput, loading: false });
} else {
alert(
"Please make sure there are at least two people and no duplicate names!"
);
}
}}
>
<Text style={styles.continueButtonText} allowFontScaling={false}>
Continue to Split Tab
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
And here is my code for the addName() function:
addName = () => {
let nameInput = this.state.nameInput.concat("");
this.setState({
nameInput,
});
};
This page has the solution I was looking for: Is it possible to keep a ScrollView scrolled to the bottom?
I am using RN 0.55.4 + Expo
I tried to use KeyboardAvoidingView to my form but it doesnt change anything with or without KeyboardAvoidingView, its still blocking my form. I am using
tcomb-form
This is my current code
return (
<View style={styles.container}>
<KeyboardAvoidingView>
<ScrollView>
<View>
<Header/>
<View style={styles.inputs}>
<LoginForm
formType={formType}
form={this.props.auth.form}
value={this.state.value}
onChange={self.onChange.bind(self)}/>
{passwordCheckbox}
</View>
<FormButton/>
<View >
<View style={styles.forgotContainer}>
{leftMessage}
{rightMessage}
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
)
This is the style
var styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1
},
inputs: {
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
forgotContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
marginLeft: 10,
marginRight: 10
}
})
This is the display
I also tried https://github.com/APSL/react-native-keyboard-aware-scroll-view library but still same result, keyboard is blocking the view / form.
Anyone know whats wrong?
For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding" :
<KeyboardAvoidingView behavior="padding">
Refering to react-native documentation :
Note: Android and iOS both interact with this prop differently.
Android may behave better when given no behavior prop at all, whereas
iOS is the opposite.
A working example on iOS and Android :
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>
It also happened to me... ScrollView and FlatList can work it out by setting a dynamic height depending on your data to FlatList. eg:
<ScrollView>
<FlatList style={{height: dataArr.length * YourInputHeight}}
...
/>
</ScrollView>
I have this code :
renderRooms = ({item:room}) => {
return(
<View style={styles.cards}>
<View style={styles.cardRight}>
<View style={{ marginLeft:2, alignItems: 'center', flex:1 }}>
<Text style={{fontSize:12, marginTop:10, marginBottom: 5, color:'#B0B0B0'}}>
Harga/malam
</Text>
<Text style={{fontSize:12, textDecorationLine:'line-through'}}>
{`${'Rp.'}${room.pricing.normal}`}
</Text>
<Text style={{fontSize:14, fontWeight:'800', color:'#26de81', }}>
{`${'Rp.'}${room.pricing.discount}`}
</Text>
<CheckBox
// center
iconRight
title={this.state.showContinueToPayment == true ? 'Batal' : 'Pilih'}
checked={this.state.showContinueToPayment}
containerStyle={{padding:5, borderColor:'white', backgroundColor:'white'}}
onPress={() => this.setState({showContinueToPayment: !this.state.showContinueToPayment})}
/>
</View>
</View>
</View>
)
}
on this part :
<CheckBox
iconRight
title={this.state.showContinueToPayment == true ? 'Batal' : 'Pilih'}
checked={this.state.showContinueToPayment}
containerStyle={{padding:5, borderColor:'white', backgroundColor:'white'}}
onPress={() => this.setState({showContinueToPayment: !this.state.showContinueToPayment})}
/>
I want to be able to set the state of my checkbox, but I can't make it done.
I'm using a FlatList, when I render my app, this renderRooms give me 2 list. I think the problem is these 2 list should have their own state. But I don't know how to do it.
Looking for some helps. Thanks beforehands.