kylefang/react-native-paper
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-paper.git synced 2026-06-11 08:13:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: properly center icons in bottom navigation

Browse Source
This commit is contained in:
Satyajit Sahoo
2018-06-05 14:22:32 +02:00
parent 7e1938e1de
commit e09b7429e7
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BottomNavigation.js
View File

@@ -623,10 +623,10 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
? shifting
? active.interpolate({
inputRange: [0, 1],
outputRange: [10, 0],
outputRange: [7, 0],
})
: 0
: 10;
: 7;
// We render the active icon and label on top of inactive ones and cross-fade them on change.
// This trick gives the illusion that we are animating between active and inactive colors.

32
src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
View File

@@ -127,7 +127,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -254,7 +254,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -381,7 +381,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -631,7 +631,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -758,7 +758,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -885,7 +885,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -1714,7 +1714,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -1821,7 +1821,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -1928,7 +1928,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -2035,7 +2035,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -3292,7 +3292,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -3481,7 +3481,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -4820,7 +4820,7 @@ exports[`renders shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -5009,7 +5009,7 @@ exports[`renders shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -5198,7 +5198,7 @@ exports[`renders shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,
@@ -5387,7 +5387,7 @@ exports[`renders shifting bottom navigation 1`] = `
"marginTop": 2,
"transform": Array [
Object {
"translateY": 10,
"translateY": 7,
},
],
"width": 24,