I'm creating an app with React Native & Expo.
One of the search inputs includes an icon, so I did it like so:
<View style={styles.inputContainer}>
<FontAwesome name="search" size={20} color="black" />
<TextInput
style={styles.input}
value={search}
placeholder="Pesquise"
placeholderTextColor={text_gray}
onChangeText={(text) => setSearch(text)}
/>
</View>
But the Keyboard shows only when I click the TextInput, and I need to open it wherever I click the View that wraps it and the icon.
How can I achieve that?
Create a ref to the TextInput and then call REF.current.focus() to focus on the textInput and REF.current.blur() to blur it. Use Pressable instead of View, its just like a View but with different onPress events.
const textInput = useRef(null);
return (
<Pressable style={styles.inputContainer} onPress={() => textInput?.current?.focus()}>
<FontAwesome name="search" size={20} color="black" />
<TextInput
ref={textInput}
style={styles.input}
value={search}
placeholder="Pesquise"
placeholderTextColor={text_gray}
onChangeText={(text) => setSearch(text)}
/>
</Pressable>
)
Related
I have an iconButton box and inside it, I have a Tooltip icon like below:
<IconButton
Icon={() =>
<View>
{p.s === "app" && (<Tooltip label="App" bg="#FFF" _text={{color:"#000"}}>
<AntDesign name="checkcircle" size={24} color="#58C064" /></Tooltip>
<View>
<Image source={icons.pict}/>
</View>
</View>
}
onPress={() => navigation.navigate(...})}
/>
I long tap on the check circle icon on mobile but do not see the tooltip, it instead interprets it as a press and executes on Press.
I tried separating icons from images like
<View>
{p.s === "app" && (<Tooltip label="App" bg="#FFF" _text={{color:"#000"}}>
<AntDesign name="checkcircle" size={24} color="#58C064" /></Tooltip>
<IconButton
Icon={() =>
<View>
<View>
<Image source={icons.pict}/>
</View>
</View>
}
onPress={() => navigation.navigate(...})}
/>
</View>
but it still does not show up in the tooltip although the button press is now focused on just the image.
How would the tooltip show up?
In general the lay-out seems fine, the content is wrapped up inside a KeyboardAvoidingView as followed:
<KeyboardAvoidingView
keyboardVerticalOffset={-useHeaderHeight()}
behavior={"padding"}
style={styles.container}>
<View style={styles.conversationContainer}>
<ScrollView
ref={scrollViewRef}
onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })}
overScrollMode='never'
showsVerticalScrollIndicator={false}
enableOnAndroid={true}
style={styles.conversation}>
{messagesView}
</ScrollView>
<View
style={styles.send}>
<TextInput
value={text}
textAlignVertical='center'
placeholder='Write your message'
style={styles.textInput}
blurOnSubmit={true}
onChangeText={(value) => setText(value)}
>
</TextInput>
<TouchableOpacity
style={[styles.button]}
activeOpacity={.6}
onPress={() => addMessage()}>
<IonIcon
name={"arrow-forward-circle-outline"}
size={30}
color={'#00966E'}
style={styles.icon} />
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
With the keyboard open, the TextInput is placed above the keyboard as intended.
Keyboard Picture
But whenever I press a single keystroke, the entire view (including the TextInput), lowers down, covering half of the TextInput.
Image of keyboard covering the TextInput
I have already tried changing the KeyboardVerticalOffset to different values as well as the changing the behavior to "heigth", "position" or none. None of these happened to change anything.
Had the same issue. This syntax helped me: <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
i'm using TabView and in every tab i use flatList. every list item has phone and email button. But TouchableOpacity onpress not working so i use onPressOut. onPressOut working but it works when i touched in not when touched out. you guys have any ideas why this is happennig
<View style={styles.ButtonGroup}>
<TouchableOpacity
style={[styles.ButtonCont, {backgroundColor: '#BEF7D1'}]}
onPressOut={() => {
Linking.openURL(`tel:+90${data.item.kiraci_gsm1}`);
}}>
<Icon
name={'phone'}
type="font-awesome-5"
size={24}
color="#036122"
/>
</TouchableOpacity>
<TouchableOpacity
style={[styles.ButtonCont, {backgroundColor: '#C6E1FF'}]}
onPressOut={() => {
Linking.openURL(`mailto:${data.item.kiraci_eposta1}`);
}}>
<Icon
name={'envelope'}
type="font-awesome"
size={24}
color="#0050AC"
/>
</TouchableOpacity>
</View>
Pay attention from where import your "TouchableOpacity". When I changed "TouchableOpacity" from "react-native-gesture-handler" to "react-native" for Android platform.
I have a number of TextInput in my react-native application and I want that if user clicks on next key, the next input must be focused. I am trying to do this with returnKeyType prop passed to all the TextInput. However this doesn't work as intended ,i.e. next input is not focused. And my code for same looks like
<TextInput
ref={firstInputForDaysInterestTextInputRef}
value={closingCosts.firstInputForDaysInterest}
onChangeText={value =>
onStateChange('firstInputForDaysInterest', value)
}
onEndEditing={event =>
onEndEditing(
'firstInputForDaysInterest',
event.nativeEvent.text,
)
}
placeholderTextColor={colors.placeholderColor}
placeholder={constants.common.zeroPlaceholder}
autoCapitalize="none"
returnKeyType="next"
onFocus={() => onFocus(elementName)}
keyboardType="decimal-pad"
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
The workaround that I thought was passing ref and then focusing the next input onEndEditing, but if I does this the textinput will not be closed when I tap outside the textInput. So how can I make my text input to focus on next one?
You can use onSubmitEditing prop to focus the next input for example:
const firstInputForDaysInterestTextInputRef = React.useRef()
const secondInputForDaysInterestTextInputRef = React.useRef()
return (
<View style={styles.container}>
<TextInput
ref={firstInputForDaysInterestTextInputRef}
placeholderTextColor={'gray'}
placeholder={'first'}
autoCapitalize="none"
returnKeyType="next"
keyboardType="decimal-pad"
onSubmitEditing={()=>secondInputForDaysInterestTextInputRef.current?.focus()}
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
<TextInput
ref={secondInputForDaysInterestTextInputRef}
placeholderTextColor={'gray'}
placeholder={'second'}
autoCapitalize="none"
returnKeyType="next"
onFocus={() => alert('I am focused !')}
keyboardType="decimal-pad"
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
</View>
);
Example on Snack
If you want to hide the textinput (hide keyboard) when pressing somewhere else in the app, wrap it it like this for example:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput />
</View>
</TouchableWithoutFeedback>
Don't forget to import TouchableWithoutFeedback and Keyboard from 'react-native'
I am currently making a mobile app and part of it is collecting user data. At the minute I am stuck on getting the DatePicker to show on screen once the text field has been clicked on. I have tried to use the onFocus prop but it does not seem to be working and its not throwing any errors in the console. Here is the code that i have tried using:
const showDatePicker = () => {
return(
<DateTimePicker
value={date}
mode='date'
is24Hour={true}
display="spinner"
onChange={onChange}
/>
)
}
<View style={styles.inputContainer}>
<FontAwesome name="user-circle-o" color={'#808080'} size={20}/>
<TextInput onFocus={() => showDatePicker()} style={styles.input} placeholder="Date Of Birth"
/>
</View>
To give some additional context to the problem I am using a modal which acts as a form for collecting the data. Any help or tips appreciated.
You can wrap the TextInput with a <Pressable />.
<Pressable onPress={() => showDatePicker()}>
<TextInput />
</Pressable>