I want to add prefix to my text input and I would like to know how to do it.
Text Input Code
<TextInput
style={styles.inputs}
placeholder="Mobile Number"
keyboardType="number-pad"
underlineColorAndroid="transparent"
onChangeText={mobile_number => this.setState({mobile_number})}
/>
Final output I want
You can do it like that:
render() {
return (
<View style={styles.inputContainer}>
<Text style={styles.prefix}>+94</Text>
<TextInput
placeholder="Mobile Number"
keyboardType="number-pad"
underlineColorAndroid="transparent"
onChangeText={mobile_number => this.setState({ mobile_number })}
/>
</View>
)
}
const styles = StyleSheet.create({
inputContainer: {
borderWidth: 1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 10,
borderRadius: 10
},
prefix: {
paddingHorizontal: 10,
fontWeight: 'bold',
color: 'black'
}
})
If you don't want the prefix to be editable, use a label:
<View>
<Label />
<TextInput />
<View>
You can use a text mask. Try this
https://github.com/react-native-community/react-native-text-input-mask
To handle phone number inputs
https://www.npmjs.com/package/react-phone-number-input
You can do it combination of two textinput. One is for prefix and other is for input text.
like this:
<View>
<TextInput /> // Text or dropdown pick, something else
<TextInput />
<View>
Related
I have a view with some TextInputs, and some of them are in the bottom part of the screen. The thing is I want the screen to move up when I click on them to that way I can see what I'm writing. I searched a lot but nothing works for me, I have my view nested in a KeyboardAvoidingView but nothing happens when I click on the TextInput. Here's my code:
<KeyboardAvoidingView
keyboardVerticalOffset={64}
style={{ flex: 1 }}
>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</KeyboardAvoidingView >
And my styles:
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 16,
alignItems: 'center'
},
singleLineTextInput: {
width: DEVICE_WIDTH * 0.8,
borderColor: 'black',
borderBottomWidth: 2,
fontSize: 16,
paddingHorizontal: 16
},
descriptionTextInput: {
maxHeight: DEVICE_HEIGHT / 4
}
});
I'm using React-Navigation and I tried changing keyboardVertialOffset and behavior to multiples values but nothing happens. Any ideas?
Thanks in advance
Import Content from native-base as
import { Content } from 'native-base';
And import platform from react-native
import { Platform } from 'react-native';
And use content and platform in your code like this:
<KeyboardAvoidingView
behavior={Platform.Os == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
><Content>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</Content>
</KeyboardAvoidingView>
Hope this helps!
I’m setting up a new component,
and the keyboard covers the fields
This is for a new component
<KeyboardAwareScrollView enableOnAndroid={true} extraScrollHeight={50} enableAutomaticScroll={true}>
<View style={{ paddingHorizontal: 20 }}>
<View>
<FloatingLabelInput
onRef={(ref) => {
this.inputs['firstName'] = ref
}}
onSubmitEditing={() => {
this.focusNextField('lastName')
}}
label={i18n.t('t_driver_registration_first_name_label')}
onChangeText={(text) => this.onChangeInputText('firstName', text)}
keyboardType='default'
maxLength={20}
value={form.firstName}
labelStyle={Style.inputLabel}
basicColor={GStyle.GREEN}
inputTextColor={Color(GStyle.BLACK).alpha(.7)}
editable={mode !== DriverFormMode.EDIT}
/>
I expect the keyboard will not cover my fields.
Wrap your view in this to scroll automatically on input focus. Do:
<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled keyboardVerticalOffset={100}>
<ScrollView>
<View style={Styles.row}>
//your view
</View>
</ScrollView>
</KeyboardAvoidingView>
<View style={Styles.row}> This is just a Stylesheet e.g. Create a new StyleSheet:
const Styles = StyleSheet.create({
row: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
Use a StyleSheet:
<View style={Styles.row}>
<Text style={[Styles.title, this.props.isActive && styles.activeTitle]} />
</View>
I have a modal with diffrent tabs in my app in which user can filter the search result with categories in the modal . right now it is working but I simply put an event on a <TEXT> , I need some visual clue like checkbox for my options
{this.state.currentTab === 1 && (
<View>
<Text onPress={(text) => this.setGender(true)}>male</Text>
<Text onPress={(text) => this.setGender(false)}>female</Text>
</View>
)}
How Can I use checkbox instead of <TEXT> to use both in android and IOS?
You can use this library for the checkbox
" react-native-circle-checkbox "
import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox';
{this.state.currentTab === 1 && (
<View>
<CircleCheckBox
checked={true}
onToggle={(text) => this.setGender(true)}
labelPosition={LABEL_POSITION.RIGHT}
label="MALE"
/>
<CircleCheckBox
checked={true}
onToggle={(text) => this.setGender(false)}
labelPosition={LABEL_POSITION.RIGHT}
label="FEMALE"
/>
</View>
)}
Example: https://snack.expo.io/#msbot01/intrigued-marshmallows
Use This Component which I manually created. It renders same radio button on both platforms
const RenderRadio = (props) => {
const {
value, onChange, selectedValue
} = props;
const checked = value === selectedValue;
return (
<TouchableOpacity
style={{ flexDirection: 'row' }}
onPress={() => onChange(value)}
>
<View
style={{
width: 20,
height: 20,
borderRadius: 10,
borderWidth: 2,
borderColor: '#002451',
justifyContent: 'center',
alignItems: 'center',
}}
>
<View
style={{
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: checked ? '#002451' : 'white',
}}
/>
</View>
<Text style={{ fontSize: 15, marginLeft: 10 }}>{value}</Text>
</TouchableOpacity>
);
};
use it as
<RenderRadio onChange={this.setSelectedValue} selectedValue={selectedValue} value={value}/>
and set Your selected value as
setSelectedValue = (value) => {
this.setState(selectedValue : value)
}
You can use native-base library, that has more components which you can use for Search filters and this is more reliable, you can set it checked
using checked prop, that is boolean, like this :
import {
Icon,
CheckBox,
Spinner
} from "native-base";
<TouchableOpacity onPress={(text) => this.setGender(true)} >
<CheckBox checked ={tru}
onPress={(text) => this.setGender(true)} />
</TouchableOpacity>
I am trying to build a form in React Native using React Redux Form but I can use the <TextInput> for Email & Password but now I would like to use some checkboxes and dropdowns. Their documentationm doesn't provide an React Native guideline or any examples as they use simply <Input> tag for any inputs but how do i use this in React Native?
Here is my field render I use for email:
const renderField = ({ label, type, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
return (
<View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
<View style={{ flexDirection: 'row', height: 30, alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
<FontAwesome name='email-outline' size={18} color='#cccccc' style={{ paddingLeft: 2 }} />
<TextInput style={{ height: 37, width: 280, paddingLeft: 10, fontSize: 20 }}
keyboardType={keyboardType} onChangeText={onChange} {...restInput}
placeholder={label}
>
</TextInput>
</View>
{touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
</View>);
};
<Field keyboardType='email-address' type='email' label='Email' component={renderField} name='email' />
And what's the problem?
Just create a checkboxField component that you'll use instead of renderField in the places you need. And simply use the onChange function from the props to set a value and value as the value itself.
Here is an example that would be easier to understand:
const renderField = ({ input: { onChange, value } }) => {
return (
<View>
<Switch
onValueChange={(value) => onChange(value)}
value={value}
/>
</View>
);
};
I am trying to make react native UI using FlexBox. But when keyboard pops up, it messes up the UI. Take a look at screenshots and code. I think something is wrong with my FlexBox code.
It is trying to divide remaining screen space between elements according to given flex value.
<View style={loginWrapperStyle}>
<Card>
<View style={logoWrapperStyle}>
<Image
source={require('./logo.png')}
style={logoStyle} />
</View>
<View style={loginFormStyle}>
<TextBox
placeholder='Useraname/Email'
autoCorrect={false}
value={this.state.username}
onChangeText={(val) => this.setState({ username: val })} />
<TextBox
placeholder='Password'
secureTextEntry
autoCorrect={false}
value={this.state.password}
onChangeText={(val) => this.setState({ password: val })} />
</View>
<View style={loginButtonWrapperStyle}>
<Button>
Login
</Button>
</View>
</Card>
</View>
const styles = {
loginWrapperStyle: {
padding: 15,
backgroundColor: '#7CB142',
flex: 1,
},
logoWrapperStyle: {
flex: 2
},
logoStyle: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain',
marginTop: 10
},
loginFormStyle: {
flex: 1
},
loginButtonWrapperStyle: {
flex: 1,
padding: 15,
justifyContent: 'center',
alignItems: 'center',
}
};
You can try out KeyboardAvoidingView which is the most simple solution and easiest to install. You've to wrap your code within KeyboardAvoidView and then add a behavior prop to it.
There's also a KeyboardAwareScrollView(https://github.com/APSL/react-native-keyboard-aware-scroll-view) which will solve your issue.
There's a good demonstration of these at: https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580