React-Native | ReferenceError: defaultStyles is not defined-CodePudding

I am trying to a prototype of an application which needs to be compatible on the web browser too. However I am having difficulties running it on the browser while it actually works in the android simulator.

I'm receiving the following error: ReferenceError: defaultStyles is not defined

This is currently my code. I don't see where I'm going wrong and is therefore turning my heads towards you with more knowledge.

import { StyleSheet } from "react-native";

export default defaultStyles = StyleSheet.create({
    textInput: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        padding: 10,
        width: 200
    },

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    centerHorizontal: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    centerVertical: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column'
    },

    centerCenter: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }


});

CodePudding user response：

change the export to :

export default StyleSheet.create({
....
});

CodePudding user response：

change export to const defaultStyles = StyleSheet.create({

at end use export { defaultStyles }

in page import {defaultStyles} from '../path/filename'

use style={defaultStyles.container}

use export default StyleSheet.create({

in page import [defaultStyles/ANY NAME] from '../path/filename'

use style={defaultStyles.container}

CodePudding user response：

I'd suggest you say:

const defaultStyles = Stylesheet.create({});

export default defaultStyles;