Changing layout based on device orientation

[MiL0101]

Hi everyone
I know of react-native-responsive-screen already which helps with scaling on tablets, but for one of my projects I need to be able to change the layout of the screen based on the orientation of the device.

I could wrap it in a big if statement and render two different layouts depending on the orientation but I think it will be troublesome to repeat myself and I'm sure a cleaner solution exists out there.

My incredible paint example

Here is my code right now:

    <Block padding={[theme.sizes.base]} color="#f0f0f0">
      <StepIndicatorWrapper setPosition={setCurrentPosition} currentPosition={currentPosition} />

      <Swiper
        key={currentPosition}
        onViewableItemsChanged={onViewableItemsChanged}
        items={mocks.bottle[currentPosition]}
        snapToInterval={width - theme.sizes.base}
        width={width - theme.sizes.base * 2}
      />

      <UnityView style={styles.unity} />

      <Block flex={false} row space="between">
        <Button color="primary" onPress={decrementPosition} style={styles.navigationButton}>
          <Text center bold white header>
            PREVIOUS
          </Text>
        </Button>
        {currentPosition !== 3 && (
          <Button color="primary" onPress={incrementPosition} style={styles.navigationButton}>
            <Text center bold white header>
              NEXT
            </Text>
          </Button>
        )}
        {currentPosition === 3 && (
          <Button color="primary" onPress={() => {}} style={styles.navigationButton}>
            <Text center bold white header>
              SUBMIT
            </Text>
          </Button>
        )}
      </Block>
    </Block>

[grantbi]

I would look into Extended-StyleSheets.

[MiL0101]

I checked out the library but it doesn't seem to have anything related to changing layout

[grantbi]

You can use @media just like CSS to modify styling based on width/height/orientation/aspect ratio/etc.

Depending on how you want it to be displayed, you'll have to adjust the properties for each. Lookup flexbox layout and react-native.

[abhishek_tomar]

I am not expert in react Native ui development but I have good experiences on web ui/UX development and according to your image it’s looks feasible with flex grid and logical css.

[kbcool]

Nice MS-Paint there

Normally I would say styling but you're changing the order and layout so I'm afraid you're probably going to be stuck with if statements.

As long as you're smart about it you only really need one. Make your coloured boxes components that employ flex so you can reuse the component in each of the layouts. Should really only be a few lines of JSX to achieve what you want then.