Make Android style default

[piu130]

Is your feature request related to a problem? Please Describe.
Currently there is no consistent style applied to components for react-native-web (Platform web), electron (Platform desktop), etc.

Describe the solution you'd like
We should set android style as default for all platforms.

Describe alternatives you've considered
We could set ios as default or create a third default style.

Additional context
Some examples:

• Avatar has no shadow
• Button is a bit random: here and here not android and here and here no style
• Button text is not bold
• ...

[iRoachie]

Sounds like a great idea, Can you make a PR to do this?

[iRoachie]

Also could you outline the steps you did to get react-native-web working? Would love to put it in the docs.

[piu130]

Created a PR here.

I use neutrino for the setup. Just create a new project as described here and select react.

Then add react-native-web, babel-preset-react-native, (react-art - is optional but for my setup it fails without it), react-native-elements and react-native-vector-icons with your package manager.

Currently you must add .web.js and .web.jsx to webpacks resolve extensions (see .neutrinorc.js below). But you can remove it with the next neutrino release (fixed here).

Then you must add the react-native modules to webpacks include (see .neutrinorc.js below), because webpack does not transpile node_modules (webpack assumes they are already transpiled).

My .neutrinorc.js looks like this:

const { join } = require('path');

const nodeModulesDir = join(__dirname, 'node_modules')

module.exports = {
  use: [
    [
      '@neutrinojs/react',
      {
        html: {
          title: 'test'
        }
      }
    ],
    (neutrino) => {
      neutrino.config.resolve.extensions.prepend('.web.jsx').prepend('.web.js')
      neutrino.config.module
        .rule('compile')
          .include
            // Add other modules that needs to be compiled by babel
            .add(join(nodeModulesDir, 'react-native-elements'))
            .add(join(nodeModulesDir, 'react-native-vector-icons'))
            .add(join(nodeModulesDir, 'react-native-touchable-scale'))
            .end();
    }
  ]
};

For react-native-vector-icons to work you should add (described here):

const style = document.createElement('style')

const materialIconsFont = require('react-native-vector-icons/Fonts/MaterialIcons.ttf')
const materialIconsFontStyles = `@font-face {
  src: url(${materialIconsFont});
  font-family: 'MaterialIcons';
}`
style.type = 'text/css'
style.appendChild(document.createTextNode(materialIconsFontStyles))

document.head.appendChild(style)