Is there any way to set the TextInput field without using the value parameter?
I am using _lastNativeText to get data from the field on submission because onChangeText={} and value={} makes typing lag very badly, so instead I am just getting the input without state via _lastNativeText using a ref like this...
<TextInput
ref={(input) => { myTextInput = input }}
/>
Then getting the value with
myTextInput._lastNativeText
This works fine - it is not my favorite solution, but appears to be the only option I have.
This is for a posts feed. So my question is when I want to edit a post, how do I populate the TextInput using some other native function of which I am not aware?
Using setText(postData) and setting value={text} is the obvious answer, but that is not what I want.
Try this
myTextInput.setNativeProps({ text: 'XXXX' })
Related
I have successfully implemented react-native-cn-richtext-editor with limited toolbar functions.
I want to know that, how to get value (text that we have typed) from editor.
I am new in RN, have tried to get value but didn't get success. How can I resolve this issue, as I want to sent this text to server and then do further process.
In given example of this library there is method onValueChange on change the content object is present in value and to extract the value below example is there
onValueChanged = (value) => {
console.log(value[0].content[0].text)
}
Finally I got the solution of above question.
convert the value in HTML with convertToHtmlString write following command,
let html = convertToHtmlString(this.state.value)
for more details refer this github link
I am using react-select to make a select box that geocodes an address and then provides a drop down list of the corresponding local government areas of that search returns.
I am just trying to format each option so it shows the State eg. Queensland after the local government area eg. Brisbane.
So I'm trying to get it to return something like:
Brisbane <small>Queensland</small>
But in the HTML it escapes and renders the tags.
It looks like optionRenderer would work, but it seems to be only available with the Select component of react-select and I am currently using Async because I want to wait for the geocoded latitude and longitude from Mapbox.
Anyone know a way to format options while using the <Async /> component?
OK so I worked out what I was doing wrong. The optionRenderer={this.renderOption} prop was working after all but I was returning a string instead of a JSX component.
So here's my method anyway for anyone who has this issue in the future:
renderOption(option) {
return <div> {option.label} <small>small</small></div>;
}
So I'll just need to split the option.label up and put the State in between the tags.
I am using axios to make several http request simultaneously. Like so:
Afterwards I create a helper function called renderMoviesTrending() to show the data acquired from the api
As you can see from the screenshot, I am passing the movie id (movieTrending.id) via a onPress to the function onPressPosterTrending. This allows me to pass the data of a single selected movie along to movieDetails.js. (all this works fine)
The issue that I am facing now is I need to make a new api call where I must place the movieTrending.id in it, to retrieve a new set of data that allows me to play trailers for a chosen movie based of of the movie id.
The new url for that http request for retrieving the data concerning trailers is the following -> https://api.themoviedb.org/3/movie/353486/videos?api_key=2e3b3e231665535756b50c3e216e0467
Where the api data looks like this:
So when I create a new helper function to make that http request, how to get the movie id from the previous function into the url ?
UPDATED Code of my app.js
https://gist.github.com/anonymous/84107c7d295a848fbe1102b6df9ee8f5
I hope you guys understand what I am trying to achieve here. I have googled this but not really found anything. Maybe I am searching on the wrong keywords
Any help is much appreciated
I feel the easiest way is just storing the current movie trending ID in the state as a new variable. That way it will be available for the whole component.
You are actually already storing the current trending movie.
You can just access it with this.state.selectedMovieTrending.
So your url becomes: https://api.themoviedb.org/3/movie/{this.state.selectedMovieTrending}/videos?api_key=2e3b3e231665535756b50c3e216e0467
Or 'https://api.themoviedb.org/3/movie/' + this.state.selectedMovieTrending + '/videos?api_key=2e3b3e231665535756b50c3e216e0467
use flatlist from react native
like this
<FlatList
data={this.props.posts}
keyExtractor={(item, index) => item._id}
renderItem={({item}) =>{
return(
<View >
<TouchableHighlight onPress={() => this.props.navigation.navigate('SingleMovieScree',{movieid:item.id})} >
// Use React navigation to nvaigate to another screen
<Image style={styles.Poster} source={{ uri: `${TMDB_IMG_URL}${(movieTrending.poster_path)}` }} />
</TouchableHighlight>
</View>
)
}
}
/>
so on another screen you will get movie id parameter like this
console.log(this.props.navigation.state.params.movieid);
then use this id to get movie details from request and display in your screen
According to the React Native Docs for ListView the signature for the renderRow function has the following signature:
(rowData, sectionID, rowID, highlightRow) => renderable
However, in the ScheduleView component in the F8App app by Facebook, PureListView which renders a ListView uses a renderRow function with this signature:
renderRow(session: Session, day: number)
How is this? What am I overlooking?
Because f8 app uses flow. See https://flowtype.org/
Ok, what I didn't realize was that it's the same row data and section ID that are being passed. I thought that it was completely customized data being passed instead but upon examination of the actual data it's now clear that the data is simply grouped by time (even though the param name is day) which really is just the section ID.
Then, as agent_hunt pointed out, they are typed using flow.
Hai i am struggling with keyboard problem in android, when i want to type any thing in text input it show some suggestions in keyboard, I don't want those suggestions, Can any one help me that how to avoid those suggestions.
Any help much appreciated, the above image from nexus 6.
Here is my TextInput code
<TextInput
style={styles.TextInput}
value={this.state.currentWord}
onChangeText={(text) => this.setState({currentWord:text.trim()})}
placeholder="Type Your word here"
autoCapitalize='characters'
autoCorrect={this.state.autoCorrect}
autoFocus={this.state.autoFocus}/>
In state i declare autoCorrect to be false
When using autoComplete="false", React native sets the underlying native android input type to TYPE_TEXT_FLAG_NO_SUGGESTIONS and clears out TYPE_TEXT_FLAG_AUTO_CORRECT, effectively telling the system not to offer any suggestions (see source code). This is the recommended way of disabling text suggestions per the Android reference guides.
The problem is it appears that some (or many?) HTC devices do not honor this setting. From my research, it appears some Samsung devices might not support this either. It is reasonable to assume that other manufactures will not honor this setting - which flat out just sucks. This is one of the big problems with Android - somehow they didn't learn from Microsoft - that sleazy manufacturers will destroy the reliability of your products and it takes years (a decade, roughly) to even begin to undo the damage </rant>. (note: I'm an Android fan).
According to Daniels answer it appears someone had success setting the text type to use TYPE_TEXT_VARIATION_FILTER - which tells the device that your input is being used to filter a list of items. Lets try to modify the existing text input and see if it works - then you can build our own if you want:
You need to find the file ReactTextInputManager.java. From the React Native folder, it will be located at this path:
[react-native]/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
Around line 378 you will find a method called setAutoCorrect - update it to the following:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER))
: 0);
}
Build your app and test. If it doesn't work, try removing both instances of InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | (including the pipe) from the above code and try again. If that doesn't work, I think you're out of luck.
If it does work, then you can either a) instruct everyone on your team how to modify the react native component before building (hacky and unreliable), or b) build your own text input component. You should be able to copy and paste the existing TextInput code and shouldn't have to write much native code at all - mostly just renaming things. Good luck.
Update: going further down the rabbit hole, you can also try the setting TYPE_TEXT_VARIATION_VISIBLE_PASSWORD. So here is the kitchen sink - I'm assuming you can read the code well enough to play around with different combinations of input types:
public void setAutoCorrect(ReactEditText view, #Nullable Boolean autoCorrect) {
// clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value
updateStagedInputTypeFlag(
view,
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
autoCorrect != null ?
(autoCorrect.booleanValue() ?
InputType.TYPE_TEXT_FLAG_AUTO_CORRECT : (InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS | InputType.TYPE_TEXT_VARIATION_FILTER | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD))
: 0);
}
It helps to understand that the method signature for updateStagedInputTypeFlag is the following:
updateStagedInputTypeFlag([view], [flagsToUnset], [flagsToSet]);
Update 2: There are lot's of "input type" flags you can use, see a full list here. Feel free to try others - you might stumble upon one that works. You should be able to modify the code from my first update above.
if anyone has this problem, setting autoCorrect=false and keyboardType="visible-password" hides the suggestions in android
You can set the TextInput to Set autoCorrect to false.
You would have to write your own Android TextView wrapper, that sets the correct input type. See this stack overflow post for more information on the android part.
My solution was using keyboardType={'visible-password'} when the password is visible
<TextInput
onChangeText={onChangeText}
label={label}
autoCapitalize='none'
value={password}
secureTextEntry={isPasswordVisibile}
keyboardType={this.state.isPasswordVisibile ? undefined : 'visible-password'}
/>
Our fix/hack was to simply change the input`s type from text to email and back to text.