React v15: inline styles with fallbacks (eg: display: flex) do not work

[MoOx]

Hi,

I am just starting with react-native-web and I am not using (yet?) the AppRegistry.
I just configured the react-native alias to be able to start using some component.
I made a simple test with a View with childrens. This view is a navigation bar and I want to use flexbox.

/* @flow */

import { Element } from "react"
import React, { StyleSheet, View, Text } from "react-native"

import * as colors from "../colors.js"

type Props = {
  styles: Object,
  leftChildren: ReactClass,
  children: Element,
  rightChildren: ReactClass,
}

const NavigationBar = (props: Props): Element => {
  const {
    leftChildren: Left,
    rightChildren: Right,
  } = props

  return (
    <View
      style={ {
        ...styles.bar,
        ...props.styles,
      } }
      accessibilityRole={ "menubar" }
    >
      <View style={ styles.left }>
        { Left && <Left /> }
        <Text>{ "logo" }</Text>
      </View>
      <View style={ styles.center }>
        { props.children }
      </View>
      <View style={ styles.right }>
        { Right && <Right /> }
      </View>
    </View>
  )
}

NavigationBar.defaultProps = {
  styles: {},
  leftChildren: null,
  children: null,
  rightChildren: null,
}

const styles = StyleSheet.create({
  bar: {
    display: "flex",
    flexGrow: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    padding: "1rem",

    color: colors.white.toString(),
    backgroundColor: colors.blue.toString(),
  },
  left: {
    display: "flex",
    justifyContent: "flex-start",
  },
  center: {
    display: "flex",
    justifyContent: "center",
  },
  right: {
    display: "flex",
    justifyContent: "flex-end",
  },
})

export default NavigationBar

As you might notice, I specified display: "flex" for styles.bar since I was thinking it's missing. You mentioned in the doc that it should be the default (just like for facebook/css-layout), but I tried just in case. And even when adding this property, it was "ignored". I tried on Chrome and Firefox, same thing.

Am I missing the "global" default css somehow?

[MoOx]

I want to add that I am checking the missing "display: flex" using DOM dev tools, and if I add it by hand using inline styles element, it "works" (yeah it's weird to say "it works" for this case).

[MoOx]

After some digging, I found that the "bug" came from inline-style-prefix-all.
Well it doesn't seems to be a real bug. "Just" an incompatibility with React v15 (which now use createElement and not innerHTML anymore).

A change has just been pushed recently to inline-style-prefix-all robinweser/inline-style-prefix-all#7 (following robinweser/inline-style-prefixer#78)

Not sure why I am getting inline styles and not CSS tho. I didn't find anything clear enough in to "trigger" CSS (which should help in my case).

[necolas]

I think this is ok in 0.0.25. When I upgrade the prefixer I'll check that things are handled correctly.

[bmcmahen]

I'm running into the same issue. display: flex is not being added to any of my view elements when using inline-styles. It works fine when using AppRegistry, however.

[necolas]

Don't use React 15 with [email protected]. It requires a peer dependency of React 0.0.14.

[necolas]

This issue is pretty bad because React 15 has no way to handle fallback values now. It was an undocumented feature, but used by many styling libraries, and there is no alternative API yet. To unblock most browsers I'm going to drop all fallbacks and render with the standard value. Can work out how to extend browser support after that.