How to use the react-native-web.StyleSheet.create function in react-native-web

|};
const Div = props => createElement("div", props);
// eslint-disable-next-line react/no-multi-comp
const BackgroundGradient = (props: PropsType) => (
  <div style="{[">
    {props.children}
  </div>
);

const styles = StyleSheet.create({
  container: {
    position: "relative",
    display: "flex",
    flexDirection: "column",
  },
});

const makeGradient = (start, end, direction = "to bottom right") =&gt; ({
  backgroundColor: start,
  background: `linear-gradient(${direction}, ${start}, ${end})`,
});

export default BackgroundGradient;

{this.state.fetchingNextPage ?  : null}
      
    )
  }
}

interface Styles {
  container: ViewStyle,
  section: ViewStyle,
  spinner: ViewStyle,
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
  } as ViewStyle, // FIXME: Needed because `display` is not a prop that non-web RN has.
  section: {
    // flex: "1 0 0px",
    flex: 1,
    flexDirection: "column",
    marginRight: 20,
    maxWidth: 300,
  },
  spinner: {
    marginTop: 20,
  },
})

// @flow

import * as React from "react";
import { StyleSheet, View } from "react-native-web";

const BodyContainer = (props: Object) => (
  
);

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    width: "100%",
    maxWidth: 700,
    marginLeft: "auto",
    marginRight: "auto",
  },
});

export default BodyContainer;

const LONG_DELAY = 3500; // 3.5 seconds
const SHORT_DELAY = 2000; // 2 seconds

let Toast = {

  SHORT: SHORT_DELAY,
  LONG: LONG_DELAY,

  show: function(message, duration) {
    Portal.showModal('toast', );
    setTimeout(()=>Portal.closeModal('toast'), duration);
  },
};

let styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(0,0,0,.65)',
    color: '#ffffff',
    padding: '5 12',
    position: 'absolute',
    left: '50%',
    bottom: 20,
    fontSize: 14,
    lineHeight: 18,
    borderRadius: 2,
    transform: 'translateX(-50%)'
  },
});

export default Toast;

if (data.contact.state === 'ACCEPTED') {
      return 
    }

    const { profile } = data.contact

    return (
      
    )
  }
}

const styles = StyleSheet.create({
  loaderContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    marginTop: 3 * BASIC_SPACING,
    width: '50vw',
    minWidth: 450,
    maxWidth: 600,

)}
          
        )}
        <button title="Add contact" disabled="{!!errorMessage}">
      
    )
  }
}

const styles = StyleSheet.create({
  blocky: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: BASIC_SPACING,
  },
  errorMessage: {
    textAlign: 'left',
    color: COLORS.PRIMARY_RED,
    marginBottom: BASIC_SPACING,
    marginLeft: BASIC_SPACING,
  },
})
</button>

import { StyleSheet, View, Text } from "react-native-web";

const Editor = (props: Object) => (
  
);

const radius = 4;
const padding = 14;
const styles = StyleSheet.create({
  editor: {
    flexGrow: 1,
  },
  header: {
    borderTopLeftRadius: radius,
    borderTopRightRadius: radius,
    padding: padding,
    backgroundColor: "#12171C",
    borderBottomWidth: 1,
    borderBottomColor: "#0E1216",
  },
  headerText: {
    fontSize: 14,
    color: "rgba(203, 211, 219, 0.65)",
  },
  content: {

/>
            
            <button title="Done">
          
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    paddingHorizontal: BASIC_SPACING / 2,
    marginBottom: BASIC_SPACING / 2,
  },
  title: {
    fontSize: 18,
    color: COLORS.PRIMARY_BLUE,
    fontWeight: '600',
    padding: BASIC_SPACING,
  },
  userProfile: {
    flexDirection: 'column',
    width: '100%',
    paddingHorizontal: BASIC_SPACING,
    alignItems: 'center',</button>

textStyles.push(textStyle)
    }

    return (
      
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    height: INPUT_HEIGHT,
    backgroundColor: COLORS.PRIMARY_RED,
    borderRadius: INPUT_HEIGHT / 2,
    flex: 1,
    marginVertical: BASIC_SPACING,
    paddingHorizontal: BASIC_SPACING * 3,
    justifyContent: 'center',
    flexShrink: 0,
  },
  outlineContainer: {
    borderWidth: 2,
    borderColor: COLORS.PRIMARY_RED,
    backgroundColor: 'rgba(0,0,0,0)',
    height: INPUT_HEIGHT + 4,
    borderRadius: (INPUT_HEIGHT + 3) / 2,

} else {
      content = (
        
          {this.props.text}
        
      )
    }
    return (
      
        
      
    )
  }
}

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
  },
  text: {
    color: "white"
  }
})