rn-icon-textinput v1.0.1

React Native TextInput With Icon

React Native TextInput styled with Icon. I just created texiinput with icon.

Feel free to create PRs and issues in here.

Installation

npm install rn-icon-textinput

or if you're using yarn

$ yarn add rn-icon-textinput

Dependencies

npm install react-native-vector-icons

Option: With react-native link

$ react-native link react-native-vector-icons

Screenshots

Basic Usage

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import IconTextInputComp from '../../components/IconTextInputComp';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';

export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
phone: '',
}
}

submit() {

}
render() {
return (
<View style={styles.container}>
<View>
<IconTextInputComp
placeholder='Your Name'
viewStyle={{ backgroundColor: '#13c1b6', borderRadius: 10 }}
indicatorStyle={{ backgroundColor: '#fff', width: 2, height: 30 }}
style={[styles.textInputStyle, { paddingTop: 10 }]}
iconStyle={{ width: 50 }}
iconSize={25}
iconClass={AntDesign}
iconColor={'#fff'}
iconName={'user'}
placeholderTextColor={'#fff'}
getRef={(ref) => { this.phone = ref; }}
onChangeText={(name) => this.setState({ name })}
onSubmitEditing={() => { this.phone.focus(); }}
underlineColorAndroid={'transparent'}
autoCapitalize={"none"}
autoCorrect={false}
returnKeyType={'next'}
/>
</View>
<View style={{ marginTop: 10 }}>
<IconTextInputComp
placeholder='Your Phone Number'
viewStyle={{ backgroundColor: '#42ddf5', borderRadius: 10 }}
indicatorStyle={{ backgroundColor: '#fff', width: 2, height: 30 }}
style={[styles.textInputStyle, { paddingTop: 10 }]}
iconStyle={{ width: 50 }}
iconSize={25}
iconClass={Entypo}
iconColor={'#000'}
iconName={'user'}
placeholderTextColor={'#fff'}
keyboardType={'number-pad'}
getRef={(ref) => { this.phone = ref; }}
onChangeText={(phone) => this.setState({ phone })}
onSubmitEditing={() => { this.passwordInput.focus(); }}
underlineColorAndroid='transparent'
autoCapitalize="none"
autoCorrect={false}
returnKeyType='go'
/>
</View>
</View>Ï
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop: 40
},
textInputStyle: {
marginHorizontal: 10,
marginVertical: 5,
paddingVertical: 10,
borderRadius: 20,
fontSize: 16,
color: '#fff',
fontWeight: 'bold'
},
});

AppRegistry.registerComponent('example', () => Example)

Props