I'm trying to trigger the event onChangeText on NativeBase for the Search Bar but I can't figure out how to do it. Here's what I have so far
The alert is not showing at all, should the onChangeText be working here?
_onChangeSearchText(text) {
//do something
}
render() {
return (
<Container>
<Header searchBar rounded
onChangeText={this._onChangeSearchText.bind(this)}
autoCorrect={false}>
<Item>
<Icon name="ios-search" />
<Input placeholder="Search" />
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
</Container>
);
}
Header does not have any onChangeText prop. You have to pass onChangeText to Input.
render() {
return (
<Container>
<Header searchBar rounded autoCorrect={false}>
<Item>
<Icon name="ios-search" />
<Input
onChangeText={this._onChangeSearchText.bind(this)} // <-- Here
placeholder="Search"
/>
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>Search</Text>
</Button>
</Header>
</Container>
);
}
Related
im using react-native-material as my ui framwork for my application, but while using the Component i added a label , it worked jst fine but when i enter the text and click out of the textinput box the label appear in front of the text that i entred, and i didnt find how to solve that.
so i need help in that please .
the image of the problem
`
<ScrollView>
<AppHeader />
<SafeAreaView style={styles.container}>
<TextInput
variant="outlined"
style={{margin: 16}}
placeholder="Enter Your Text Here"
label="Input"
onChangeText={val => {
this.setState({textvalue: val});
this.setState({isHidden: false});
}}
/>
<Picker
selectedValue={this.state.size}
onValueChange={size => this.setState({size: size})}>
<Picker.Item label="100" value={100} />
<Picker.Item label="200" value={200} />
<Picker.Item label="300" value={300} />
<Picker.Item label="400" value={400} />
<Picker.Item label="500" value={500} />
<Picker.Item label="600" value={600} />
</Picker>
<Button
title="Submmit"
style={styles.button}
onPress={() => this.setState({isHidden: true})}
/>
`
import {CITYIMG} from '../assets/index';
export default class Login extends Component {
render() {
return (
<Container>
<Image source = {CITYIMG}/>
<Card style={styles.card}>
<Text>
Sign In
</Text>
<Item rounded>
<Input placeholder='Username'/>
</Item>
<Item rounded>
<Input placeholder='Password'/>
</Item>
<Button hasText transparent>
<Text>Forgot Password</Text>
</Button>
<Button rounded>
<Text>Login</Text>
</Button>
<Button rounded>
<Text>Sign Up</Text>
</Button>
</Card>
</Container>
);
}
}
I am exporting images in another folder and get the error:
Expected String or a class function but got undefined . You likely forgot to export your component from the file its defined in.
export const CITYIMG = require('./cityimg.jpg');
for having static images you need to have source={require("../Path/To/picture.extention")}
and you need to require them when you want to use it in the same file(not by exporting and importing)
I am using accordion-collapse-react-native to manage Sections. When i collapse that section and opens it again the redux form values disappear. How can i manage to maintain the state of the Redux Form Field Values. Thanks in advance.
Here is my code :
<Collapse style={styles.item} isCollapsed={this.state.isCollapsed_First}
onToggle={isCollapsed => this.setState({ isCollapsed_First: isCollapsed })}
>
<CollapseHeader style={styles.header}>
<View style={styles.headerContent}>
<Text style={styles.headerText} >Personal Information</Text>
<Icon name={this.state.isCollapsed_First ? "arrow-up" : "arrow-down"} size={18} color='#fff' />
</View>
</CollapseHeader>
<CollapseBody>
<View style={{flexDirection:'row',marginTop:7}}>
<View style={{width:'48%',marginRight:'4%'}}>
<Field name="first_name"
placeholder="First Name"
inputViewStyle={styles.inputView}
inputTextStyle={styles.inputText}
component={this.renderTextInput}
/>
</View>
<View style={{width:'48%'}}>
<Field name="last_name"
placeholder="Last Name"
inputViewStyle={styles.inputView}
inputTextStyle={styles.inputText}
component={this.renderTextInput}
/>
</View>
</View>
<View style={{flexDirection:'row',marginTop:-7}}>
<View style={{width:'100%'}}>
<Field name="dd_country"
placeholder="Country"
data = {this.state.countriesList}
onItemSelect={item => this.props.change('dd_country', item.id)}
textInputStyle={styles.inputView}
component={this.renderDropdownInput}
/>
</View>
</View>
<View style={{flexDirection:'row',marginTop:-7}}>
<View style={{width:'100%'}}>
<Field name="dd_ben_type"
placeholder="Beneficiary Type"
data = {this.state.custTypesList}
onItemSelect={item => this.props.change('dd_ben_type', item.id)}
textInputStyle={styles.inputView}
component={this.renderDropdownInput}
/>
</View>
</View>
</CollapseBody>
</Collapse>
You have to maintain it's state yourself.
Try maintaining the state in the component, something like this:
export function Form() {
const [name, setName] = useState('');
const [country, setCountry] = useState('');
return(
<View>
<Input
onChangeText={setName}
value={name}
placeholder='Name'
/>
<Input
onChangeText={setCountry}
value={country}
placeholder='Country'
/>
</View>
)
}
I'm using native-base's form to handle user's username and password.
When I press next or go from keyboard, it doesn't move cursor to the next or doesn't submit the inputs. How can we fix this?
import { Form } from 'native-base';
<Form style={styles.formStyle}>
<AuthFieldInput
placeholder="Username or Email"
value={this.state.username}
onChangeText={username => this.setState({username})}
returnKeyType="next"/>
<AuthFieldInput
placeholder="Password"
value={this.state.password}
onChangeText={password => this.setState({password})}
secureTextEntry
returnKeyType="go"/>
</Form>
Here is <AuthField> render function
import { Item, Label, Input, Text } from 'native-base';
<Item>
<Input
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
autoCorrect={false}
secureTextEntry={secureTextEntry}
returnKeyType={returnKeyType}
/>
</Item>
Thank you!
I was getting error as "_this2.refs.password.focus" is not a function on onSubmitEditing of TextInput.
This is how I fixed it:
Upgraded package for native-base "^2.4.2” to native-base "^2.7.1”.
Sharing my sample code below:
<Item floatingLabel>
<Label>Mobile Number</Label>
<Input
onChangeText = {(phone) => this.setState({phone})}
value = {this.state.phone}
autoCapitalize="none"
keyboardType='numeric'
returnKeyType={"next"}
maxLength = {10}
onSubmitEditing={(event) => this._password._root.focus()}
/>
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input
getRef={(c) => this._password = c}
onChangeText = {(password) => this.setState({password})}
value={this.state.password}
autoCapitalize="none"
returnKeyType={"done"}
secureTextEntry={this.state.hiddenPassword}
onSubmitEditing = {this.handleLogin}
/>
</Item>
<TouchableOpacity>
<Button style={styles.Button}
onPress={this.handleLogin.bind(this)}>
<Text style={styles.buttonText}>
LOGIN
</Text>
</Button>
</TouchableOpacity>
This is basically a TextInput Wrapper from React Native, if what you want to do is that when you press the "next" button, go to the other input you should do the following.
// <AuthField> render function
<Item>
<Input
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
autoCorrect={false}
secureTextEntry={secureTextEntry}
returnKeyType={returnKeyType}
{ ...this.props }
/>
</Item>
And in your Component you can use it in this way:
// Other render
<Form style={styles.formStyle}>
<AuthFieldInput
placeholder="Username or Email"
value={this.state.username}
onChangeText={username => this.setState({username})}
returnKeyType="next"
onSubmitEditing={() => {
this.refs.passwowrd.focus();
}}
/>
<AuthFieldInput
ref='password'
placeholder="Password"
value={this.state.password}
onChangeText={password => this.setState({password})}
secureTextEntry
returnKeyType="go"
/>
</Form>
Update:
Please check the documentation about this feature https://facebook.github.io/react-native/docs/textinput.html#onsubmitediting
It seems that those return types do not do that. This question was asked before also:
React Native: How to select the next TextInput after pressing the "next" keyboard button?
Maybe it can be of some help to you!
I have a react base search component and I would like to change the blue color to a other color as in the picture.
The react code I use to generate comes from the react base website.
<Item>
<Icon name="ios-search" />
<Input
placeholder="Search"
defaultValue={this.state.searchvalue}
onChangeText={searchvalue =>
this.setState({ searchvalue: searchvalue })}
/>
<Icon
name="ios-close"
onPress={() => this.empty()}
/>
</Item>
<Button transparent onPress={() => this.search()}>
<Icon
style={styles.btnLinkIcon}
name="ios-checkmark-outline"
/>
</Button>
</Header>
you can do by changing Header component backgroudColor
<Header style={{ backgroundColor: '#000'}} >
<Item>
<Icon name="ios-search" />
<Input
placeholder="Search"
defaultValue={this.state.searchvalue}
onChangeText={searchvalue =>
this.setState({ searchvalue: searchvalue })}
/>
<Icon
name="ios-close"
onPress={() => this.empty()}
/>
</Item>
<Button transparent onPress={() => this.search()}>
<Icon
style={styles.btnLinkIcon}
name="ios-checkmark-outline"
/>
</Button>
</Header>