rn-bottom-menu
Version:
React Native custom bottom menu
60 lines (59 loc) • 1.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.style = exports.TAB_BAR_HEIGHT = void 0;
var react_native_1 = require("react-native");
exports.TAB_BAR_HEIGHT = 80;
exports.style = react_native_1.StyleSheet.create({
container: {
flexDirection: 'row',
height: exports.TAB_BAR_HEIGHT,
backgroundColor: 'transparent',
},
bottomFill: {
width: '100%',
position: 'absolute',
left: 0,
right: 0,
},
fabButtonsContainer: {
position: 'absolute',
flex: 1,
flexDirection: 'row',
width: '100%',
// zIndex: -1,
height: exports.TAB_BAR_HEIGHT,
},
wrapper: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
zIndex: 9,
elevation: 12,
shadowColor: '#000',
shadowOffset: { width: 0, height: -3 },
shadowOpacity: 0.2,
shadowRadius: 4,
},
tabBarLabelWrapper: {
zIndex: 12,
alignItems: 'center',
},
focusedButton: {
position: 'absolute',
height: 60,
width: 60,
zIndex: -1,
borderRadius: 32,
elevation: 5,
justifyContent: 'center',
alignItems: 'center',
},
unfocusedButton: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
width: '100%',
zIndex: 12,
},
barShapeWrapper: { elevation: 11, zIndex: 0, backgroundColor: 'transparent' },
});