Im trying to build a post view that is only half big. However my keyboard keeps hiding the view and was wondering how I can fix it. After doing some research it seems like I can use KeyboardAvoidingView but I'm not too sure how or where I should put it. I want my placeholderView to go up so my actual View can sit on top of te keyboard.
<Modal
animationType="slide"
transparent={true}
visible={displayThread}>
<View style = {{flex: 1}}></View> // placeholder for half view
<View style = {{flex: 1}}>
<TextInput
style={styles.title}
onChangeText={text => onChangeTitle(text)}
value={title}
placeholder = {"Title"}
autoFocus={true}
/>
<TextInput
style = {styles.description}
multiline={true}
numberOfLines={4}
onChangeText={(text) => onChangeDescription({text})}
value={description}
placeholder = "Write something ...."
/>
</View>
</Modal
Any help would be appreciated
Use KeyboardAwareScrollView below your View and close after your TextInput.
I use this way and works perfectly:
<KeyboardAwareScrollView
enableAutomaticScroll
extraScrollHeight={10}
enableOnAndroid={true}
extraHeight={100}
> ...
customize your way.
Don't forget to add this line in your AndroidManifest
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
add after android:label="#string/app_name"
I have the background transparent image (the light blue in the screenshot). The problem is when I type something in the textbox a vertical scroll comes up and the form moves a little bit up. Is it possible that the background moves with the scroll as well?
#1 - in the screenshot is the form that moves
#2 - is the background image
Here is the code
<Container style={styles.container}>
<ImageBackground source={loginbackground} style={{width: '100%',height:'100%' }}>
<Content>
<View style={{marginTop:margint,paddingLeft:30,paddingRight:30}}>
<View style={{marginTop:10}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={emailicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Email" value={this.state.username} onChangeText={ (text) => this.setState({ username: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
<View style={{marginTop:15}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={passwordicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Password" secureTextEntry={true} value={this.state.Password} onChangeText={ (text) => this.setState({ Password: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
{this.state.Loading==true?
<ActivityIndicator
animating={true}
style={styles.indicator} />
:
<View>
<View style={{flexDirection:'row',justifyContent:'center',marginTop:15}}>
<View style={{width:'13%',justifyContent:'center'}}>
<TouchableOpacity onPress={() => this._toggleRememberme()}>
<Image source={this.state.isrememberme?checkboxcheck:checkboxuncheck} style={{width:28,height:28}}/>
</TouchableOpacity>
</View>
<View style={{width:'41%',justifyContent:'center'}}>
<Text onPress={() => this._toggleRememberme()} style={{fontSize:17,color:'rgb(56,56,56)'}} >Remember me</Text>
</View>
<View style={{width:'46%',justifyContent:'center'}}>
<Text onPress={() => this.props.navigation.navigate("forgotpass")} style={{textAlign:'right', fontSize:17,color:'rgb(56,56,56)'}} >Forgot password?</Text>
</View>
</View>
<Text onPress={() => this.props.navigation.navigate("signup")} style={{textAlign:'center', textDecorationLine:'underline', fontSize:17,color:'rgb(56,56,56)',marginTop:15}} >Create an Account</Text>
<Button onPress={() => this.signin()} block style={{backgroundColor:'rgb(107,29,43)', marginTop:15,height:50, borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Text style={{color:'#fff',fontSize:19}}>Login</Text>
</Button>
</View>
}
</View>
</Content>
</ImageBackground>
</Container>
Just to clairify, you would like for the form to appear fixed above the image background, and for the form and image background to move together as you scroll. So, currently your background is fixed, but the form is above and scrolls independently of the background?
I just want to make sure I have your question correct :)
I think when you use ImageBackground it will always behave in this way, hence the "background". If you want the form to move with the image you could try to position the form with "absolute" position on top of a regular Image component. You might want to try using react-native-elements or react-native-paper as they have Card and Surface components which can help to achieve this behaviour.
I realize this isn't a very definitive answer but I hope it helps in some way. Also you might want to just check any style props of the components which you have used as well as reviewing the documentation on ImageBackground. https://reactnative.dev/docs/imagebackground
My apologies that I couldn't give you a better answer.
I'm using CheckBox from the react-native-elements. In the Documentation, there are not any IconProps. there is IconRight style which I used but it only aligning the Icon from the right of the title but I want to align the Icon at the end of the View.
here is the code -
<CheckBox
title={item}
key={index}
value={item}
ref={item}
checked={checked}
iconRight
iconType="material"
checkedIcon="clear"
uncheckedIcon="add"
checkedColor="red"
onPress={() => {
this.controlcheck(item, checked);
}}
/>
I want to align the + icon at the right of the end.
You can use this :
<CheckBox
title={<Text style={{flex:1}}>Hello World</Text>}
/>
I have the following code in my RN application.
<TouchableOpacity
// onPress={onPress}
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
disabled={disabled}
style={[
styles.button,
buttonStyle,
this.buttonStyles(),
]}
>
<Text>Hello</Text>
</TouchableOpacity>
I want to change the color of TouchableOpacity when it is being pressed. So, in onPressIn, I changed the color to darkRed, but it display a light red or something similar to that. No dark color can be set there. What is the issue here? How can I change the color till I onPressOut? The color should be a dark one.
Found the solution. Set your activeOpacity={1} in your TouchableOpacity.
<TouchableOpacity
onPress={onPress}
activeOpacity={1}
/>
Edit:
I guess I overengineered it a little bit. You can simply use the activeOpacity={1} prop.
Problem:
The problem is that TouchableOpacity already provides feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down. So even if you change the backgroundcolor of the button, you won't notice it. Fortunately, I have a solution for you.
Solution:
You can use TouchableWithoutFeedback together with an additional View to create your wanted behavior.
Code:
<TouchableWithoutFeedback
onPressIn={() => this.setState({pressIn: true })}
onPressOut={() => this.setState({pressIn: false})}
>
<View
// change the color depending on state
style={{ backgroundColor: this.state.pressIn ? '#4c7d4c': '#98FB98'}}
>
<Text> Custom Button </Text>
</View>
</TouchableWithoutFeedback>
Output:
Working Example:
https://snack.expo.io/#tim1717/quiet-watermelon
I'm using React Native with NativeBase as follows:
https://snack.expo.io/#deltanovember/tab-swipe
I'm trying to implement the Advanced Deck Swiper here:
http://docs.nativebase.io/Components.html#deckswiper-adv-headref
My code is almost identical as the example, but my forward icon is aligned on the left of the button:
whereas based on the example, it should be aligned to the right of the button:
How do I make the alignment match the example (ie icon on the right of the button?)
this issue is because you did not set style for your <Body /> tag
This should work correctly
and try work with styles when see this in where ever in your project
this is your right button:
<Button
iconRight
onPress={() => this._deckSwiper._root.swipeRight()}>
<View style={{ flexDirection: 'row-reverse' }} >
<Icon name="ios-arrow-forward" />
<Text>Swipe Right</Text>
</View>
</Button>
Maybe just switching the icon and text will fix this but it's better to be regular :)
(Good luck this is my second answer to you my friend in day :DDDD )
You're placing icon and text in uncorrect order. I just switched them and it works:
<Text>Swipe Right</Text>
<Icon name="ios-arrow-forward" />