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.
Related
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 :(
I need to show outlined icons in my React Native App. I'm usign react-native-elements with FontAwesome as a font.
<Icon
name="star-outline"
type='font-awesome'
color="#FFF"
/>
But it shows a (?) instead of icon. If I try with name="star" it shows the star icon filled but I need it outlined style.
I would appreciate any help you can give me.. Thanks
You are declaring value of attribute type wrongly Change this:
<Icon
name="star-outline"
type='font-awesome'
color="#FFF"
/>
to
<Icon
name="star-outline"
type='FontAwesome'
color="#FFF"
/>
Hope this helps!
At the begging check if the Icon you are using is solid or regular in FontAwesome, then you can also pass the solid, light and brands as props to the Icon tag you are using , you can find more detail on what i am talking about on,
https://github.com/oblador/react-native-vector-icons/blob/master/FONTAWESOME5.md
and also you can have both outlined and normal icons and use them without any 3rd party provider
i hope it helps
Make sure you're actually importing and using FontAwesome from react-native-vector-icons.
The icon you're looking for is actually in the MaterialIcons component, not the FontAwesome component.
There is an icon called start-o in FontAwesome, which is the exact same icon as far as I can tell.
Clarification
The FontAwesome component actually needs to be imported into your Icon component file:
import FontAwesome from 'react-native-vector-icons/FontAwesome';
You then need to make sure you've added the prop type within the <Icon /> definition in order to use it.
Unfortunately, there is no naming convention in the react-native-vector-icons library, so you can't simply type -outline after the icon name and expect it to find the matching icon.
However, the icon you're looking for may still be available, just under a different name or a different import. I agree, it's incredibly annoying, but at least someone took the time to make Material Icons relatively compatible with React Native. You can see and search for all the icons available in this library here:
https://oblador.github.io/react-native-vector-icons/
I have an application created by react-native which contains a modal raise from bottom. Now I'm tring to use appium to automate the application and in android it works fine. While in iOS, when I try to use appium inspector on the modal, it just get penetrated and return control below.
<Modal style={styles.bottomModal} isVisible={btmModal} backdropOpacity={0.3} onBackdropPress={this._closeBtmModal}>
<View style={styles.ways}>
<TouchableOpacity accessibilityLabel={IDS.MANUAL_NAV_CAMERA} testID={IDS.MANUAL_NAV_CAMERA} style={styles.line} onPress={() => this._navCamera()}>
<Image style={styles.scan} source={require('../../../resources/images/scan.png')} /><Text style={styles.lineTxt}>扫码绑定</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_TEXT} testid={IDS.MANUAL_ADD_TEXT} style={styles.line} onPress={this._navManualBindMfa}>
<Text style={styles.lineTxt}>手动输入</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_MODAL_CANCEL} testId={IDS.MANUAL_ADD_MODAL_CANCEL} style={[styles.line, styles.cancelline]} onPress={this._closeBtmModal}>
<Text style={styles.cancelTxt}>取消</Text>
</TouchableOpacity>
</View>
</Modal>
Try to get appium inspector working against this modal. Thanks for any suggestion in advance.
Possible strategies to try:
"setting accessible={false} on outer most layer makes child views accessible."
See https://github.com/appium/appium/issues/6517#issuecomment-298037046
If your modal has a transparent background the components behind may will still be marked as visible. I use an environment variable set in the build for testing with appium which removes the transparency option. This does mean that the build being tested is not identical to the normal build
React-Native 0.63
Desktop Appium 1.22.0
Appium Inspector 2022.1.2
In our project the obstacle was the element Pressable. Setting property accessible={false} to it fixed an ability for Appium to find elements on modal windows as well. <TouchableOpacity accessible={false}> also plays role for finding elements on screens.
I have to highlight that Appium Inspector's screenshot view still won't recognize elements, but its searching functionality ('id' for iOS) finds them.
Up until now, I was under the impression that if Appium Inspector does not render a component then it means it does not see it, therefore I won't be able to use it in tests.
As it turns out, its searching engine can still find such a component, and therefore we can use it in tests, although sometimes it requires adding additional props to certain components, like accessible={false} or a testID to a parent component.
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.