react-native-responsive-layout/examples/5-conditional-styling.js at master · axilis/react-native-responsive-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import { StyleSheet, View } from 'react-native';

import { Grid, Section, Block } from 'react-native-responsive-layout';
import { SizeInfo, withSizeInfo } from 'react-native-responsive-layout/wrappers';


const styles = StyleSheet.create({
  element: {
    height: '100%',
    justifyContent: 'center',
  },
  lightBackground: {
    backgroundColor: '#b2d4fe',
  },
  darkBackground: {
    backgroundColor: '#1c81fb',
  },
});


const WrappedComponent = withSizeInfo(({ sizeSelector }) => {
  const style = sizeSelector({
    xs: styles.lightBackground,
    sm: styles.darkBackground,
  });

  return (
    <View style={[styles.element, style]} />
  );
});


export default () => (
  <Grid>
    <Section>
      <Block>
        <WrappedComponent />
        <SizeInfo>
          {({ sizeSelector }) => {
            const style = sizeSelector({
              xs: styles.lightBackground,
              sm: styles.darkBackground,
            });
            return (
              <View style={[styles.element, style]} />
            );
          }}
        </SizeInfo>
      </Block>
    </Section>
  </Grid>
);