I am still new to react native and am working on a chat app. I am using <FlatList /> element to display the long list of messages and add inverted prop to it, to show the last messages by default.
But making my FlatList inverted, disturbed the functionality of stickyHeaderIndices that I am using to display the days of the messages (like they do in WhatsApp). Its been two days, I am stuck on this.
I am also attaching the piece of code for <FlatList/> I am using
<FlatList
style={{ flex: 1 }}
data={messageList}
renderItem={this.renderMessage}
keyExtractor={(item, index) => index.toString()}
showsVerticalScrollIndicator={false}
stickyHeaderIndices={stickyHeaders}
inverted
/>
where variable messageList is an array of all the messages, inlcuding the headers I wish to display, this.renderMessage displays the individual message, stickyHeaders is an array with indexes of the headers that are stored in messageList.
I think it is not possible as of now in React Native. I just realized that is maybe why Instagram doesn't provide this feature in their chat.
If someone reading it in the future knows the right implementation or solution for it, please drop by an answer.
For now, I just dropped the idea of using sticky headers on an inverted list in my chat app. Thanks :(
Related
I have an application developed for internal users. The home page of the app has at least 30 input fields.
<TextInput onChangeText={onChangeNumber} value={number}/>
I have onchangeText for all the 30 inputs, in the future I might add more fields. I don't think adding onchange to all the fields is the best way to do it. How can I optimize the approach? Are there any 3rd party packages where it doesn't re-render for every input change and only captures data on submit?
the way I handle large forms is this,
Store your form data in an object using useState like this,
const [formData, setFormData] = useState({name: "", age:""})
you can pass "onChangeText" like this,
<TextInput
value={formData.name}
onChangeText={value => setFormData(prev => { return { ...prev, name: value } })}
/>
I would suggest creating a separate component for "TextInput", so you can also handle validations in it.
Try using onEndEditing, as per docs:
onEndEditing
Callback that is called when text input ends.
So just changing to
<TextInput onEndEditing={onChangeNumber} value={number}/> should do
There are a few other alternatives on the docs, you might check to see the one that fits you better.
https://reactnative.dev/docs/textinput#onendediting
You should try formik + yup.
I am using it in several projects and this is the best way to manage little and big forms!
I have a quick question about the user's long press action that hits the specific word and shows the meaning of words by requesting api to a dictionary service.
The below is the current way the app renders the components. Because the app has to load many words at the same time, I was not able to wrap all words with each because it drastically slows down the app.
I want This Wordthis word to be reactive to long press.
<View>
<Text>I want <Text>This Word</Text>this word to be reactive to long press.</Text>
</View>
<View>
<Text>I want <Text>This Word</Text>this word to be reactive to long press.</Text>
</View>
We can't not destroy the current form of the rendering. But if there is a way to destroy it temporarily and recover it after query (dictionary api), then that will be also fascinating.
Please share any ideas with me please!
Facebook has recently released some very cool list components.
"No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:"
In particular
FlatList, SecionList, and VirtualisedList
How does Native Base support these components. Looks like ListView is deprecated now.
Nativebase will work fine with the new List components - you just need to use the appropriate components. Considering the FlatList component you code would look something like this.
render() {
return (
<List>
<FlatList
data={[...]}
renderItem={({ item }) => (
<ListItem>
<Text>{item.name}</Text>
</ListItem>
)}
/>
</List>
)
}
Also, the ListView isn't deprecated as of right now. The new List components are still new so they've got a few issues that aren't present in the ListView at this time.
Im trying to change the back button for the NavigationHeader.BackButton but I don't see any way that is possible.
The header is rendered using the following...
_renderHeader(props,backAction){
return (
<NavigationHeader
{...props}
renderLeftComponent={props => this._renderLeftComponent(props,backAction)}
/>
)
}
_renderLeftComponent(props,backAction){
return (
<NavigationHeader.BackButton
onPress={backAction}
onNavigate={backAction}
/>
);
}
I have tried setting tintColor and color style but it doesn't work. I looked at the source code, but I don't see any way this can be done. Is there a way to either set the tint/color or to provide my own image?
I am using react-native-vector-icons which allows you to choose from several different collections, including Google's Material icons. The library provides you with an Icon component that you can integrate with several existing components, including TabBarIOS, NavigatorIOS, Navigator.NavigationBar, ToolbarAndroid, etc.
In addition it provides Icon.Button a convenient way of creating a button with a left icon, and of course you can simply use the Icon inline like this:
<Icon name='arrow-back' size={24} color={#900}/>
They have a pretty good documentation on their Github repo, have a look.
Blow screenshot is from react-native UIExplorer example. I want to animate list rows adding/removing when data source changed - for example, when entering a keyword in the search box.
Thanks a lot.
Try out LayoutAnimation:
LayoutAnimation.easeInEaseOut();
this.setState({...});
There are good implementations of react-native refresh components which have animations as a part of it.
One of them is- react-native-refresher
I have used this in my projects. It's a great library.
Installation:
npm install react-native-refresher --save
Usage(check github link for more detailed code):
<RefresherListView
dataSource={this.state.dataSource}
onRefresh={this.onRefresh.bind(this)}
indicator={<LoadingBarIndicator />}
renderRow={(rowData) => <View style={{padding:10,borderBottomColor: '#CCCCCC', backgroundColor: 'white',borderBottomWidth: 1}}><Text>{rowData}</Text></View>}
/>
Also for more details you can have a look at Animations docs by React Native.