diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 91e4606a6..000000000 --- a/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "react-native" - ], - "plugins": [ - "transform-decorators-legacy" - ] -} diff --git a/.circleci/config.yml b/.circleci/config.yml index d9f7fd273..507499e87 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,8 +3,13 @@ jobs: build: working_directory: ~/react-native-router-flux docker: - - image: circleci/node:7 + - image: circleci/node:8 steps: + - run: + name: temporary-eslint-airbnb-config-install + command: | + git clone https://github.com/airbnb/javascript.git ~/airbnb-style + cd ~/airbnb-style/ && yarn install - checkout - restore_cache: key: dependency-cache-{{ checksum "package.json" }} diff --git a/.eslintrc.js b/.eslintrc.js index da5260e96..7863b9355 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,70 +1,59 @@ module.exports = { extends: 'airbnb', - plugins: [ - 'react', - 'jest' - ], + plugins: ['react', 'jest'], env: { - "jest/globals": true + 'jest/globals': true, }, parser: 'babel-eslint', rules: { - "jest/no-disabled-tests": "warn", - "jest/no-focused-tests": "error", - "jest/no-identical-title": "error", - "jest/valid-expect": "error", - 'react/forbid-prop-types': 0, + 'no-new-func': 'warn', + 'jest/no-disabled-tests': 'warn', + 'jest/no-focused-tests': 'error', + 'jest/no-identical-title': 'error', + 'jest/valid-expect': 'error', + + 'react/forbid-prop-types': 'warn', + 'react/prop-types': 'off', + 'react/require-default-props': 'off', + 'react/no-unused-prop-types': 'off', + 'no-param-reassign': 0, 'no-console': 0, 'new-cap': 0, 'no-underscore-dangle': 0, 'no-use-before-define': 0, - 'max-len': ["error", 180], + 'max-len': ['error', 180], 'import/no-unresolved': [ 2, { - ignore: [ - '^react$', - '^react-native$', - '^react-native/', - ], + ignore: ['^react$', '^react-native$', '^react-native/'], }, ], + 'import/no-cycle': 'warn', + 'import/no-self-import': 'warn', 'react/jsx-filename-extension': [ 1, { - extensions: [ - '.js', - '.jsx', - ], + extensions: ['.js', '.jsx'], }, ], 'import/no-extraneous-dependencies': [ 'error', { - 'devDependencies': true, - } + devDependencies: true, + }, ], 'no-bitwise': [ 'error', { - 'allow': ['^'], + allow: ['^'], }, ], - 'no-restricted-syntax': [ - 'error', - 'ForInStatement', - 'LabeledStatement', - 'WithStatement', - ], + 'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'], }, settings: { 'import/resolver': { node: { - extensions: [ - '.js', - '.android.js', - '.ios.js', - ], + extensions: ['.js', '.android.js', '.ios.js'], }, }, node: true, diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..a62ca711c --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "printWidth": 180, + "singleQuote": true, + "semi": true, + "bracketSpacing": true, + "trailingComma": "all" +} diff --git a/Example/.babelrc b/Example/.babelrc deleted file mode 100644 index 91e4606a6..000000000 --- a/Example/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "react-native" - ], - "plugins": [ - "transform-decorators-legacy" - ] -} diff --git a/Example/.gitignore b/Example/.gitignore index 10be19751..05e924485 100644 --- a/Example/.gitignore +++ b/Example/.gitignore @@ -51,3 +51,4 @@ buck-out/ fastlane/report.xml fastlane/Preview.html fastlane/screenshots +node_modules/ \ No newline at end of file diff --git a/Example/Example.js b/Example/Example.js index 1fb051110..3b2cd6442 100644 --- a/Example/Example.js +++ b/Example/Example.js @@ -1,24 +1,12 @@ import React from 'react'; import { Platform, StyleSheet, Text, View } from 'react-native'; +import CardStackStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator'; +import { Scene, Router, Actions, Reducer, ActionConst, Overlay, Tabs, Modal, Drawer, Stack, Lightbox } from 'react-native-router-flux'; import Launch from './components/Launch'; import Register from './components/Register'; import Login from './components/Login'; import Login2 from './components/Login2'; import Login3 from './components/Login3'; -import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'; -import { - Scene, - Router, - Actions, - Reducer, - ActionConst, - Overlay, - Tabs, - Modal, - Drawer, - Stack, - Lightbox, -} from 'react-native-router-flux'; import Home from './components/Home'; import DrawerContent from './components/drawer/DrawerContent'; import TabView from './components/TabView'; @@ -28,13 +16,15 @@ import MessageBar from './components/MessageBar'; import ErrorModal from './components/modal/ErrorModal'; import DemoLightbox from './components/lightbox/DemoLightbox'; import MenuIcon from './images/menu_burger.png'; -import CustomNavBarView from "./components/CustomNavBarView"; -import CustomNavBar from "./components/CustomNavBar"; -import CustomNavBar2 from "./components/CustomNavBar2"; +import CustomNavBarView from './components/CustomNavBarView'; +import CustomNavBar from './components/CustomNavBar'; +import CustomNavBar2 from './components/CustomNavBar2'; const styles = StyleSheet.create({ container: { - flex: 1, backgroundColor: 'transparent', justifyContent: 'center', + flex: 1, + backgroundColor: 'transparent', + justifyContent: 'center', alignItems: 'center', }, tabBarStyle: { @@ -45,12 +35,8 @@ const styles = StyleSheet.create({ }, }); -const reducerCreate = params => { - const defaultReducer = new Reducer(params); - return (state, action) => { - console.log('ACTION:', action); - return defaultReducer(state, action); - }; +const stateHandler = (prevState, newState, action) => { + console.log('ACTION:', action); }; const getSceneStyle = () => ({ @@ -63,88 +49,34 @@ const getSceneStyle = () => ({ const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://'; const Example = () => ( - - + - ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })} - > + ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}> - + navigation.state.key} /> - - - - - + + + + + - + - + {/* Wrapper Scene needed to fix a bug where the tabs would reload as a modal ontop of itself */} - + ( navigationBarStyle={{ backgroundColor: 'green' }} titleStyle={{ color: 'white', alignSelf: 'center' }} > - alert('Right button')} - rightTitle="Right" - - /> + alert('Right button')} rightTitle="Right" /> - + - - Right} - /> - alert('onBack button!')} - hideDrawerButton - backTitle="Back!" - panHandlers={null} - /> + + Right} /> + alert('onBack button!')} hideDrawerButton backTitle="Back!" panHandlers={null} /> - - { }} - /> + + {}} /> - - + + @@ -219,30 +113,9 @@ const Example = () => ( - console.log('onExit')} - leftTitle="Cancel" - onLeft={Actions.pop} - /> - - + console.log('onExit')} leftTitle="Cancel" onLeft={Actions.pop} /> + + diff --git a/Example/babel.config.js b/Example/babel.config.js new file mode 100644 index 000000000..ad37a97c7 --- /dev/null +++ b/Example/babel.config.js @@ -0,0 +1,9 @@ +module.exports = { + presets: [ + 'react-native', + 'module:metro-react-native-babel-preset', + ], + plugins: [ + ['@babel/plugin-proposal-decorators', { legacy: true }], + ], +}; diff --git a/Example/components/CustomNavBar.js b/Example/components/CustomNavBar.js index 7798725d9..414fb55bd 100644 --- a/Example/components/CustomNavBar.js +++ b/Example/components/CustomNavBar.js @@ -1,21 +1,20 @@ -import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native' -import React from 'react' -import { Actions } from 'react-native-router-flux' +import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import React from 'react'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ container: { - height: (Platform.OS === 'ios') ? 64 : 54, + height: Platform.OS === 'ios' ? 64 : 54, flexDirection: 'row', paddingTop: 20, }, navBarItem: { flex: 1, - justifyContent: 'center' - } -}) + justifyContent: 'center', + }, +}); export default class CustomNavBar extends React.Component { - // constructor(props) { // super(props) // } @@ -23,74 +22,57 @@ export default class CustomNavBar extends React.Component { _renderLeft() { if (Actions.currentScene === 'customNavBar1') { return ( - console.log('Hamburger button pressed')} - style={[styles.navBarItem, { paddingLeft: 10}]}> - - - ) - } else { - return ( - + console.log('Hamburger button pressed')} style={[styles.navBarItem, { paddingLeft: 10 }]}> + source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png' }} + /> - ) + ); } + return ( + + + + ); } _renderMiddle() { return ( - { this.props.title } + {this.props.title} - ) + ); } _renderRight() { return ( - console.log('Share')} - style={{ paddingRight: 10}}> - + console.log('Share')} style={{ paddingRight: 10 }}> + - console.log('Search')} - style={{ paddingRight: 10 }}> - + console.log('Search')} style={{ paddingRight: 10 }}> + - ) + ); } render() { - let dinamicStyle = {} + let dinamicStyle = {}; if (Actions.currentScene === 'customNavBar1') { - dinamicStyle = { backgroundColor: 'red'} + dinamicStyle = { backgroundColor: 'red' }; } else { - dinamicStyle = { backgroundColor: 'yellow'} + dinamicStyle = { backgroundColor: 'yellow' }; } return ( - - { this._renderLeft() } - { this._renderMiddle() } - { this._renderRight() } - - ) + + {this._renderLeft()} + {this._renderMiddle()} + {this._renderRight()} + + ); } } diff --git a/Example/components/CustomNavBar2.js b/Example/components/CustomNavBar2.js index 8b15d6ef2..65b56c4a7 100644 --- a/Example/components/CustomNavBar2.js +++ b/Example/components/CustomNavBar2.js @@ -1,6 +1,8 @@ -import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native' -import React from 'react' -import { Actions } from 'react-native-router-flux' +import { + Image, Platform, StyleSheet, Text, TouchableOpacity, View, +} from 'react-native'; +import React from 'react'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ container: { @@ -11,12 +13,11 @@ const styles = StyleSheet.create({ }, navBarItem: { flex: 1, - justifyContent: 'center' - } -}) + justifyContent: 'center', + }, +}); export default class CustomNavBar extends React.Component { - // constructor(props) { // super(props) // } @@ -25,13 +26,15 @@ export default class CustomNavBar extends React.Component { return ( + style={[styles.navBarItem, { paddingLeft: 10 }]} + > + source={{ uri: 'https://image.flaticon.com/icons/png/512/0/340.png' }} + /> - ) + ); } _renderMiddle() { @@ -39,15 +42,15 @@ export default class CustomNavBar extends React.Component { { this.props.title } - ) + ); } render() { return ( - - { this._renderLeft() } - { this._renderMiddle() } - - ) + + { this._renderLeft() } + { this._renderMiddle() } + + ); } } diff --git a/Example/components/CustomNavBarView.js b/Example/components/CustomNavBarView.js index 56871f278..97099361a 100644 --- a/Example/components/CustomNavBarView.js +++ b/Example/components/CustomNavBarView.js @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {StyleSheet, Text, View, ViewPropTypes} from 'react-native'; +import { + StyleSheet, Text, View, ViewPropTypes, +} from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; @@ -24,9 +26,9 @@ const styles = StyleSheet.create({ class TabView extends React.Component { render() { return ( - + - + diff --git a/Example/components/EchoView.js b/Example/components/EchoView.js index 25fde5615..bee15f633 100644 --- a/Example/components/EchoView.js +++ b/Example/components/EchoView.js @@ -1,26 +1,26 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - borderWidth: 2, - borderColor: 'red', - }, - instructions: { - textAlign: "center", - color: "#333333", - marginBottom: 5, - }, - smaller: { - marginBottom: 5, - fontSize: 12, - }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + borderWidth: 2, + borderColor: 'red', + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, + smaller: { + marginBottom: 5, + fontSize: 12, + }, }); @@ -28,13 +28,13 @@ export default class extends React.Component { onEnter() { console.log('EchoView onEnter'); } - render(){ - return ( - - routeName: {this.props.name} - - - ); + + render() { + return ( + + routeName: {this.props.name} + + + ); } } - diff --git a/Example/components/Error.js b/Example/components/Error.js index d015be4fe..a9338058a 100644 --- a/Example/components/Error.js +++ b/Example/components/Error.js @@ -1,9 +1,11 @@ import React from 'react'; -import { View, Text, StyleSheet, Animated, Dimensions } from 'react-native'; +import { + View, Text, StyleSheet, Animated, Dimensions, +} from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; -const { height: deviceHeight } = Dimensions.get("window"); +const { height: deviceHeight } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { @@ -23,35 +25,37 @@ export default class extends React.Component { super(props); this.state = { - offset: new Animated.Value(-deviceHeight) + offset: new Animated.Value(-deviceHeight), }; } componentDidMount() { Animated.timing(this.state.offset, { duration: 150, - toValue: 0 + toValue: 0, }).start(); } closeModal() { Animated.timing(this.state.offset, { duration: 150, - toValue: -deviceHeight + toValue: -deviceHeight, }).start(Actions.pop); } render() { return ( + { transform: [{ translateY: this.state.offset }] }]} + > + backgroundColor: 'white', + }} + > {this.props.data} diff --git a/Example/components/Home.js b/Example/components/Home.js index beed44b6e..c5769bebe 100644 --- a/Example/components/Home.js +++ b/Example/components/Home.js @@ -1,36 +1,36 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; -var styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - }, - welcome: { - fontSize: 20, - textAlign: "center", - margin: 10, - }, - instructions: { - textAlign: "center", - color: "#333333", - marginBottom: 5, - }, +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, }); class Home extends React.Component { - render(){ - return ( - - Replace screen - - - ); - } + render() { + return ( + + Replace screen + + + ); + } } module.exports = Home; diff --git a/Example/components/Launch.js b/Example/components/Launch.js index 338767b30..3d2fa29d2 100644 --- a/Example/components/Launch.js +++ b/Example/components/Launch.js @@ -1,5 +1,7 @@ import React from 'react'; -import { View, Text, StyleSheet, Button } from 'react-native'; +import { + View, Text, StyleSheet, Button, +} from 'react-native'; import { Actions } from 'react-native-router-flux'; import { MessageBarManager } from 'react-native-message-bar'; @@ -20,7 +22,7 @@ class Launch extends React.Component { - + + ); diff --git a/Example/components/Login2.js b/Example/components/Login2.js index 234bbe591..a63d51458 100644 --- a/Example/components/Login2.js +++ b/Example/components/Login2.js @@ -1,29 +1,29 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, }); export default class extends React.Component { - render(){ - const title = this.props.title || 'No Title'; - const data = this.props.data || 'No Data'; - return ( - - Login page 2 - Title: {title} - Data: {data} - - - - ); - } + render() { + const title = this.props.title || 'No Title'; + const data = this.props.data || 'No Data'; + return ( + + Login page 2 + Title: {title} + Data: {data} + + + + ); + } } diff --git a/Example/components/Login3.js b/Example/components/Login3.js index 63cf44bf2..17fc3c769 100644 --- a/Example/components/Login3.js +++ b/Example/components/Login3.js @@ -1,43 +1,43 @@ import React from 'react'; -import {View, Text, StyleSheet} from "react-native"; -import Button from "react-native-button"; -import {Actions} from "react-native-router-flux"; +import { View, Text, StyleSheet } from 'react-native'; +import Button from 'react-native-button'; +import { Actions } from 'react-native-router-flux'; const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF", - }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, }); const popToRoot = () => { - Actions.popTo("launch"); + Actions.popTo('launch'); }; const popToLogin1 = () => { - Actions.popTo("loginModal"); + Actions.popTo('loginModal'); }; const popToLogin2 = () => { - Actions.popTo("loginModal2"); + Actions.popTo('loginModal2'); }; export default class extends React.Component { - render(){ - const title = this.props.title || 'No Title'; - const data = this.props.data || 'No Data'; - return ( - - Login page 3 - Title: {title} - Data: {data} - - - - - - ); - } + render() { + const title = this.props.title || 'No Title'; + const data = this.props.data || 'No Data'; + return ( + + Login page 3 + Title: {title} + Data: {data} + + + + + + ); + } } diff --git a/Example/components/Register.js b/Example/components/Register.js index bd81f38bd..729193595 100644 --- a/Example/components/Register.js +++ b/Example/components/Register.js @@ -12,13 +12,13 @@ const styles = StyleSheet.create({ }, }); -export default class Register extends React.Component { - render() { - return - Register page - - - - - } -} +const Register = () => ( + + Register page + + + + +); + +export default Register; diff --git a/Example/components/TabIcon.js b/Example/components/TabIcon.js index b97fbe417..3cd0f5eba 100644 --- a/Example/components/TabIcon.js +++ b/Example/components/TabIcon.js @@ -5,17 +5,22 @@ import { } from 'react-native'; const propTypes = { - selected: PropTypes.bool, + focused: PropTypes.bool, title: PropTypes.string, }; -const TabIcon = (props) => { - return {props.title} - +const defaultProps = { + focused: false, + title: '', }; +const TabIcon = props => ( + + {props.title} + +); + TabIcon.propTypes = propTypes; +TabIcon.defaultProps = defaultProps; export default TabIcon; diff --git a/Example/components/TabView.js b/Example/components/TabView.js index 3126ab7fa..600980e39 100644 --- a/Example/components/TabView.js +++ b/Example/components/TabView.js @@ -1,13 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { StyleSheet, Text, View, ViewPropTypes } from "react-native"; +import { StyleSheet, Text, View, ViewPropTypes } from 'react-native'; import Button from 'react-native-button'; import { Actions } from 'react-native-router-flux'; const propTypes = { - name: PropTypes.string, + name: PropTypes.string.isRequired, + data: PropTypes.string, sceneStyle: ViewPropTypes.style, - title: PropTypes.string, + title: PropTypes.string.isRequired, +}; + +const defaultProps = { + sceneStyle: null, }; const styles = StyleSheet.create({ @@ -22,37 +27,76 @@ const styles = StyleSheet.create({ }); class TabView extends React.Component { - state = { hideNavBar: false } + state = { hideNavBar: false }; toggleNavBar = () => { - this.setState({ hideNavBar: !this.state.hideNavBar }, () => - Actions.refresh({ hideNavBar: this.state.hideNavBar }) - ); - } + this.setState(prevState => ({ hideNavBar: !prevState.hideNavBar }), () => Actions.refresh({ hideNavBar: this.state.hideNavBar })); + }; render() { return ( - Tab title:{this.props.title} name:{this.props.name} - Tab data:{this.props.data} - {this.props.name === 'tab_1_1' && - - } - {this.props.name === 'tab_2_1' && - - } + + Tab title:{this.props.title} name:{this.props.name} + + Tab data: {this.props.data} + {this.props.name === 'tab_1_1' && } + {this.props.name === 'tab_2_1' && } - - - - - - - + + + + + + + ); } } TabView.propTypes = propTypes; +TabView.defaultProps = defaultProps; export default TabView; diff --git a/Example/components/drawer/DrawerContent.js b/Example/components/drawer/DrawerContent.js index c5fdf1f64..0ae69289a 100644 --- a/Example/components/drawer/DrawerContent.js +++ b/Example/components/drawer/DrawerContent.js @@ -20,11 +20,11 @@ class DrawerContent extends React.Component { name: PropTypes.string, sceneStyle: ViewPropTypes.style, title: PropTypes.string, - } + }; static contextTypes = { drawer: PropTypes.object, - } + }; render() { return ( @@ -32,20 +32,22 @@ class DrawerContent extends React.Component { {/* Drawer Content */} Title: {this.props.title} - {this.props.name === 'tab_1_1' && - - } - {this.props.name === 'tab_2_1' && - - } + {this.props.name === 'tab_1_1' && } + {this.props.name === 'tab_2_1' && } - - + + - + ); } } diff --git a/Example/components/lightbox/BaseLightbox.js b/Example/components/lightbox/BaseLightbox.js index 44e995636..7df4d95a6 100644 --- a/Example/components/lightbox/BaseLightbox.js +++ b/Example/components/lightbox/BaseLightbox.js @@ -10,7 +10,7 @@ export default class BaseLightbox extends Component { children: PropTypes.any, horizontalPercent: PropTypes.number, verticalPercent: PropTypes.number, - } + }; constructor(props) { super(props); @@ -22,17 +22,17 @@ export default class BaseLightbox extends Component { componentDidMount() { Animated.timing(this.state.opacity, { - duration: 100, + duration: 500, toValue: 1, }).start(); } closeModal = () => { Animated.timing(this.state.opacity, { - duration: 100, + duration: 500, toValue: 0, }).start(Actions.pop); - } + }; _renderLightBox = () => { const { children, horizontalPercent = 1, verticalPercent = 1 } = this.props; @@ -45,21 +45,17 @@ export default class BaseLightbox extends Component { height, justifyContent: 'center', alignItems: 'center', - backgroundColor: 'white', + backgroundColor: 'rgba(255,255,255,0.9)', }} > {children}