I have the following TextInput,
<TextInput
style={[
styles.inputField,
isEmailError && { borderColor: color.delete },
]}
placeholder={'E-mail'}
placeholderTextColor={color[colorScheme].textMuted}
autoCapitalize={'none'}
autoCorrect={false}
value={userCredentials.email}
onChangeText={onChangeEmail}
onSubmitEditing={passwordInput.current && passwordInput.current.focus}
blurOnSubmit={false}
returnKeyType={'next'}
keyboardType="email-address"
/>
When I click anywhere else outside the keyboard(let's say a button), the expected behaviour is that the button will get clicked, however, in here, first click always closes the keyboard then I have to press again for whatever element i was trying to reach.
This is because of scroll view. Add props keyboardShouldPersistTaps in your scrollview as below to solve error :
<ScrollView
keyboardShouldPersistTaps="handled"
keyboardDismissMode="interactive"
>
...
...
</ScrollView>
You can find more detail here
Maybe try this:
import DismissKeyboard from 'dismissKeyboard';
<TouchableWithoutFeedback onPress={()=>{DismissKeyboard()}}>
<View style={Styles.container}>
<TextInput />
</View>
</TouchableWithoutFeedback>
Related
In react-native project I have next button:
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon.Button
name='chevron-down'
backgroundColor='transparent'
color='#000000'
padding={0}
size={30}
onPress={() => setIsCollapsed(false)}
/>
Everything is fine except one thing - on button press for a fraction of a second, appears black square round the button element. How can I remove this styling element?
Wrap it inside TouchableOpacity and pass onPress method on touchable opacity's onPress props
Example :
<TouchableOpacity onPress={() => setIsCollapsed(false)} >
<Icon.Button
name='chevron-down'
backgroundColor='transparent'
color='#000000'
padding={0}
size={30}
/>
</TouchableOpacity>
I have an old issue with scrolling some content inside TouchableOpacity (react-native). I've been trying to find any solution for months but nothing worked together with onPress/onPressIn/Out handlers. Any ideas?
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
<ScrollView>
{/* some content to be scrolled here */}
</ScrollView>
</TouchableOpacity>
use TouchableOpacity inside the Scrollview
<ScrollView>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
delayPressIn={1}
onPress={handlePress}
onPressIn={handlePressIn}
onLongPress={handleLongPress}
onPressOut={handlePressOut}>
{/* component to be displayed */}
</TouchableOpacity>
</ScrollView>
I am trying to make visible list of buttons on top of a multi-line text input, which is now working. But when i am clicking on one of these button nothing is happening.
I am using zIndex to bring the childComponent on top of TextInput, Now when i am clicking on these button TextInput is getting focus instead of triggering button click event.
I just started learning react-native so I am not able to understand where i need to make the changes for making it functional.
Sample Code structure given below:*
const Component_1=()=>{
const UpdateTextInput=(ip,callType)=>{
console.log(ip);
}
return (<View keyboardShouldPersistTaps={'handle'}>
<View style={{flexDirection:'row',backgroundColor:'#fff',zIndex:10}}>
<ChildComponent callBackFunc={(ip,callType)=>UpdateTextInput(ip,callType)} />
</View>
<View>
<TextInput
multiline
onChangeText={(text)=>updateString(text,'')}
/>
</View>
</View>
)
}
export default Component_1;
const ChildComponent=({callBackFunc})=>{
const [ButtonSection,SetButtonSection]=useState(false)
return (
<View style={{flexDirection:'row-reverse'}}>
<View style={{flexDirection:'column',width:'15%',position:'absolute'}} >
<TouchableOpacity onPress={()=>SetButtonSection(!ButtonSection)} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='arrow-drop-down'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:20,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
{ButtonSection==true
?<View style={{flexDirection:'column',position:'relative',backgroundColor:'#ccc'}}>
<TouchableOpacity onPress={()=>callBackFunc('','CLR')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='block'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','COPY')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='content-copy'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>callBackFunc('','SAVE')} style={{borderColor:'tomato',borderEndWidth:1}}>
<Icon
name='save'
size={25}
type='material'
iconStyle={{color:'tomato',textAlign:'center',paddingHorizontal:10,paddingVertical:8,fontSize:20}}
/>
</TouchableOpacity>
<Button title='BTN' onPress={()=>console.log('Button1')
}/>
</View>
:null
}
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps={'handle'} style={{marginRight:50}}>
<Item/>
</ScrollView>
</View>
)
}
export default ChildComponent
Instead of using zIndex, use absolute position in view.
position: 'absolute'
Give absolute position to the view of child component
I have a page with two inputs and a 'Next' button. I want to move my container up when keyboard is active so that the 'Next' button is also visible when the keyboard is open. I've used KeyboardAvoidingView but the content is not moving when the keyboard is active. What seems to be the issue here?
Here is my code
<View style={{height: '100%'}}>
<LinearGradient colors={['#29aae1', '#4bc1b6']} style={{height: '100%'}}>
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={0}
style={{padding:10}}
>
<ScrollView style={{height:'100%'}}>
<Text style={styles.signin_info}>Let's get you signed in. Provide your first name and last
name.
Do not
worry, when you comment your real name won't be visible ;)</Text>
<Field label="First name" name="signUpFirstName" component={this.renderInput}/>
<Field label="Last name" name="signUpLastName" component={this.renderInput}/>
<TouchableOpacity block primary style={styles.nextBtn_active}
onPress={Actions.signUp_email}><Text
style={{fontFamily: 'gotham', fontSize: 18, color: 'white'}}
allowFontScaling={false}>Next</Text></TouchableOpacity>
</ScrollView>
</KeyboardAvoidingView>
</LinearGradient>
</View>
If you already ScrollView inside KeyboardAvoidingView, consider using react-native-keyboard-aware-scroll-view instead.
Your KeyboardAvoidingView component is not enabled !!! enabled property is mandatory:
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={0}
style={{padding:10}}
enabled // <-- this property is required
>
See: enabled
I have problem when trying to submit data from the TextInput component. When trying to press the button that invoke the callback that handle the text, there is a need to press it twice for it to work. Once for the TextInput lose its focus and the second time to invoke the callback.
I tried this solution but it didnt worked for me.
COMPONENT:
<Modal>
<ScrollView>
<Card>
<CardImage source={{uri: this.props.linkImage}}/>
<CardContent/>
</Card>
{
this.state.single.map((comment) => {
return comment[3] ?
<Comp/> : null
})
}
</ScrollView>
<KeyboardAvoidingView behavior="padding" enabled>
<CardAction>
<TouchableOpacity>
<IconFA name="reply"/>
</TouchableOpacity>
<TouchableOpacity>
<IconEn name="thumbs-up"/>
</TouchableOpacity>
<TouchableOpacity>
<IconEn name="thumbs-down"/>
</TouchableOpacity>
</CardAction>
<CardAction>
<TextInput ref={input => this.input = input}/>
<TouchableOpacity>
<IconFA name="rocket"/>
</TouchableOpacity>
</CardAction>
</KeyboardAvoidingView>
</Modal>
Just pass keyboardShouldPersistTaps="always" prop to ScrollView wrapping your component like this:
<ScrollView keyboardShouldPersistTaps="always">
...content
<ScrollView>