Skip to content

Commit cf9c871

Browse files
ankit-tailorankit-tailor
authored
Merge pull request #326 from GeekyAnts/fix/responsive-demo-example
fix: responsive demo example
2 parents 558c144 + d0f4bb6 commit cf9c871

File tree

2 files changed

+72
-76
lines changed

2 files changed

+72
-76
lines changed

‎docs/3.4.x/responsive.md‎

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ All style props that arrays as values for responsive styles.
2626
For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do:
2727

2828
```jsx isLive=true
29-
import React from 'react';
30-
import { NativeBaseProvider, Center } from 'native-base';
29+
import React from "react";
30+
import { NativeBaseProvider, Center } from "native-base";
3131
function BreakpointExample() {
3232
return (
3333
<Center
3434
bg="emerald.400"
35-
_text={{ color: 'white' }}
35+
_text={{ color: "white" }}
3636
rounded="xl"
3737
w={[24, 48, 72]}
3838
h={24}
@@ -61,11 +61,11 @@ You can also define responsive values with breakpoint aliases in an object. Any
6161
For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do:
6262

6363
```jsx isLive=true
64-
import React from 'react';
65-
import { Text, Center } from 'native-base';
64+
import React from "react";
65+
import { Text, Center } from "native-base";
6666
function BreakpointExample() {
6767
return (
68-
<Text fontSize={{ base: 'md', md: 'lg', lg: 'xl' }}>
68+
<Text fontSize={{ base: "md", md: "lg", lg: "xl" }}>
6969
This is responsive text
7070
</Text>
7171
);
@@ -86,42 +86,41 @@ export function Example() {
8686
Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens.
8787

8888
```jsx isLive=true
89-
import React from 'react';
90-
import {
91-
useToken,
92-
NativeBaseProvider,
93-
Center,
94-
Text,
95-
Box,
96-
HStack,
97-
Image,
98-
Stack,
99-
Heading,
100-
} from 'native-base';
89+
import React from "react";
90+
import { Center, Text, Box, HStack, Image, Stack, Heading } from "native-base";
10191

10292
function App() {
10393
return (
10494
<Stack
105-
direction={['column', 'column', 'row']}
95+
direction={["column", "column", "row"]}
10696
rounded="lg"
10797
overflow="hidden"
108-
width={['72', '72', '4/6']}
98+
width={["72", "72", "4/6"]}
99+
height={["96", "96", "48"]}
109100
shadow="1"
110-
_light={{ backgroundColor: 'coolGray.50' }}
111-
_dark={{ backgroundColor: 'gray.700' }}
101+
_light={{
102+
backgroundColor: "coolGray.50",
103+
}}
104+
_dark={{
105+
backgroundColor: "gray.700",
106+
}}
112107
>
113-
<Box>
108+
<Box w={["100%", "100%", "40"]} h={["50%", "50%", "48"]}>
114109
<Image
115-
w={['100%', '100%', '40']}
110+
w={["100%", "100%", "40"]}
116111
h="100%"
117112
source={{
118-
uri: 'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg',
113+
uri: "https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg",
119114
}}
120115
alt="image"
121116
/>
122117
<Center
123118
bg="violet.500"
124-
_text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}
119+
_text={{
120+
color: "white",
121+
fontWeight: "700",
122+
fontSize: "xs",
123+
}}
125124
position="absolute"
126125
bottom="0"
127126
px="3"
@@ -130,7 +129,7 @@ function App() {
130129
PHOTOS
131130
</Center>
132131
</Box>
133-
<Stack flex="1" p="4" space={[3, 3, 1.5]}>
132+
<Stack flex="1" p="4" space={[3, 3, 1.5]} justifyContent="space-around">
134133
<Stack space="2">
135134
<Heading size="md" ml="-1">
136135
The Garden City
@@ -150,22 +149,21 @@ function App() {
150149
industry. The city is also known for its parks and nightlife.
151150
</Text>
152151
<HStack alignItems="center" space="4" justifyContent="space-between">
153-
<HStack alignItems="center">
154-
<Text
155-
color="coolGray.600"
156-
_dark={{ color: 'warmGray.200' }}
157-
fontWeight="400"
158-
>
159-
6 mins ago
160-
</Text>
161-
</HStack>
152+
<Text
153+
color="coolGray.600"
154+
_dark={{
155+
color: "warmGray.200",
156+
}}
157+
fontWeight="400"
158+
>
159+
6 mins ago
160+
</Text>
162161
</HStack>
163162
</Stack>
164163
</Stack>
165164
);
166-
}
165+
} // Example template which wraps component with NativeBaseProvider
167166
168-
// Example template which wraps component with NativeBaseProvider
169167
export function Example() {
170168
return (
171169
<Center flex={1}>

‎docs/next/responsive.md‎

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ All style props that arrays as values for responsive styles.
2626
For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do:
2727

2828
```jsx isLive=true
29-
import React from 'react';
30-
import { NativeBaseProvider, Center } from 'native-base';
29+
import React from "react";
30+
import { NativeBaseProvider, Center } from "native-base";
3131
function BreakpointExample() {
3232
return (
3333
<Center
3434
bg="emerald.400"
35-
_text={{ color: 'white' }}
35+
_text={{ color: "white" }}
3636
rounded="xl"
3737
w={[24, 48, 72]}
3838
h={24}
@@ -61,11 +61,11 @@ You can also define responsive values with breakpoint aliases in an object. Any
6161
For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do:
6262

6363
```jsx isLive=true
64-
import React from 'react';
65-
import { Text, Center } from 'native-base';
64+
import React from "react";
65+
import { Text, Center } from "native-base";
6666
function BreakpointExample() {
6767
return (
68-
<Text fontSize={{ base: 'md', md: 'lg', lg: 'xl' }}>
68+
<Text fontSize={{ base: "md", md: "lg", lg: "xl" }}>
6969
This is responsive text
7070
</Text>
7171
);
@@ -86,42 +86,41 @@ export function Example() {
8686
Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens.
8787

8888
```jsx isLive=true
89-
import React from 'react';
90-
import {
91-
useToken,
92-
NativeBaseProvider,
93-
Center,
94-
Text,
95-
Box,
96-
HStack,
97-
Image,
98-
Stack,
99-
Heading,
100-
} from 'native-base';
89+
import React from "react";
90+
import { Center, Text, Box, HStack, Image, Stack, Heading } from "native-base";
10191

10292
function App() {
10393
return (
10494
<Stack
105-
direction={['column', 'column', 'row']}
95+
direction={["column", "column", "row"]}
10696
rounded="lg"
10797
overflow="hidden"
108-
width={['72', '72', '4/6']}
98+
width={["72", "72", "4/6"]}
99+
height={["96", "96", "48"]}
109100
shadow="1"
110-
_light={{ backgroundColor: 'coolGray.50' }}
111-
_dark={{ backgroundColor: 'gray.700' }}
101+
_light={{
102+
backgroundColor: "coolGray.50",
103+
}}
104+
_dark={{
105+
backgroundColor: "gray.700",
106+
}}
112107
>
113-
<Box>
108+
<Box w={["100%", "100%", "40"]} h={["50%", "50%", "48"]}>
114109
<Image
115-
w={['100%', '100%', '40']}
110+
w={["100%", "100%", "40"]}
116111
h="100%"
117112
source={{
118-
uri: 'https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg',
113+
uri: "https://www.holidify.com/images/cmsuploads/compressed/Bangalore_citycover_20190613234056.jpg",
119114
}}
120115
alt="image"
121116
/>
122117
<Center
123118
bg="violet.500"
124-
_text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}
119+
_text={{
120+
color: "white",
121+
fontWeight: "700",
122+
fontSize: "xs",
123+
}}
125124
position="absolute"
126125
bottom="0"
127126
px="3"
@@ -130,7 +129,7 @@ function App() {
130129
PHOTOS
131130
</Center>
132131
</Box>
133-
<Stack flex="1" p="4" space={[3, 3, 1.5]}>
132+
<Stack flex="1" p="4" space={[3, 3, 1.5]} justifyContent="space-around">
134133
<Stack space="2">
135134
<Heading size="md" ml="-1">
136135
The Garden City
@@ -150,22 +149,21 @@ function App() {
150149
industry. The city is also known for its parks and nightlife.
151150
</Text>
152151
<HStack alignItems="center" space="4" justifyContent="space-between">
153-
<HStack alignItems="center">
154-
<Text
155-
color="coolGray.600"
156-
_dark={{ color: 'warmGray.200' }}
157-
fontWeight="400"
158-
>
159-
6 mins ago
160-
</Text>
161-
</HStack>
152+
<Text
153+
color="coolGray.600"
154+
_dark={{
155+
color: "warmGray.200",
156+
}}
157+
fontWeight="400"
158+
>
159+
6 mins ago
160+
</Text>
162161
</HStack>
163162
</Stack>
164163
</Stack>
165164
);
166-
}
165+
} // Example template which wraps component with NativeBaseProvider
167166
168-
// Example template which wraps component with NativeBaseProvider
169167
export function Example() {
170168
return (
171169
<Center flex={1}>

0 commit comments

Comments
 (0)