Skip to content

Commit fd45ee4

Browse files
YoussefHennaYoussefHenna
authored
Merge pull request #615 from draftbit/@YoussefHenna/add_nativebase_layout
Nativebase: Readd Removed Components + Removed Container
2 parents b6aac63 + ecf00cd commit fd45ee4

File tree

13 files changed

+697
-19
lines changed

13 files changed

+697
-19
lines changed

‎example/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import CardContainerExample from "./CardContainerExample";
3030
import CardContainerRatingExample from "./CardContainerRatingExample";
3131

3232
import CarouselExample from "./CarouselExample";
33+
import ContainerExample from "./ContainerExample";
3334
// import ControllerExample from "./ControllerExample";
3435

3536
import DatePickerExample from "./DatePickerExample";
@@ -47,6 +48,7 @@ import PickerExample from "./PickerExample";
4748

4849
// import ProgressIndicatorExample from "./ProgressIndicatorExample.js";
4950
// import ProgressExample from "./ProgressExample";
51+
// import RowExample from "./RowExample";
5052

5153
import SliderExample from "./SliderExample";
5254
import SwitchExample from "./SwitchExample";
@@ -99,6 +101,7 @@ const ROUTES = {
99101
CardContainer: CardContainerExample,
100102
CardContainerRating: CardContainerRatingExample,
101103
Carousel: CarouselExample,
104+
Container: ContainerExample,
102105
CircleImage: CircleImageExample,
103106
// Controllers: ControllerExample,
104107
DatePicker: DatePickerExample,
@@ -111,6 +114,8 @@ const ROUTES = {
111114
Picker: PickerExample,
112115
// ProgressBar: ProgressExample,
113116
// ProgressIndicator: ProgressIndicatorExample,
117+
// TODO fix Row (spacing problem)
118+
// Row: RowExample,
114119
// TODO (componentWillReceieveProps insider slider component)
115120
Slider: SliderExample,
116121
Switch: SwitchExample,

‎example/src/ContainerExample.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as React from "react";
2+
import { Text } from "react-native";
3+
import Section, { Container as ExampleContainer } from "./Section";
4+
import { Container, withTheme } from "@draftbit/ui";
5+
6+
const IMAGE =
7+
"https://res.cloudinary.com/altos/image/upload/w_600,f_auto,c_scale/draftbit/components/Image.png";
8+
9+
function ContainerExample({ theme }) {
10+
return (
11+
<ExampleContainer style={{ backgroundColor: theme.colors.background }}>
12+
<Section title="Container with no theme gutter padding)">
13+
<Container style={{ paddingVertical: 16 }}>
14+
<Text>Container without theme gutter padding</Text>
15+
</Container>
16+
</Section>
17+
18+
<Section title="Container with theme gutter padding)">
19+
<Container useThemeGutterPadding style={{ paddingVertical: 16 }}>
20+
<Text>Container with theme gutter padding</Text>
21+
</Container>
22+
</Section>
23+
24+
<Section title="Container with background color">
25+
<Container backgroundColor="#ff0000" style={{ paddingVertical: 16 }}>
26+
<Text>Container with background color</Text>
27+
</Container>
28+
</Section>
29+
30+
<Section title="Container with Background Image">
31+
<Container
32+
backgroundImage={IMAGE}
33+
style={{
34+
paddingVertical: 16,
35+
height: 300,
36+
}}
37+
>
38+
<Text>Container with background image</Text>
39+
</Container>
40+
</Section>
41+
42+
<Section title="Container with Background Image and resizeMode=cover">
43+
<Container
44+
backgroundImage={IMAGE}
45+
backgroundImageResizeMode="cover"
46+
style={{
47+
paddingVertical: 16,
48+
width: 300,
49+
height: 300,
50+
}}
51+
>
52+
<Text>Container with background image and resize mode cover</Text>
53+
</Container>
54+
</Section>
55+
56+
<Section title="Container with Background Image and resizeMode=contain">
57+
<Container
58+
backgroundImage={IMAGE}
59+
backgroundImageResizeMode="contain"
60+
style={{
61+
paddingVertical: 16,
62+
width: 300,
63+
height: 300,
64+
}}
65+
>
66+
<Text>Container with background image and resize mode cover</Text>
67+
</Container>
68+
</Section>
69+
70+
<Section title="Container with random borderColor">
71+
<Container
72+
style={{
73+
paddingVertical: 16,
74+
borderColor: "#39ff14",
75+
borderWidth: 10,
76+
}}
77+
>
78+
<Text>Container with borderColor</Text>
79+
</Container>
80+
</Section>
81+
</ExampleContainer>
82+
);
83+
}
84+
85+
export default withTheme(ContainerExample);

‎example/src/RowExample.js‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import * as React from "react";
2+
import {
3+
RowHeadlineImageIcon,
4+
RowHeadlineImageCaption,
5+
RowBodyIcon,
6+
withTheme,
7+
RowBodySwitch,
8+
} from "@draftbit/ui";
9+
import Section, { Container } from "./Section";
10+
11+
const IMAGE_URL =
12+
"https://res.cloudinary.com/altos/image/upload/c_scale,q_auto,dpr_auto,w_100/Avatar.png";
13+
14+
function RowExample({ theme }) {
15+
return (
16+
<Container style={{ backgroundColor: theme.colors.background }}>
17+
<Section title="RowSingleLineHeadlineImageIcon">
18+
<RowHeadlineImageIcon title="Headline" icon="check" image={IMAGE_URL} />
19+
</Section>
20+
21+
<Section title="RowSingleLineHeadlineImageIcon">
22+
<RowHeadlineImageIcon
23+
title="Headline that is quite long so that it won't fit on a single line"
24+
icon="check"
25+
image={IMAGE_URL}
26+
/>
27+
</Section>
28+
29+
<Section title="RowSingleLineHeadlineIcon">
30+
<RowHeadlineImageIcon title="Headline" icon="check" />
31+
</Section>
32+
33+
<Section title="RowSingleLineHeadlineIcon with long title">
34+
<RowHeadlineImageIcon
35+
title="Headline that is quite long so that it won't fit on a single line"
36+
icon="check"
37+
/>
38+
</Section>
39+
40+
<Section title="RowDoubleLineHeadlineImageIcon">
41+
<RowHeadlineImageIcon
42+
title="Headline"
43+
subtitle="Subtitle"
44+
icon="check"
45+
image={IMAGE_URL}
46+
/>
47+
</Section>
48+
49+
<Section title="RowDoubleLineHeadlineImageIcon with long title and subtitle">
50+
<RowHeadlineImageIcon
51+
title="Headline that is quite long so that it won't fit on a single line"
52+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
53+
icon="check"
54+
image={IMAGE_URL}
55+
/>
56+
</Section>
57+
58+
<Section title="RowMultiLineHeadlineImageIcon with long title and subtitle">
59+
<RowHeadlineImageIcon
60+
title="Headline that is quite long so that it won't fit on a single line"
61+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
62+
multilineSubtitle
63+
icon="check"
64+
image={IMAGE_URL}
65+
/>
66+
</Section>
67+
<Section title="RowDoubleLineHeadlineIcon">
68+
<RowHeadlineImageIcon
69+
title="Headline"
70+
subtitle="Subtitle"
71+
icon="check"
72+
/>
73+
</Section>
74+
<Section title="RowDoubleLineHeadlineIcon with long title">
75+
<RowHeadlineImageIcon
76+
title="Headline that is quite long so that it won't fit on a single line"
77+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
78+
icon="check"
79+
/>
80+
</Section>
81+
<Section title="RowMultiLineHeadlineIcon with long title">
82+
<RowHeadlineImageIcon
83+
title="Headline that is quite long so that it won't fit on a single line"
84+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
85+
multilineSubtitle
86+
icon="check"
87+
/>
88+
</Section>
89+
<Section title="RowSingleLineHeadlineImageCaption">
90+
<RowHeadlineImageCaption
91+
title="Headline"
92+
caption="Caption"
93+
image={IMAGE_URL}
94+
/>
95+
</Section>
96+
<Section title="RowSingleLineHeadlineImageCaption with long title">
97+
<RowHeadlineImageCaption
98+
title="Headline that is quite long so that it won't fit on a single line"
99+
caption="Caption"
100+
image={IMAGE_URL}
101+
/>
102+
</Section>
103+
<Section title="RowSingleLineHeadlineCaption">
104+
<RowHeadlineImageCaption title="Headline" caption="Caption" />
105+
</Section>
106+
<Section title="RowSingleLineHeadlineCaption with long title">
107+
<RowHeadlineImageCaption
108+
title="Headline that is quite long so that it won't fit on a single line"
109+
caption="Caption"
110+
/>
111+
</Section>
112+
<Section title="RowDoubleLineHeadlineImageCaption">
113+
<RowHeadlineImageCaption
114+
title="Headline"
115+
subtitle="Subtitle"
116+
caption="Caption"
117+
image={IMAGE_URL}
118+
/>
119+
</Section>
120+
<Section title="RowDoubleLineHeadlineImageCaption with long title">
121+
<RowHeadlineImageCaption
122+
title="Headline that is quite long so that it won't fit on a single line"
123+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
124+
caption="Caption"
125+
image={IMAGE_URL}
126+
/>
127+
</Section>
128+
<Section title="RowDoubleLineHeadlineCaption">
129+
<RowHeadlineImageCaption
130+
title="Headline"
131+
subtitle="Subtitle"
132+
caption="Caption"
133+
/>
134+
</Section>
135+
<Section title="RowDoubleLineHeadlineCaption with long title">
136+
<RowHeadlineImageCaption
137+
title="Headline that is quite long so that it won't fit on a single line"
138+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
139+
caption="Caption"
140+
/>
141+
</Section>
142+
<Section title="RowSingleLineBodyIcon">
143+
<RowBodyIcon title="Headline" icon="check" />
144+
</Section>
145+
<Section title="RowSingleLineBodyIcon with long title">
146+
<RowBodyIcon
147+
title="Headline that is quite long so that it won't fit on a single line"
148+
icon="check"
149+
/>
150+
</Section>
151+
<Section title="RowDoubleLineBodyIcon">
152+
<RowBodyIcon title="Headline" subtitle="Subtitle" icon="check" />
153+
</Section>
154+
<Section title="RowDoubleLineBodyIcon with long title and subtitle">
155+
<RowBodyIcon
156+
title="Headline that is quite long so that it won't fit on a single line"
157+
subtitle="Subtitle that is quite long so that it won't fit on a single line"
158+
icon="check"
159+
/>
160+
</Section>
161+
<Section title="RowBodySwitch with title and subtitle">
162+
<RowBodySwitch title="Headline" subtitle="subtitle" value={true} />
163+
</Section>
164+
<Section title="RowBodySwitch with title only">
165+
<RowBodySwitch title="Headline" value={true} />
166+
</Section>
167+
</Container>
168+
);
169+
}
170+
171+
export default withTheme(RowExample);

0 commit comments

Comments
 (0)