React Native Styling

Overview

Resources

Go to https://github.com/danielstern/styling-react-native. Really like Daniel.

Stylesheet.create()

Camel Case is used and an object created. There are no px suffixes for pixel values. Should work on all devices. The names do not necessary align with Android or IoS name. Only works on React components and not standard tags like div

const styles = Stylesheet.create({
   container: {
      backgroundColor: "white",
      height: 470.
   }
})

The snippet for this is rnss

Fixed Dimension

A brief example of fixed dimensions shows how to build a POC for a specified device. Whilst no good for release it is a lot quicker to build for one offs.

Images

Images need either a width of a height to show in react native. Without no image is shown. In the course they used this. I do like the hairlineWidth

...
export const Logo = () => (
    <Image source={img} style={styles.logo} />
)

const styles = StyleSheet.create({
    logo: {
        height: 110,
        borderBottomColor: 'darksteelblue',
        borderBottomWidth: StyleSheet.hairlineWidth
    }
});