I use React Native Element's SearchBar component for my app.
I set the autoFocus = {true}.
It works fine on iOS, but not on Android.
Any idea how to solve this ?
Here the working code sample.
// imports
....
....
class Abc extends Component {
componentDidMount() {
this.searchBar = true; // Manual Method
}
render() {
return (
<View>
<SearchBar
autoFocus // Automatic Method
ref={(searchBar) = { this.searchBar = searchBar; }}
/>
</View>
);
}
}
Your approach is correct. I have given the manual method but I suggest you go with your method. Also make sure you have passed the autoFocus prop to your <TextInput /> wrapped inside your SearchBar component.
Eg:
const SearchBar = (props) => {
const { prop1, prop2, ...txtIpProps } = props;
return (
<SearchBar>
<TextInput {...txtInpProps}/>
</SearchBar>
)
};
Related
Sorry I am new to React Native, and want to know how to change current input value?
As in my case, if I enter a new word directly into input the previous word or the previous value in the value will continue to appear without changing or replacing the new one.
class component:
Keep the value of the input in state of your component which holds this TextInput component.
class ParentComponent extends React.Component {
constructor (props) {
super(props)
this.state = { queryText: '' }
}
handleInputTextChange = (newText) => {
this.setState({ queryText: newText })
}
render () {
return (<View>
<TextInput
onChangeText={this.handleInputTextChange}
value={this.state.queryText}
/>
</View>)
}
}
Notice How I have used onChangeText and handleInputTextChange to handle new values.
Functional Component:
in the functional components, we use hooks. To hold and update text value we use useState
export default () => {
const [text, setText] = useState("");
return <TextView value={text} onChangeText={setText} />;
};
Hello you can use this method :
this.state = {
email: '13119165220',
}
onChangeText={text => this.setState({ email: text })}
In functional components use
export default () => {
const [text,setText] = React.useState("")
return <TextView
value={text}
onChangeText={setText} />
}
TextInput needs value that it is the value that is gonna be shown inside the TextInput.
And to update that value you use onChangeText that is gonna call whatever function you specify every time the text into the TextInput change.
Depending if you are learning React with hooks or without your code will change:
with hooks:
import React,{useState} from 'react'
//others import
function MyTextInput (props){
const [userInput,setUserInput] = useState()
return (
<TextInput
value = {userInput}
onTextChange = {(text) => setUserInput(text)} /> //is always better call another function
) // where you can validate the input
if your using class and coding without hooks, the logic is the same, just change the syntax:
import React,{Component} from 'react'
//other imports
class MyTextInput extends Component{
constructor(props){
super(props)
this.state = {
userInput:''
}
render(){
return (
<TextInput value = {this.state.userInput}
onChangeText = { text => this.setState({userInput:text}) />
)
}
}
Here the links for the docs, where you can find all the props that TextInput receive with explanation: https://reactnative.dev/docs/textinput
I am trying to call a parameterized function in a header but could not as I am unable to find to way to pass parameter.
class MyScreen extends React.Component {
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={text => this.searchFunction(text)}
/>
)
};
*searchFunction(text)
{
alert( text + ' searched succesfully');
}*
componentDidMount()
{
**//I would need implementation here**
}
render()
{
return (<View />);
}
}
The reserved word this means nothing in the static context of the navigationOptions function, So you can't use it there to call the searchFunction.
There's a way to add params to the navigation object so you can get them in the navigationOptions static function.
You can add the searchFunction as a navigation object param and pass it to the onChangeText attribute.
The implementation looks like this:
class MyScreen extends React.Component {
// Pass the searchFunction from the navigation params to the `onChangeText` attribute.
// It should be triggered with the `text` argument.
static navigationOptions = ({ navigation }) =>
{
headerLeft: (
<SearchBar
placeholder="Search"
round
onChangeText={navigation.getParam('searchFunc')}
/>
)
};
// Use arrow function to bind it to the MyScreen class.
// (I'm not sure you have to do it like this, try to use it as a normal function first)
searchFunction = (text) => {
alert( text + ' searched succesfully');
}
// Add the `searchFunction` as a navigation param:
componentDidMount() {
this.props.navigation.setParams({searchFunc: this.searchFunction})
}
// Since we pass a class function as a param
// I believe it would be a good practice to remove it
// from the navigation params when the Component unmounts.
componentWillUnmount() {
this.props.navigation.setParams({searchFunc: null})
}
render() {
return (<View />);
}
}
Source
I have a react native TextInput with numeric keyboard, and it is working fine, except that the keyboard shows up again after the submit button has been clicked and it navigates to the next page (ShouldNotHaveKeyboardScreen). The next page has no text input and the keyboard should never show on that page. I want to make sure the keyboard doesn't show on the next screen, but I can't figure out how to do it. I attempted to dismiss the keyboard on submitting the textInput, but that doesn't work. I've also tried to dismiss it on the next screen as it loads, but that does't fully work either. The best I can do is to hide it after it pops up, but that is not ideal, I want it to be never shown.
I am using an android device (Android v.6.0.1) with react-native v0.48.3.
Here is the code, I've tried to remove any irrelevant parts.
// The screen that should not have keyboard
import { Keyboard } from 'react-native';
class ShouldNotHaveKeyboardScreen extends Component {
componentDidMount() {
Keyboard.dismiss(); // < that doesn't seem to work
Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
}
componentWillUnmount() {
Keyboard.removeListener('keyboardDidShow', this._keyboardDidShow);
}
_keyboardDidShow() {
console.warn("keyboard did show");
Keyboard.dismiss(); // < this works, but the keyboard pops up first
}
// other stuff
}
// The screen with numeric text input
class TextInputScreen extends Component {
componentDidMount() {
Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount() {
Keyboard.removeListener('keyboardDidHide', this._keyboardDidHide);
}
_keyboardDidHide() {
console.warn("keyboard did hide oh yeah");
Keyboard.dismiss(); // This doesn't help, the event happens but the next screen still shows keyboard
}
handleSendReadCommand(value) {
// some stuff
this.props.navigation.navigate('ShouldNotHaveKeyboardScreen');
}
}
render() {
return (
<ScrollView style={styles.mainContainer}>
<View style={styles.contentContainer}>
<View style={styles.Container}>
<View>
<Text style={styles.Title}>Text here</Text>
<ColoredTextInput inFocus={true}
value={this.props.setting_id}
returnKey={"search"}
onChangeText={(text) => { someAction(text)}}
onSubmitEditing={(event) => {
Keyboard.dismiss(); // This doesn't help
this.handleSendReadCommand(event.nativeEvent.text)}}
/>
</View>
</View>
</View>
</ScrollView>
);
}
}
// numeric text input component
export default class ColoredTextInput extends Component {
constructor(props) {
super(props);
this.state = {style: props.inFocus ? styles.text_input_in_focus : styles.text_input_not_focused};
this.onFocus = () => this.setState({ style: styles.text_input_in_focus });
this.onBlur = () => this.setState({ style: styles.text_input_not_focused });
}
static propTypes = {
inFocus: PropTypes.bool.isRequired,
onChangeText: PropTypes.func,
onSubmitEditing: PropTypes.func,
returnKey: PropTypes.string,
};
render() {
let return_key = 'done';
if (this.props.returnKey) {
return_key = this.props.returnKey;
}
return (
<TextInput
style={[styles.text_input, this.state.style]}
autoFocus={this.props.inFocus}
returnKeyType={return_key}
keyboardType="numeric"
underlineColorAndroid="transparent"
onBlur={() => this.onBlur()}
onFocus={() => this.onFocus()}
value={this.props.value}
onChangeText={ this.props.onChangeText }
onSubmitEditing={ this.props.onSubmitEditing }
/>
);
}
}
How can I hide the keyboard?
I would like to have button change its color when pressed. I tryed checking out other similar topics but I couldn't find a solution. The code renders and the initial button color is red, but when I press it, nothing happens.
export default class someProgram extends Component {
render() {
var buttonColor = "red";
function changeButtonColor(){
if(this.buttonColor === "red"){
this.buttonColor = "green";
}
else{
this.buttonColor = "red";
}
}
return (
<View style={styles.container}>
<Button
title="Press me!"
color={buttonColor}
onPress={() => {changeButtonColor(buttonColor)}}
/>
</View>
);
}
}
You should keep track of the color in the component state. As a side, make sure to understand what the keyword this really means. Do a console.log(this) and see it for yourself.
Anyway, you can
(1) set the initial state in the constructor;
(2) access value from the state using this.state.someProp
then (3) adjust the state later using this.setState({ someProp: someValue }).
1) Initial State
constructor(props) {
super(props);
this.state = {
buttonColor: 'red'; // default button color goes here
};
}
2) Accessing the State &
3) Setting New State
onButtonPress = () => {
this.setState({ buttonColor: 'someNewColor' });
}
render() {
// ...
return (
{/* ... */}
<Button
color={this.state.buttonColor}
onPress={onButtonPress}
/>
)
Note some parts of the code were omitted to focus on the question at hand.
I've been struggling with a weird issue in switch components in React Native when running inside Android app.
Lets say, I have a component which render method looks like this:
render() {
return (
<View>
<View>
<Text>
Test Title
</Text>
<Switch
value={ this.state.value }
onValueChange={
this.test.bind( this )
}
/>
</View>
</View>
);
}
The test method is:
constructor(props){
super(props);
this.state = {
value: true
};
}
test(){
this.setState( {value: !this.state.value})
}
When I run my module inside my iOS app the onValueChange method gets called and everything works as expected, however, when I do the same in my Android app the method never gets called when the value is changed to false. What is more, I cannot change the value more than once i.e I can only set the value to false and it will not allow me to set it to true afterwards. The only way I can play with the switch element again is by holding the bar, nonetheless, the value never gets changed (The switch component doesn't change its color) nor the method called .
Has anyone faced something similar? Is this a issue with RN and its Switch component for Android?
I am using:
react: 15.4.1
react-native: 0.39
***NOTE 1: The onValueChange gets called when I put my RN code inside an activity but it fails when it's inside a fragment.
Try This.
constructor(props){
super(props);
this.state = {
value: true
};
}
and in your render
render() {
return (
<View>
<Text>
Test Title
</Text>
<Switch
value={ this.state.value }
onValueChange={(value) => this.setState({value})}
/>
</View>
);
}
You can remove your test() function
what works for me is this,
constructor(props) {
super(props)
this.state = {
isOpen : false
}
this.onControlChange = this.onControlChange.bind(this);
}
onControlChange(value) {
return this.setState({
isOpen: !this.state.isOpen
});
}
and in return use this way
render() {
return (
<Switch
onValueChange={this.onControlChange}
value={this.state.isOpen}
/>
)
}
so i believe that you should declare binding for your function in constructor. I tested this for Android emulator only.
Hope this helps.