According to this link in the React Native API Documents:
https://facebook.github.io/react-native/docs/0.59/textinput#isfocused
The TextInput component has a method called isFocused(). How would I go about accessing this method? Do I have to use a ref?
Also, I already know that I can achieve the same effect by using the onFocus prop and setting up a state manager and a function to change the state of the input based on the onFocus. However, I am just curious how I would go about using these component methods since there are others in other components as well.
I have tried using this
<TextInput onChangeText={this.handleText} style={(this.isFocused()) ? styles.input : styles.lame} placeholder="Names"/>
but it is looking like I might have to use a ref since it seems that it isn't defined even though the method should be a part of this component.
isFocused() should be called on ref to TextInput.
import React, {useEffect, useRef} from 'react';
import {TextInput, BackHandler} from 'react-native';
function SearchBar() {
const textInputReference = useRef(null);
useEffect(() => {
let backhandler = BackHandler.addEventListener(
'hardwareBackPress',
function() {
if (textInputReference.current.isFocused()) {
textInputReference.current.blur();
return true;
}
return false;
},
);
return () => {
backhandler.remove();
};
}, []);
return (
<TextInput ref={textInputReference} />
);
}
export default SearchBar;
You can use state for handle input focus, if you have multi-input that also need focus state, just create many state for it.
class MyComponent extends React.Component {
state = { isFocused: false }
handleInputFocus = () => this.setState({ isFocused: true })
handleInputBlur = () => this.setState({ isFocused: false })
render() {
const { isFocused } = this.state
return (
<View>
<TextInput
onFocus={this.handleInputFocus}
onBlur={this.handleInputBlur}
style={ isFocused ? styles.input : styles.lame}
/>
<Text>Hello World</Text>
</View>
)
}
}
This another easy way to use the onFocus prop in TextInput
import React, { useState } from 'react'
import { View, StyleSheet, TextInput } from 'react-native'
const TextInput = () => {
const [isHighlighted, setIsHighlighted] = useState(false)
return (
<View>
<TextInput
style={[styles.textInput, isHighlighted && styles.isHighlighted]}
onFocus={() => { setIsHighlighted(true)}
onBlur={() => {setIsHighlighted(false)} />
</View>
)
}
const styles = StyleSheet.create({
textInput: {
borderColor: 'grey',
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 8,
height: 43,
},
isHighlighted: {
borderColor: 'green',
}
})
According to its documentation
Returns true if the input is currently focused; false otherwise.
How we can achieve that? the answer is useRef.
For example :
import React, { useRef } from 'react'
import { View, StyleSheet, TextInput, Button } from 'react-native'
const App = props => {
const inputRef = useRef(null);
const checkIsFocusedHandler = () => {
const result = inputRef.current.isFocused();
alert(result);
}
return (
<View style={styles.container}>
<TextInput ref={inputRef} style={styles.input} value="Abolfazl Roshanzamir" />
<TextInput style={styles.input} />
<Button title="Check isFocused" onPress={checkIsFocusedHandler} />
</View>
)
}
If we click on the first TextInput then click on the button, the result is => true,
if we click on the second TextInput then click on the button, the result is => false.
Use onFocus props of TextInput component
<TextInput onFocus={yourCallBack} />
yourCallBack function will be called when the TextInput is focused
Related
So im new at react native and i built an custom text input that gives suggestions by following a tutorial.But now i cant use onChange in that custom text input.I tried to create a state in App.js and change it in AutoCompleteText.js file but didnt worked.How can i get the value inmy custom text input ?
my App.js file :
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AutoCompleteText from './AutoCompleText'
import './AutoCompleteText.css';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.AutoComp}>
<AutoCompleteText items={['Ali','Veli','Ahmet']} />
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
AutoComp:{
width:600
}
});
my AutoCompleteText.js file
import React from 'react'
import './AutoCompleteText.css';
export default class AutoCompleteText extends React.Component{
constructor(props){
super(props);
this.state={
suggestions:[],
text:'',
};
}
onTextChanged = (e) =>{
const {items} = this.props;
const value = e.target.value;
let suggestions = [];
if (value.length > 0){
const regex = new RegExp(`^${value}`,'i');
suggestions = items.sort().filter(v => regex.test(v));
}
this.setState(() => ({ suggestions , text: value }));
}
suggestionSelected(value){
this.setState(() =>({
text: value,
suggestions:[],
}) )
}
renderSuggestions(){
const {suggestions} = this.state;
if (suggestions.length === 0){
return null;
}
return(
<ul>
{suggestions.map((item) => <li onClick={() => this.suggestionSelected(item)}>{item}</li>)}
</ul>
);
}
render(){
const { text } = this.state;
return(
<div className="AutoCompleteText">
<input value={text} onChange={this.onTextChanged} type ='text'/>
{this.renderSuggestions()}
</div>
)
}
}
hi Ülkü Tuncer Küçüktaş,
You are writing the wrong syntax. You are mixing the syntax of react native with react. In react native for textinput, you should use the TextInput Component(Built in component from docs).
The syntax of react native TextInput look like below
import React from 'react';
import { TextInput } from 'react-native';
const UselessTextInput = () => {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
);
}
export default UselessTextInput;
How to update value of textinput in react native. I'm making notes taking app in which I get value from asynchoronus storage. And I want to edit that note value which I take as a default value. I want to update value in storage using textinput. My code is below. Please give a proper answer. Thank You.
import React, { useState } from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import { FAB,IconButton } from 'react-native-paper';
import Header from './Header.js';
import AsyncStorage from '#react-native-community/async-storage';
export default function EditNotes({navigation}) {
const [noteTitle, setNoteTitle] = useState('')
const [noteDescription, setNoteDescription] = useState('')
const [noteTitlenew, setNoteTitlenew] = useState('')
const [noteDescriptionnew, setNoteDescriptionnew] = useState('')
getValueFunction = () => {
//function to get the value from AsyncStorage
AsyncStorage.getItem('onetitle').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteTitle(value)
);
AsyncStorage.getItem('onedesc').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteDescription(value)
);
};
return (
<>
<Header titleText = 'Edit Note' />
<View style={styles.container}>
{getValueFunction()}
<TextInput
placeholder = "Add Note Title here"
defaultValue = {noteTitle}
value = {noteTitlenew}
onChangeText = {setNoteTitlenew}
style = {styles.title}
/>
<TextInput
placeholder = "Add Note Description"
defaultValue = {noteDescription}
value = {noteDescriptionnew}
onChangeText = {setNoteDescriptionnew}
multiline={true}
style={styles.text}
scrollEnabled={true}
returnKeyLabel='done'
blurOnSubmit={true}
/>
<FAB
style={styles.fab}
small
icon='check'
/>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop:20,
paddingHorizontal:10
},
title:{
fontSize:24,
marginBottom:16,
borderWidth:1,
padding:15
},
text: {
fontSize:16,
borderWidth:1,
padding:15
},
fab:{
position:'absolute',
margin:20,
right:20,
bottom:0,
}
});
You do not need to use 2 separate states for default and value, instead, you can achieve the desired result by providing a single state for value and default value. Please update your code to the following
import React, { useState } from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import { FAB,IconButton } from 'react-native-paper';
import Header from './Header.js';
import AsyncStorage from '#react-native-community/async-storage';
export default function EditNotes({navigation}) {
const [noteTitle, setNoteTitle] = useState('')
const [noteDescription, setNoteDescription] = useState('')
getValueFunction = () => {
//function to get the value from AsyncStorage
AsyncStorage.getItem('onetitle').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteTitle(value)
);
AsyncStorage.getItem('onedesc').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteDescription(value)
);
};
return (
<>
<Header titleText = 'Edit Note' />
<View style={styles.container}>
{getValueFunction()}
<TextInput
placeholder = "Add Note Title here"
defaultValue = {noteTitle}
value = {noteTitle}
onChangeText = {setNoteTitle}
style = {styles.title}
/>
<TextInput
placeholder = "Add Note Description"
defaultValue = {noteDescription}
value = {noteDescription}
onChangeText = {setNoteDescription}
multiline={true}
style={styles.text}
scrollEnabled={true}
returnKeyLabel='done'
blurOnSubmit={true}
/>
<FAB
style={styles.fab}
small
icon='check'
/>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop:20,
paddingHorizontal:10
},
title:{
fontSize:24,
marginBottom:16,
borderWidth:1,
padding:15
},
text: {
fontSize:16,
borderWidth:1,
padding:15
},
fab:{
position:'absolute',
margin:20,
right:20,
bottom:0,
}
});
Before you use react native carefully read the react native documentation.
About your code u don't want to need two state for updated and initial value, and you can pass the default value you in the useState and call it.
In order to make a custom input, I had to create an InputWrapper to apply common style and add some animation behavior:
import React, { ReactElement, useState, useEffect } from 'react';
import {
StyleSheet, View, TouchableWithoutFeedbackProps,
} from 'react-native';
import Text from './Text';
import { Colors, Theme } from '../constants';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
interface Props extends TouchableWithoutFeedbackProps {
label: string;
value?: any;
children: any;
focus: boolean;
}
const styles = StyleSheet.create({
// ...
});
const InputWrapper = ({
label, value, children, focus, ...props
}: Props): ReactElement => {
const [show, setShow] = useState(false);
useEffect(() => {
setShow(focus || Boolean(value));
}, [focus, value])
return (
<View
style={[
styles.container,
focus ? styles.containerFocus : {},
]}
>
<TouchableWithoutFeedback {...props}>
<View style={[
styles.wrapper,
focus ? styles.wrapperFocus : {},
]}>
<Text
style={[
styles.label,
show ? styles.labelActive : {},
]}
>
{label}
</Text>
{show && children}
</View>
</TouchableWithoutFeedback>
</View>
);
};
export default InputWrapper;
I implemented the wrapper with the TextInput native component:
import React, { ReactElement, useState, useRef } from 'react';
import {
TextInputProps, TextInput,
} from 'react-native';
import InputWrapper from './InputWrapper';
import InputValue, { InputValueStyles } from './InputValue';
interface Props extends TextInputProps {
label?: string;
}
const Input = ({
label, value, ...props
}: Props): ReactElement => {
const [focus, setFocus] = useState(false);
const input = useRef(null);
const onWrapperPress = (): void => {
setFocus(true);
}
const onInputFocus = (): void => {
setFocus(true);
}
const onInputBlur = (): void => {
setFocus(false);
}
return (
<InputWrapper
label={label}
value={value}
focus={focus}
onPress={onWrapperPress}
>
{!focus && <InputValue value={value} />}
{focus && <TextInput
autoFocus={focus}
style={InputValueStyles.input}
value={value}
onFocus={onInputFocus}
onBlur={onInputBlur}
ref={input}
{...props}
/>}
</InputWrapper>
);
};
export default Input;
All works perfectly except one thing: If you press on the touchable overlay of the focuses input, you will lose this focus because it triggered the blur input event.
The question is quite simple then: How to prevent this?
I also tried other ways with the disabled prop of the touchable area or blur event preventing without any luck.
If you also have a better way to handle my need, I'm not against propositions. :-)
Really simple question, why isn't onSubmitEditing firing when I hit 'Search' on the virtual keyboard?
Currently there are no errors thrown and the console.log in onSearch() never fires.
I'm using the EXPO SDK v.29.
import React from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, Image } from 'react-native';
import { WebBrowser } from 'expo';
import Icon from 'react-native-vector-icons/Ionicons';
import Styles from 'app/constants/Styles';
import Vars from 'app/constants/Vars';
import Menu from 'app/components/Menu';
import MiniMap from 'app/components/MiniMap';
import NewsList from 'app/components/NewsList';
import {get, post} from 'app/helpers/api';
export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: (<Image style={{width: 132, height: 30}} source={require('./../../assets/images/header_image.png')}/>)
};
};
constructor(props) {
super(props);
this.state = {
menu: [],
loadingMenu: true,
searchString: '',
};
}
onMenuPress = (item) => {
let next;
let route = item.page_type.slice(4);
if(route == "PageExternal") {
WebBrowser.openBrowserAsync(item.page.url);
} else {
data = item.page;
if(item.children.length > 0) {
route = 'Menu';
data = item.children;
}
this.props.navigation.navigate(route, {
data: data,
title: item.title
});
}
}
onSearch = (e) => {
console.log('onSearch', e);
//WebBrowser.openBrowserAsync('https://www.1177.se/Halland/Sok/?q=Diabetes&submitted=true');
}
async componentDidMount() {
console.log('Eat my shorrs');
menuitems = await get('content/menu');
this.setState({
menu: menuitems,
loadingMenu: false,
})
//this._getMenu();
}
render() {
return (
<ScrollView style={Styles.whiteBackground}>
<View style={[Styles.blueBackground, Styles.topPadding, Styles.horizontalPadding]}>
<View style={[Styles.searchBox, Styles.bottomMargin]}>
<View style={Styles.searchField}>
<TextInput
style = {Styles.searchInput}
placeholder = "Sök sjukdom/behandling"
onSubmitEditing = {(e) => (this.onSearch(e))}
underlineColorAndroid = "transparent"
returnKeyLabel = "Sök på 1177"
returnKeyType = "search"
/>
<Icon style = {Styles.searchIcon} name = "ios-search" size={18}/>
</View>
<Text style={[Styles.searchLabel]}>Söksvaren kommer från 1177.se</Text>
</View>
<Menu
data={this.state.menu}
loading={this.state.loadingMenu}
style={Styles.topPadding}
onItemPress={this.onMenuPress}
/>
</View>
<Text style={[Styles.h1, Styles.blackText, Styles.horizontalPadding]}>Hitta till oss</Text>
<MiniMap navigation={this.props.navigation}></MiniMap>
<Text style={[Styles.h1, Styles.blackText, Styles.horizontalPadding]}>Nyheter</Text>
<NewsList navigation={this.props.navigation}></NewsList>
</ScrollView>
);
}
}
<TextInput
onSubmitEditing = {(event) => (this.onSearch(event.nativeEvent.text))}
multiline={false}
/>
It does not work when multiline={true} is specified, perhaps your styles has that. See Documentation
You will find your text with event.nativeEvent.text
Try changing
onSubmitEditing = {(e) => (this.onSearch(e))}
to
onSubmitEditing = {this.onSearch}
Then keep
onSubmitEditing = {(e) => this.onSearch(e)}
like this and try by changing the function like below
function onSearch(e) {
console.log('onSearch', e);
//WebBrowser.openBrowserAsync('https://www.1177.se/Halland/Sok/?q=Diabetes&submitted=true');
}
Hope this will work
Check this out
https://snack.expo.io/#raajnadar/submit-text-input
Render method
render() {
return (
<View style={styles.container}>
<TextInput
placeholder="Sök sjukdom/behandling"
onSubmitEditing={this.onSearch}
underlineColorAndroid="transparent"
returnKeyLabel="Sök på 1177"
returnKeyType="search"
style={{ width: '100%', textAlign: 'center' }}
/>
</View>
);
}
On submit function
onSearch() {
console.log('onSearch')
}
I'm an iOS developer currently working on an experimental React Native app.
I have the following code which shows a button and sample text on the screen.
import React from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';
export default class App extends React.Component {
constructor() {
super();
this.state = {sampleText: 'Initial Text'};
}
changeTextValue = () => {
this.setState({sampleText: 'Changed Text'});
}
_onPressButton() {
<Text onPress = {this.changeTextValue}>
{this.state.sampleText}
</Text>
}
render() {
return (
<View style={styles.container}>
<Text onPress = {this.changeTextValue}>
{this.state.sampleText}
</Text>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Change Text!"
color="#00ced1"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5deb3',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {}
});
The above code displays text and a button.
However when I click the button, the app crashes instead of showing the new text which is to be shown.
I'm new to React Native, kindly guide me on how to solve the error.
You could use a state to keep your default text and then on press we update the state.
import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
export default class App extends Component {
state = {
textValue: 'Change me'
}
onPress = () => {
this.setState({
textValue: 'THE NEW TEXT GOES HERE'
})
}
render() {
return (
<View style={{paddingTop: 25}}>
<Text>{this.state.textValue}</Text>
<Button title="Change Text" onPress={this.onPress} />
</View>
)
}
}
You can use state for dynamically change the text
import React, {Component} from 'react';
import {Text, Button, View} from 'react-native';
export default class App extends Component{
constructor(){
super();
this.state = {
textValue: 'Temporary text'
}
this.onPressButton= this.onPressButton.bind(this);
}
onPressButton() {
this.setState({
textValue: 'Text has been changed'
})
}
render(){
return(
<View style={{paddingTop: 20}}>
<Text style={{color: 'red',fontSize:20}}> {this.state.textValue} </Text>
<Button title= 'Change Text' onPress= {this.onPressButton}/>
</View>
);
}
}
With hooks:
import React, {useState} from "react";
import {Button, Text, View} from "react-native";
const App = () => {
const [text, setText] = useState("Initial text");
const onPressHandler = event => setText("Changed text");
return (
<View>
<Text>{text}</Text>
<Button title="Change Text" onPress={onPressHandler} />
</View>
);
};
You better make sure what _onPressButton() is doing. You can simply setState() in this function and do nothing else, which can help you solve the problem. If you want to render something new, you have to add return() and wrap up Text.
You can use this approach for updating a value on click of a button
class App extends React.Component {
constructor() {
super();
this.state = { val: 0 }
this.update = this.update.bind(this)
}
update() {
this.setState({ val: this.state.val + 1 })
}
render() {
console.log('render');
return <button onClick={this.update}>{this.state.val}</button>
}
}
It's because your onPress function is a little weird, you want to invoke an action on press, not have jsx elements. Your changeTextValue is what should be passed into your button's onPress.
Set my text in state method then update state in pressed button, then set in text like this:
<Text>
{this.state.myText}
</Text>
import React, { useState } from "react";
import { View, Text } from "react-native";
const App = () => {
const [value, setValue] = useState("Mohd Sher Khan");
const hellod = () => {
setValue("value changed");
};
return (
<View>
<Text onPress={hellod}>{value}</Text>
</View>
);
};
export default App;