I have a TextInput that looks like this.
<TextInput
autoFocus
style={styles.inputText}
placeholder="Type username here here"
ref={input => { this.textUser = input }}
value={this.state.user}
onChangeText={(user) => this.setState({user})}
/>
Now, this is inside a component that is called by a TabNavigator which happens also to be buried inside a StackNavigator. You can see the raw visual representation below:
[Label of Tabs below]
Home Tab (has list of users to choose from)
|
---Show Summary of User
|
---Show more detail about the User
AddUser Tab
Every time I click the Tab named AddUser that has the above TextInput I could see the cursor blinking on my TextInput and obviously the focus is working. However, if I press on one of the list (it has a list of users with summary of information) on my Home Tab and it shows a component, once I go back and press the Tab AddUser again, the focus is gone and there is no blinking cursor. Additionally, if I click also the List of users that I mentioned earlier that shows summary information of the user and then I click further down that shows the more Detail information about the user (See illustration above). Then go back (twice) to Home then click again the Add User it works without problem meaning focus is there and the cursor is blinking.
Below is a snippet code inside the Summary View of Users component:
<View style={{flex:10, flexDirection:'column', justifyContent:'center'}}>
<View style={{flex:8, marginTop:40, marginBottom:40, alignItems:'center', justifyContent:'center', backgroundColor:lightBlue}}>
<Text style={{fontSize:36, color:black, fontWeight:'bold'}}>{user.title}</Text>
<Text style={{fontSize:24, color:gray, fontStyle:'italic'}}>{user.totalAchievements} </Text>
</View>
<View style={{flex:1, justifyContent:'flex-start'}}>
<Button
raised
backgroundColor={white}
color={black}
icon={{name: 'add-circle-outline', color:black}}
onPress={()=>this.gotoAddDetail(user)}
title='Add Detail' />
</View>
</View>
I've been debugging this for almost a whole day and can't figure out what could be the problem. I am new to React and React Native by the way.
Related
I got a weird problem on my react native app, I've a counter buttons, like increment and decrement the quantity of product using redux, but the problem is when i press on button the store value change but the Text component (View) doesn't change automatically until i click outside the button (That's the weird issue).
I tried Button component with onPress, TouchableOpacity onPress but still the same issue.
<TouchableOpacity onPress={()=>{this.handleDecQuantity(item)}}>
<Icon
family="AntDesign"
size={16}
name="minus"
color="#2B4D8E"
style={styles.btn}
/>
</TouchableOpacity>
...
<Text size={16}>{item.quantity}</Text>
...
<Button onlyIcon icon="plus" radius={3} shadowless iconFamily="AntDesign" iconSize={20} color="tarnsparent" iconColor="#2B4D8E" style={styles.btn} onPress={()=>{this.handleIncQuantity(item)}}>+</Button>
I hope the issue is clear, The counter change only when i click outside of button or TouchableOpacity
React Native's TextInput has a clearButtonMode property which would display a small x button on the right of the input area in iOS through which text can be cleared.
I am having issues with the hit slop of that button. I believe it is too small and easy to miss. I have to press multiple times in order to hit the right spot in order to activate it.
Is there a way to customize this clear button => change its hitSlop, color, etc?
What you could do, is to wrap your TextInput element with view and Animated.View, so you can add your own Clear Button with TouchableOpacity for example, and select an icon, colors, size, etc.
So, basically, it would be something like this:
<Animated.View style={...}>
<TextInput value={...} style={...} onChangeText={...} />
<TouchableOpacity>
{/* HERE GOES YOUR CLEAR BUTTON, FOR EXAMPLE: */}
<MaterialIcons size={24} color={'black'} name={'close'} />
</TouchableOpacity>
</Animated.View>
I created push notification expo.
when I receive a notification and click on it, I navigate to the screen that is called productDetail to display for example the product's detail A by the instuction:
navigation.push('detailProduct',{idProduct:notification.data.idProduct}).
the cause that lets me to use navigation.push is to use the function componentDidMount each time when I navigate to detailProduct screen, however navigation.navigate does not allow me.
and when I receive the notification of product B, I navigate to the
productDetail screen to display the detail of B.
so my problem is: when I click the return button I do not get the product detail A. Knowing I'm using redux to store the data.
How can I solve this problem or what is the best method that allows me to save the detail product A
for react-navigation
<TouchableOpacity onPress={()=>{ this.props.navigation.goback() }}>
<Text>Go Back</Text>
</TouchableOpacity>
for react-native-router-flux
<TouchableOpacity onPress={() => { Actions.pop() }}>
<Text>Go Back</Text>
</TouchableOpacity>
I am using react native to implement a community feed. In each post in the feed, I can comment as seen below.
However, the issue is after I enter a comment and want to press on the submit icon on the right, the keyboard will dismiss first before I can tap on the icon to submit the text.
QUESTION:
How can I immediately submit my text after pressing the submit icon without tapping twice (once to dismiss the keyboard, and second to submit)
Here's a snippet of my implementation:
//Code for comments section/box
<View style={styles.commentSectionContainer}>
<View style={[textInputStyle.dark, textInputStyle.compact]}>
<LocalizedTextInput
multiline={false}
autoCorrect={true}
onChangeText={onCommentTextChange}
placeholder="placeholder/writeComment"
style={[textInputStyle.default, {fontSize: 13}]}
underlineColorAndroid="transparent"
value={textComment}
onSubmitEditing={() => {
if (textComment) {
onSubmitComment();
}
}}
returnKeyType="send"
/>
<View style={styles.iconSubmitContainer}>
<IconButton style={styles.commentSubmit} iconName="send" isDisabled={textComment === ''} onPress={onSubmitComment} hitSlop={hitSlop} />
</View>
</View>
</View>
Localized Text Input is using the following textinput
<View style={{flex: 1}}>
<TextInput
multiline={multiline}
style={[defaultStyle, {flex: 1}]}
underlineColorAndroid="transparent"
autoCorrect={true}
{...otherProps}
/>
</View>
The posts are all wrapped in a scrollView.
I tried to use "keyboardShouldPersistTaps" and keyboardDismissMode="Drag-on" but it doesn't produce the expected experience.. The user should be able to dismiss the keyboard by tapping anywhere outside the textinput box instead of requiring to scroll.
If your parent is a ScrollView component, then passing the prop keyboardShouldPersistTaps="always" should do the trick. See the official documentation here.
As Ankit suggested the prop needs to be passed to the scroll view but if that isn't giving you the desired results TextInput has a blur() method that you can call using a ref of that TextInput. Maybe that would help.
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.