vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Change icon based on focused state

Browse source
This commit is contained in:
Arnaud Vergnet 2020-04-20 09:48:04 +02:00
parent 1dbfe29037
commit 3a570bd993
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/Tabbar/TabHomeIcon.js
View file

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import {View} from "react-native";
import {Image, View} from "react-native";
import {FAB, withTheme} from 'react-native-paper';
import * as Animatable from "react-native-animatable";
@ -20,7 +20,7 @@ const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
class TabHomeIcon extends React.Component<Props> {
focusedIcon = require('../../../assets/tab-icon.png');
unFocusedIcon = require('../../../assets/tab-icon-outline.png'); // has a weird rotating on icon change
unFocusedIcon = require('../../../assets/tab-icon-outline.png');
constructor(props) {
super(props);
@ -47,12 +47,24 @@ class TabHomeIcon extends React.Component<Props> {
});
}
iconRender = ({size, color}) =>
this.props.focused
? <Image
source={this.focusedIcon}
style={{width: size, height: size, tintColor: color}}
/>
: <Image
source={this.unFocusedIcon}
style={{width: size, height: size, tintColor: color}}
/>;
shouldComponentUpdate(nextProps: Props): boolean {
return (nextProps.focused !== this.props.focused);
}
render(): React$Node {
const props = this.props;
console.log(props.focused)
return (
<View style={{
flex: 1,
@ -65,7 +77,7 @@ class TabHomeIcon extends React.Component<Props> {
useNativeDriver
onPress={props.onPress}
onLongPress={props.onLongPress}
icon={this.focusedIcon}
icon={this.iconRender}
style={{
marginLeft: 'auto',
marginRight: 'auto'