I have react native screen with single line TextInput:
<ScrollView>
...
<TextInput />
...
</ScrollView>
When I try to scroll the through the screen and my initial tap lands on TextInput, screen scrolling doesn't work. It almost tries to scroll inside the TextInput, but there is nothing to scroll. Here is what the text input looks like:
<TextInput
style={{...styles.rowInput, color: theme.textColor}}
onChangeText={(text) => this.setState({name: text})}
selectTextOnFocus={false}
autoCapitalize="words"
numberOfLines={1}
underlineColorAndroid="transparent"
autoCorrect={false}
placeholder="Enter Your Name"
placeholderTextColor={borderColor}
maxLength={24} />
Any ideas why it is happening?
It related to ScrollView and you can fix this by setting keyboardShouldPersistTaps to 'Handled'. Try this..
<ScrollView
keyboardShouldPersistTaps={'handled'}>
...
<TextInput />
...
</ScrollView>
Related
I'm using react-native-paper TextInput to show email icon on the left side of text input and that icon should be green (#22C55E) but it's still showing the default color.
<TextInput
placeholder={t('Email')}
style={styles.textInput}
mode="outlined"
outlineColor={Colors.transparent}
activeOutlineColor={Colors.hostessGreen}
theme={{ roundness: 16 }}
left={
<TextInput.Icon
icon={'email-outline'}
color="#22C55E"
style={styles.leftIcon as StyleProp<ViewStyle>}
size={responsiveFontSize(3)}
/>
}
/>
You have to add iconColor='#22C55E' add in place of color="#22C55E" props in TextInput.Icon.you will be able to change color easily.
<TextInput
placeholder={t('Email')}
style={styles.textInput}
mode="outlined"
outlineColor={Colors.transparent}
activeOutlineColor={Colors.hostessGreen}
theme={{ roundness: 16 }}
left={
<TextInput.Icon
icon={'email-outline'}
iconColor="#22C55E"
style={styles.leftIcon as StyleProp<ViewStyle>}
size={responsiveFontSize(3)}
/>
}
/>
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>
)
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 created a screen keyboard component that I want to disable the platform's keyboard, how I can disable it?
<TextInput
secureTextEntry
ref="Pin"
selectionColor="#656565"
keyboardType="numeric"
activeColor="#656565"
inactiveColor="#fff"
autoFocus={false}
ignoreCase
codeLength={4}
inputPosition="center"
size={50}
onFulfill={isValid => this}
codeInputStyle={{ borderWidth: 1.5 }}
/>
Just write showSoftInputOnFocus={false} in <TextInput> like this:
<TextInput showSoftInputOnFocus={false} />
I had issues also. No other solutions was working for me. This will display text input field and it will be clickable but not editable.
<TouchableOpacity onPress={this.openPinKeyboard}>
<View pointerEvents="none">
<Input editable={false} value="1234" />
</View>
</TouchableOpacity>
I think you need to add something like:
<TextInput showSoftInputOnFocus={false} keyboardType="numeric" />
setting keyboardType to null worked for me
EDIT:
this only worked in the simulator, running it on an actual device the native keyboard still appeared.
wrapping the <TextInput /> in a <TouchableWithoutFeedback> element in the example below worked.
<TouchableWithoutFeedback onPress={Keyboard.dismiss} >
<TextInput />
</TouchableWithoutFeedback>
You may try to set keyboardType to none, if it doesn't work another alternative is to set the editable prop to false.
Potential answers can be found here : https://github.com/facebook/react-native/issues/14045
<TextInput showSoftInputOnFocus={false}/>
This work for me, sometime I need onFocus action to navigate new screen, and don't need keyboard open animation. Prop Editable will disable textfield, can not pressable
try this solution i hope this will work for android and ios both...
// Step 1: Get Keyboard, TouchableWithoutFeedback from ‘react-native’;
import { View, TextInput, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
// Step 2: Create an arrow function to write dismiss keyboard code
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>
);
// Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>
//Example
<DismissKeyboard>
<View style={styles.container}>
<TextInput style={styles.input} placeholder="email" />
<TextInput style={styles.input} placeholder="password" />
</View>
</DismissKeyboard>
The easiest solution is to use the onFocus prop on TextInput.
Import Keyboard from ‘react-native’
import {Keyboard, TextInput} from
'react-native'
Then pass Keyboard.dismiss() to TextInput onFocus prop, to stop the keyboard from popping up when focused.
<TextInput onFocus = {()=> Keyboard.dismiss()} .../>
Now test the input field by pressing it to see if the keyboard will pop up
just put this under text input tag this worked for me in react-native
<TextInput
//this line
editable={false}
/>
you can do it by pointerEvents="none"
<View pointerEvents="none">
<TextInput
focusable={false}
style={{color: '#00000000'}}
onChangeText={setEmail}
/>
</View>