ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
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 // @flow
import * as React from 'react'; import * as React from 'react';
import {View} from "react-native"; import {Image, View} from "react-native";
import {FAB, withTheme} from 'react-native-paper'; import {FAB, withTheme} from 'react-native-paper';
import * as Animatable from "react-native-animatable"; import * as Animatable from "react-native-animatable";
@ -20,7 +20,7 @@ const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
class TabHomeIcon extends React.Component<Props> { class TabHomeIcon extends React.Component<Props> {
focusedIcon = require('../../../assets/tab-icon.png'); 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) { constructor(props) {
super(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 { shouldComponentUpdate(nextProps: Props): boolean {
return (nextProps.focused !== this.props.focused); return (nextProps.focused !== this.props.focused);
} }
render(): React$Node { render(): React$Node {
const props = this.props; const props = this.props;
console.log(props.focused)
return ( return (
<View style={{ <View style={{
flex: 1, flex: 1,
@ -65,7 +77,7 @@ class TabHomeIcon extends React.Component<Props> {
useNativeDriver useNativeDriver
onPress={props.onPress} onPress={props.onPress}
onLongPress={props.onLongPress} onLongPress={props.onLongPress}
icon={this.focusedIcon} icon={this.iconRender}
style={{ style={{
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto' marginRight: 'auto'