I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.
I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?
You can use combination of View, Icon and TextInput like so:
<View style={styles.searchSection}>
<Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
<TextInput
style={styles.input}
placeholder="User Nickname"
onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
</View>
and use flex-direction for styling
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
},
Icons were taken from "react-native-vector-icons"
Basically you can’t put an icon inside of a textInput but you can fake it by wrapping it inside a view and setting up some simple styling rules.
Here's how it works:
put both Icon and TextInput inside a parent View
set flexDirection of the parent to ‘row’ which will align the
children next to each other
give TextInput flex 1 so it takes the full width of the parent View
give parent View a borderBottomWidth and push this border down with paddingBottom (this will make it appear like a regular textInput with a borderBottom)
(or you can add any other style depending on how you want it to look)
Code:
<View style={styles.passwordContainer}>
<TextInput
style={styles.inputStyle}
autoCorrect={false}
secureTextEntry
placeholder="Password"
value={this.state.password}
onChangeText={this.onPasswordEntry}
/>
<Icon
name='what_ever_icon_you_want'
color='#000'
size={14}
/>
</View>
Style:
passwordContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#000',
paddingBottom: 10,
},
inputStyle: {
flex: 1,
},
(Note: the icon is underneath the TextInput so it appears on the far right, if it was above TextInput it would appear on the left.)
This is working for me in ReactNative 0.60.4
View
<View style={styles.SectionStyle}>
<Image
source={require('../assets/images/ico-email.png')} //Change your icon image here
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
Styles
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
}
In case is useful I share what I find a clean solution:
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
onChangeText={(text) => onChange(text)}
value={value}
/>
<Icon style={styles.icon} name="your-icon" size={20} />
</View>
and then in your css
inputContainer: {
justifyContent: 'center',
},
input: {
height: 50,
},
icon: {
position: 'absolute',
right: 10,
}
import { TextInput } from 'react-native-paper';
<TextInput
label="Password"
secureTextEntry
right={<TextInput.Icon name="eye" />}
/>
You can use this module which is easy to use: https://github.com/halilb/react-native-textinput-effects
You can wrap your TextInput in View.
<View>
<TextInput/>
<Icon/>
<View>
and dynamically calculate width, if you want add an icon,
iconWidth = 0.05*viewWidth
textInputWidth = 0.95*viewWidth
otherwise textInputwWidth = viewWidth.
View and TextInput background color are both white. (Small hack)
//This is an example code to show Image Icon in TextInput//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, TextInput, Image } from 'react-native';
//import all the components we are going to use.
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/user.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/user.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Name Here"
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.SectionStyle}>
<Image
//We are showing the Image from online
source={{uri:'http://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}
//You can also show the image from you project directory like below
//source={require('./Images/phone.png')}
//Image Style
style={styles.ImageStyle}
/>
<TextInput
style={{ flex: 1 }}
placeholder="Enter Your Mobile No Here"
underlineColorAndroid="transparent"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#000',
height: 40,
borderRadius: 5,
margin: 10,
},
ImageStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
alignItems: 'center',
},
});
Expo
Anyone who's struggling on this
you can try to follow mine also
<View style={{flex:1}}>
<KeyboardAvoidingView enabled>
<View style={{flexDirection:'row',paddingBottom:5, borderColor:'#ccc',borderBottomWidth:1}}>
<TextInput
style={{flex:1}}
onChangeText={(UserEmail) => setUserEmail(userEmail)}
placeholder="Password"
placeholderTextColor="#ccc"
autoCapitalize="none"
keyboardType="default"
returnKeyType="next"
ref={passwordInputRef}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
/>
<FontAwesome5 name={"eye"} size={25} style={{alignSelf:'center'}}/>
</View>
</KeyboardAvoidingView>
</View>
Here you have an example I took from my own project, i have just removed what i thought we didnt need for the example.
import React, { Component } from 'react';
import {
Text,
TouchableOpacity,
View,
StyleSheet,
Dimensions,
Image
} from 'react-native';
class YourComponent extends Component {
constructor(props) {
super(props);
this._makeYourEffectHere = this._makeYourEffectHere.bind(this);
this.state = {
showPassword: false,
image: '../statics/showingPassImage.png'
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}>
<Text>button</Text>
<Image style={styles.image} source={require(this.state.image)}></Image>
</TouchableOpacity>
<TextInput password={this.state.showPassword} style={styles.input} value="abc" />
</View>
);
}
_makeYourEffectHere() {
var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png';
this.setState({showPassword: !this.state.showPassword, image: png});
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
button: {
width: Dimensions.get('window').width * 0.94,
height: 40,
backgroundColor: '#3b5998',
marginTop: Dimensions.get('window').width * 0.03,
justifyContent: 'center',
borderRadius: Dimensions.get('window').width * 0.012
},
image: {
width: 25,
height: 25,
position: 'absolute',
left: 7,
bottom: 7
},
input: {
width: Dimensions.get('window').width * 0.94,
height: 30
}
});
module.exports = YourComponent;
I hope It helps you.
Let me know if it was useful.
you can also do something more specific like that based on Anthony Artemiew's response:
<View style={globalStyles.searchSection}>
<TextInput
style={globalStyles.input}
placeholder="Rechercher"
onChangeText={(searchString) =>
{this.setState({searchString})}}
underlineColorAndroid="transparent"
/>
<Ionicons onPress={()=>console.log('Recherche en cours...')} style={globalStyles.searchIcon} name="ios-search" size={30} color="#1764A5"/>
</View>
Style:
searchSection: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
borderRadius:50,
marginLeft:35,
width:340,
height:40,
margin:25
},
searchIcon: {
padding: 10,
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
marginLeft:10,
borderTopLeftRadius:50,
borderBottomLeftRadius:50,
backgroundColor: '#fff',
color: '#424242',
},
It's now more easier to use with nativebase input hope this will help someone. I used Iconscout and you can use any icon library.
<View style={styles.input}>
<Input leftElement={<UilReact size="30" color="#61DAFB" style={styles.icon}/>} style={styles.input} size={'2xl'} variant="underlined" placeholder="Round" />
</View>
const styles = StyleSheet.create({
input: {
justifyContent:'center'
},
icon: {
marginRight:10
}
});
You can test this too, dont forget to add the style below as well.
<View style={styles.searchContainerStyle}>
<Ionicons name="search" size={24} color="gray"/>
<View style={{ flex: 1 }}>
<TextInput
type="search"
placeholder="Search for doctors & labs"
style={{ marginLeft: Sizes.fixPadding}}
/>
</View>
</View>
searchContainerStyle: {
backgroundColor: "#F5F5F5",
borderRadius: 30.0,
height: 45.0,
flexDirection: "row",
alignItems: "center",
paddingLeft: Sizes.fixPadding + 5.0,
marginBottom: 10,
},
if you are Willing to ADD Your OWN Custome SVG to the Left of Right.
Follow this..
Import svgs from "your Svgs Location"
<TextInputRNP
label="lable"
placeholder="placeholder"
right={<TextInput.Icon icon={() => <svgs.Calender />} size={30} />}
left={<TextInput.Icon icon={() => <svgs.Calender2 />} size={30} />}
/>
Here TextInputRNP is the text Input from React-native-Paper
Related
So I have been building a Registration Page for my project, there are three InputTexts in a row, each inputtext has a flex:1 so that they fill up the screen accordingly. It works as intended on ipads, iphones and android devices but on web after shrinking the browser (like a phones width) the InputTexts just refuse to shrink any further.
I have included the screengrabs from the Browser(Current Behaviour on Web) and also from my ipad and android (Current and Intended Behaviour)
Browser (Current Behaviour On Web)
Ipad And Android(Current & Intended Behaviour)
Here is my Registration.js
.....More Code For Other Things
return (
<LinearGradient
colors={[colors.backgroundStart, colors.backgroundEnd]}
start={{ x: 0.5, y: 0.5 }}
style={styles.container}
>
<StatusBar translucent backgroundColor="transparent" />
<AppScreen>
<View style={styles.headingContainer}>
<Text style={styles.heading}>Lets Start</Text>
<Text style={styles.subHeading}>
Please Enter Your Details
</Text>
......More Code For Other Inputs
<View style={[styles.horizontalInputs, { marginTop: 30 }]}>
<Image source={profile} style={styles.iconStyle} />
<InputFields
placeholder="Department"
isPassword={false}
marginRight={15}
/>
<InputFields
placeholder="Semester"
isPassword={false}
maxLength={1}
input="numeric"
keyboardType="numeric"
marginRight={15}
/>
<InputFields
placeholder="Section"
isPassword={false}
maxLength={1}
/>
</View>
..............More Code For Buttons
</View>
</AppScreen>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-start",
},
headingContainer: {
marginHorizontal: "10%",
width: "80%",
marginTop: "10%",
},
heading: {
fontSize: 42,
fontWeight: "600",
color: colors.HeadingText,
},
subHeading: {
fontSize: 18,
fontWeight: "400",
color: colors.text,
marginTop: 5,
},
iconStyle: {
height: 48,
width: 38,
marginRight: 20,
},
horizontalInputs: {
height: 50,
flexDirection: "row",
},
});
Here is my InputFields.js
import React from "react";
import { StyleSheet, TextInput } from "react-native";
import colors from "../values/colors";
function InputFields(props) {
return (
<TextInput
style={[
styles.input,
{
marginLeft: props.marginLeft,
marginRight: props.marginRight,
marginTop: props.marginTop,
marginBottom: props.marginBottom,
},
]}
placeholder={props.placeholder}
autoCompleteType={props.Type}
autoComplete="off"
autoCorrect={false}
inputMode={props.input}
keyboardType={props.keyboardType}
secureTextEntry={props.isPassword}
maxLength={props.maxLength}
placeholderTextColor={colors.placeholderText}
contextMenuHidden={true}
onChangeText={props.onChangeText}
/>
);
}
const styles = StyleSheet.create({
input: {
height: 50,
borderBottomWidth: 3,
borderBottomColor: colors.InputBorder,
color: colors.text,
flex: 1,
outlineStyle: "none",
},
});
export default InputFields;
**I have only created this InputFields Component because I was just testing with flex flexBasis FlexShrink and Flexgrow, none of which work. **
It looks like the TextInput component has some kind of default width. You can fix this by adding width: "100%" to your input styles
const styles = StyleSheet.create({
input: {
height: 50,
borderBottomWidth: 3,
borderBottomColor: colors.InputBorder,
color: colors.text,
flex: 1,
outlineStyle: "none",
width: "100%",
},
});
so I have this layout. I backgrounded in blue the scrollview so I could see how big it is in terms of height.
my goal is to put this button at the end of the page. when the keyboard lifts up, it overlaps the button so it will be under the keyboard.
This is the screen code:
<SafeAreaView style={styles.root}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior='padding'
keyboardVerticalOffset={-200}>
<ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
<Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
<BgImage path={require('../../../assets/images/phone-city.png')} />
<View style={styles.container}>
<Text style={styles.title}>Från</Text>
<TextInput
ref={inputRef}
placeholder='dit namn'
autoCorrect={false}
onSubmitEditing={() =>
props.navigation.navigate('Person Selected')
}
returnKeyType='next'
style={styles.textInput}
placeholderTextColor={placeholderTextColor}
/>
<Text style={styles.paragraph}>
Skriv in vem du är så mormor vet vem träningsprogrammet kommer
ifrån.
</Text>
</View>
<NavButton
style={styles.button}
title='Nästa'
onPress={() => props.navigation.navigate('Capture Image')}
/>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
this is the screen styles:
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: colors.blue
},
container: {
marginHorizontal: 20
},
title: {
color: colors.white,
fontSize: wp('15%')
},
textInput: {
color: colors.white,
fontSize: wp('15%'),
lineHeight: 60,
opacity: 0.5
},
paragraph: {
color: colors.white,
fontSize: wp('6%')
},
button: {
marginHorizontal: 20,
marginBottom: hp('6%'),
alignSelf: 'flex-end'
}
});
these are the navButton code:
<View style={[styles.navButtonContainer, props.containerStyle]}>
<TouchableOpacity
style={[
styles.navButton,
props.style,
{ backgroundColor: dynamicBackgroundColor }
]}
onPress={props.onPress}>
<Text style={[styles.title, { color: dynamicColor }]}>
{props.title}
</Text>
{DynamicIcon}
</TouchableOpacity>
</View>
this are the navbutton styles:
const styles = StyleSheet.create({
navButtonContainer: {
marginTop: 'auto'
},
navButton: {
backgroundColor: colors.blue,
marginLeft: 'auto',
width: wp('45%'),
height: wp('13%'),
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 500,
paddingHorizontal: wp('5%'),
alignItems: 'center'
},
title: {
color: colors.white,
fontSize: wp('6%')
}
});
so, well. Why marginTop: 'auto' doesn't work and how can I put the button underneath the keyboard at the very bottom of the screen?
regards.
How can I disable only horizontal scrolling on my FlatList? Putting it to false doesnt work. I want to be able to scroll it vertically but not horizontally.
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
FriendItem's return. FriendItem is the renderItem which is being used in the FlatList:
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
Edit:
When there are 4 items, it seems to be okay but as soon as another item is added to the list, the last item is disturbed and is overlapped with the footer? of the app.
It should actually be behind it so that we can scroll down and see the next items.
horizontal parameter is not related to horizontal scroll.
https://reactnative.dev/docs/flatlist#horizontal
If true, renders items next to each other horizontally instead of stacked vertically.
Your 'scroll issue' is your FriendItem , the issue is the width: moderateScale(360).
If you want your item be full width, with margin, you can just remove it.
Example with moderateScale(360)
Example removing width
item: {
backgroundColor: "white",
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
justifyContent: "space-between",
flexDirection: "row",
}
Hope it helps you.
Regards,
I have custom header which has TextInput for searching in StackNavigator.How can i get result on onChangeText of TextInput on particular class,
here is demo:
const StackNavigator = createStackNavigator({
TABS: {
screen: TabNav,
navigationOptions: ({ navigation }) => {
return {
header:
<View style={{ backgroundColor: '#025281', flexDirection:
'row', alignItems: 'center', height: 60 }}>
<TouchableOpacity
style={{ paddingLeft: 5 }}>
<Image source={require(back_arrowimg)} style={{
width: 25, height: 25, resizeMode: 'contain' }}/>
</TouchableOpacity>
<TextInput
style={{ color: 'white', paddingLeft: 15, }}
type='text'
placeholder={headerTitle}
onChangeText={this.loadUsers}
/>
</View>,
}
} },
[ConstFile.SCREEN_TITLES.WELCOME_SEARCH]: {
screen: WELCOMESEARCH,
navigationOptions: {
header: null
} }, } )
from navigationOption you can not do anything to other screen,
so what you can do is, move your header code into another file and use it as component in TabNav
something like this,
let say Header.js
<View style={{ backgroundColor: '#025281', flexDirection:
'row', alignItems: 'center', height: 60 }}>
<TouchableOpacity
style={{ paddingLeft: 5 }}>
<Image source={require(back_arrowimg)} style={{
width: 25, height: 25, resizeMode: 'contain' }}/>
</TouchableOpacity>
<TextInput
style={{ color: 'white', paddingLeft: 15, }}
type='text'
placeholder={headerTitle}
onChangeText={this.props.loadUsers} // see this change
/>
</View>
and in your TabNav.js use header as component,
<Header
loadUsers={(...your params)=>{
//do your necessary stuffs to display data in this file
}) />
I'm using the FormInput element from React Native Elements, which seems to produce a line underneath each FormInput component. One is more faint than the other.
Form looks as follows
<View style={styles.container}>
<Image
style={styles.image}
source={app.imageBackground}
/>
<View style={{ alignItems: 'center' }}>
<Image
style={styles.logo}
source={app.logo}
/>
</View>
<View style={styles.cardWrapper}>
<View style={styles.card}>
<FormInput
inputStyle={styles.textInput}
placeholder='user#email.com'
autoCapitalize='none'
autoCorrect={false}
underlineColorAndroid='transparent'
placeholderTextColor='white'
onChangeText={this.onEmailChange.bind(this)}
/>
<FormInput
secureTextEntry={true}
autoCapitalize='none'
placeholder='password'
autoCorrect={false}
inputStyle={styles.textInput}
underlineColorAndroid='transparent'
placeholderTextColor = 'white'
onChangeText={this.onPasswordChange.bind(this)}
/>
<FormValidationMessage>{this.renderError()}</FormValidationMessage>
{this.renderButton()}
<Text style={{color:'white', textAlign:'center'}}>New to Foodspecials?<Text style={{fontWeight:'900'}} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text></Text>
</View>
</View>
</View>
Here are my styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
cardWrapper: {
padding: 20
},
card: {
},
logo: {
justifyContent: 'center',
},
image: {
backgroundColor: '#ccc',
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
},
textInput: {
height: 50,
fontSize: 20,
borderRadius: 50,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
color: 'white',
width: '100%',
paddingLeft: 20,
marginTop: 10,
marginBottom: 10
},
button: {
borderWidth: 2,
borderColor: 'white',
marginTop: 10,
marginBottom: 10
}
})
I've tried to add a borderWidth property of 0 to the FormInput but this doesn't seem to work.
I've also tried to set a borderColor to transparent which didn't work either.
I've also noticed, if I remove the FormValidationMessage component, both line become more apparent.
Is there a workaround for this?
I was facing the same issue and fixed it by adding borderBottomWidth:0 as belows:
<Input inputContainerStyle={{borderBottomWidth:0}} />
Solution is add a property of input ,
<Input inputContainerStyle={{borderBottomWidth:0}} />
you can achieve that by changing the color of the border by passing "transparent" to borderColor as follows.
<Input
inputContainerStyle={{
borderWidth: 0,
borderColor: "transparent"
}}
placeholder="Test placeholder...."
/>
Try to put Each <FormInput/> inside a <View>. Then style that view accordingly. Those line is a part of <FormInput/> component so styling with InputStyle props won't do the job.
<View style={styles.input}>
<Input placeholder="Username" returnKeyType="next" />
</View>
<View style={styles.input}>
<Input placeholder="Password" returnKeyType="go" secureTextEntry />
</View>
I did this for an Input element. You might get the same effect for a FormInput. Anyway, it got rid of the bottom border. You use the inputContainerStyle.
<Input
placeholder="Username"
leftIcon={<FontAwesome name="user-o" size={24} />}
onChangeText={(username) => this.setState({username})}
value={this.state.username}
containerStyle={styles.formInput}
inputContainerStyle={{
borderRadius:10,
backgroundColor:'white',
borderBottomColor:'white'
}}
/>