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.
Related
I'm trying to automatize an react-native app using Appium, but i need accessibility id to identify elements. I've tried with the following code but still not showing accesibilty id.
`
<TouchableOpacity
activeOpacity={opacity}
onPress={onPress}
disabled={disabled}
accessible={true}
accessibilityLabel="Ingresar a mi cuenta"
testID="loginAccount"
>
`
I managed to modify the xpath of the Tab screen with attributes:
tabBarTestID: 'Inicio', tabBarAccessibilityLabel: 'inicioLabel'
Also i want to know if it works in custom components.
I've tried adding testId, accesible and testID, but still not showing accesibiltyID
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/
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.
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.