Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React-native-web compatibility + typescript typings #73

Merged
merged 11 commits into from
Feb 23, 2018
Merged

React-native-web compatibility + typescript typings #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
387fa8f
react-native-web fixes
PeterKottas Feb 23, 2018
eb37efb
Style fixes for web
PeterKottas Feb 23, 2018
c6117eb
Added typings
PeterKottas Feb 23, 2018
335b7a3
Typings fixes
PeterKottas Feb 23, 2018
53c8c55
More typings fixes
PeterKottas Feb 23, 2018
41bf747
badgeStyle types
PeterKottas Feb 23, 2018
e527923
Formating fix
PeterKottas Feb 23, 2018
82a2211
Types config
PeterKottas Feb 23, 2018
ef0a07f
Overflow issue on web + revert of padding
PeterKottas Feb 23, 2018
7081b57
Overflow issue again
PeterKottas Feb 23, 2018
22b3c2a
Unfortunate fix because overflow: visible is ignored for some reason
PeterKottas Feb 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ViewStyle, TextStyle } from 'react-native';
declare module 'react-native-material-bottom-navigation' {
export interface BottomNavigationProps {
activeTab?: number;
labelColor?: string;
activeLabelColor?: string;
rippleColor?: string;
backgroundColor?: string;
onTabChange?: (newTabIndex: number, oldTabIndex: number) => void;
style?: ViewStyle;
innerStyle?: ViewStyle;
shifting?: boolean;
}

export interface TabProps {
icon?: JSX.Element;
activeIcon?: JSX.Element;
label?: JSX.Element | string;
labelColor?: string;
activeLabelColor?: string;
barBackgroundColor?: string;
onPress?: (newTabIndex?: number) => void;
badgeText?: JSX.Element | string;
badgeSize?: number;
badgeStyle?: {
container?: ViewStyle,
text?: TextStyle
};
isBadgeVisible?: boolean;
}

export class BottomNavigation extends React.Component<BottomNavigationProps> { }
export class Tab extends React.Component<TabProps> { }
export default BottomNavigation;
}
6 changes: 4 additions & 2 deletions lib/BottomNavigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,8 +262,10 @@ export default class BottomNavigation extends Component {
// Ripple animations
setTimeout(() => {
// Make magic LayoutAnimation for next Layout Change
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)

if(Platform.OS !== 'web') {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
}

// Announce that the layout will change. This will cause, that
// `this._measure()` will be executed in `componentDidUpdate`
this.layoutWillChange = true
Expand Down
5 changes: 3 additions & 2 deletions lib/Tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,11 +299,12 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
paddingTop: 8,
paddingBottom: 10,
paddingBottom: (Platform.OS !== 'web' ? 10 : 0),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Web sets overflow hidden for all texts and there's not enough room to display it properly. This looks a bit odd but works

paddingLeft: 12,
paddingRight: 12,
backgroundColor: 'transparent',
position: "relative",
...(Platform.OS !== 'web' ? {} : { transition: '0.5s all' }),
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a comment, no change request:

Using transition to animate flex isn't really performant. https://csstriggers.com/flex-grow has a good explanation why. On a mobile browser with a mediocre phone, this could result in a laggy animation. But for now it's a very simple addition and I can't think of a better way from the top of my head.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah good point. Let's hope phone users will stick with mobile app then :D

I think to avoid the problem, it would probably have to be some width based approach which would definitely be harder to maintain or follow. I'll do some testing on a phone later on though just to check. I think by design, bottom bar should be 5 items or less, right? Wondering if that's "good enough" for performance. Or if it doesn't matter and it will have problems no matter the count of animated objects.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A method to make very smooth animations on web is FLIP. Here's the original article by Paul Lewis: https://aerotwist.com/blog/flip-your-animations/

I think for the scope of this PR, using transition should be enough. Maybe anything else is a bit too crazy.

},
shiftingInactiveContainer: {
maxWidth: 96,
Expand All @@ -322,7 +323,7 @@ const styles = StyleSheet.create({
fontSize: 14,
width: 168,
textAlign: 'center',
includeFontPadding: false,
...(Platform.OS !== 'web' ? { includeFontPadding: false } : {}),
textAlignVertical: 'center',
justifyContent: 'flex-end',
backgroundColor: 'transparent',
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react-component",
"react-navigation"
],
"types": "./index.d.ts",
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "1.9.1",
Expand Down