CODEWITHSUNDEEP
cssreactjsreact-nativeflexbox
JP.
JP.

Reputation: 1075

How to create a wrapper View and Container View inside the React Native using flexbox?

I want to create this UX design to React Native, but I'm wondering whats the best way to create this CSS design in the react-native?

FYI: I only care about the CSS for the outer wrapper( number 1 in the image below), container (number 2 in the image below) and then the items inside it.

enter image description here

Right now I have this code 

wrapper: {
    backgroundColor: palette.darkIndigo,
    height: size.huge * 4,
    width: '100%',
  },

  container: {
height: size.huge * 4,
    position: 'absolute',
    margin: size.medium-4,
    backgroundColor: palette.white,
    // width: '95%',
    width: size.huge*3 + size.large - 7,
  },

  1. How to provide separate background colors i.e blue and grey in the pic on number 2.

  2. Unable to give seperate background color using this:

    backgroundColor: linear-gradient(palette.darkIndigo '50%', palette.grey '0%')

I dont want to create seperate I'm looking for a css approach where where we can give 2 background colors to the same View.

Upvotes: 0

Views: 380

Answers (1)

JP.
JP.

Reputation: 1075

Got it resolved by simple solution: 

 wrapper: {
    // backgroundColor: palette.darkIndigo,
    backgroundColor: palette.lightgrey,
    height: size.huge * 4 + size.medium * 2,
    flex: 1,
  },
  container: {
    position: 'absolute',
    height: size.huge * 4 + size.medium,
    margin: size.medium - 4,
    backgroundColor: palette.white,
    width: size.huge * 3 + size.large - 7,
    borderBottomColor: palette.green,
  },
  indigoBackground:{
    height: size.huge*2 + 3,
    backgroundColor: palette.darkIndigo,
  },





<View style={style.wrapper}>

        <View style={style.indigoBackground} />
        <View style={style.container}>
          <View style={style.bannerImage}>

Upvotes: 0

Related Questions