react-native-responsive-layout/examples/8-scrollable-grid.js at master · manicantic/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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { Block, Grid, Section } from 'react-native-responsive-layout';

const styles = StyleSheet.create({
  text: {
    textAlign: 'center',
    color: '#02326b',
    fontSize: 40,
    lineHeight: 80,
  },
});

export default () => (
  <Grid scrollable>
    <Section>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#c3defe' }}>
          <Text style={styles.text}>1</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#b2d4fe' }}>
          <Text style={styles.text}>2</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#a1cbfd' }}>
          <Text style={styles.text}>3</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#91c2fd' }}>
          <Text style={styles.text}>4</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#80b9fd' }}>
          <Text style={styles.text}>5</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#6faffd' }}>
          <Text style={styles.text}>6</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#5fa6fc' }}>
          <Text style={styles.text}>7</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#4e9dfc' }}>
          <Text style={styles.text}>8</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#3d94fc' }}>
          <Text style={styles.text}>9</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#2d8bfb' }}>
          <Text style={styles.text}>10</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#1c81fb' }}>
          <Text style={styles.text}>11</Text>
        </View>
      </Block>
      <Block xsSize="1/1" mdSize="1/2">
        <View style={{ backgroundColor: '#0b78fb' }}>
          <Text style={styles.text}>12</Text>
        </View>
      </Block>
    </Section>
  </Grid>
);