Skip to content

Commit

Permalink
Merge pull request #4566 from GeekyAnts/release/3.3.4-rc.0
Browse files Browse the repository at this point in the history 
release 3.3.4-rc.0
  • Loading branch information
@surajahmed
surajahmed authored Jan 21, 2022
2 parents 2db51cb + a442c7c commit ab057ac
Show file tree
Hide file tree
Showing 26 changed files with 352 additions and 350 deletions.
9 changes: 1 addition & 8 deletions example/storybook/stories/components/basic/FlatList/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
Text,
Spacer,
} from 'native-base';

export const Example = () => {
const data = [
{
Expand Down Expand Up @@ -52,14 +51,8 @@ export const Example = () => {
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU',
},
];

return (
<Box
w={{
base: '100%',
md: '25%',
}}
>
<Box>
<Heading fontSize="xl" p="4" pb="3">
Inbox
</Heading>
Expand Down
38 changes: 15 additions & 23 deletions example/storybook/stories/components/basic/KeyboardAvoidingView/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,30 @@ import {
Button,
VStack,
Heading,
useBreakpointValue,
Center,
} from 'native-base';
import { Platform } from 'react-native';

export const Example = () => {
const isLargeScreen = useBreakpointValue({
base: false,
sm: false,
md: false,
lg: true,
});
return (
<KeyboardAvoidingView
h={{ base: '400px', lg: 'auto' }}
h={{
base: '400px',
lg: 'auto',
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<VStack p="6" flex="1" justifyContent="flex-end">
<Heading fontSize={36} mb="3">
Forgot Password
</Heading>
<Text>
Not to worry! Enter email address associated with your account and
we’ll send a link to reset your password.
</Text>
<Input placeholder="Email Address" mt="10" mb="4" />
<Button mb="4">Proceed</Button>
{isLargeScreen ? (
<Text>
Please see the example in your mobile to observe the effect.
<Center>
<VStack flex="1" justifyContent="flex-end" w="100%" maxW="300">
<Heading mb="3">Forgot Password</Heading>
<Text color="muted.400">
Not to worry! Enter email address associated with your account and
we’ll send a link to reset your password.
</Text>
) : null}
</VStack>
<Input placeholder="Email Address" mt="10" mb="4" />
<Button mb="4">Proceed</Button>
</VStack>
</Center>
</KeyboardAvoidingView>
);
};
92 changes: 51 additions & 41 deletions example/storybook/stories/components/basic/ScrollView/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,56 @@ import { ScrollView, VStack, Center, useTheme, Heading } from 'native-base';
export const Example = () => {
const { colors } = useTheme();
return (
<ScrollView _contentContainerStyle={{ px: '20px', mb: '4', minW: '72' }}>
<Center mt="3" mb="4">
<Heading fontSize="xl">Cyan</Heading>
</Center>
<VStack flex="1">
{Object.keys(colors.cyan).map((key, index) => {
if (index >= 1 && index <= 5)
return (
<Center py="4" bg={`cyan.${key}`}>
{key}
</Center>
);
})}
</VStack>
<Center mt="8" mb="4">
<Heading fontSize="xl">Yellow</Heading>
</Center>
<VStack flex="1">
{Object.keys(colors.cyan).map((key, index) => {
if (index >= 1 && index <= 5)
return (
<Center py="4" bg={`yellow.${key}`}>
{key}
</Center>
);
})}
</VStack>
<Center mt="8" mb="4">
<Heading fontSize="xl"> Violet</Heading>
</Center>
<VStack flex="1">
{Object.keys(colors.violet).map((key, index) => {
if (index >= 1 && index <= 5)
return (
<Center py="4" bg={`violet.${key}`}>
{key}
</Center>
);
})}
</VStack>
</ScrollView>
<Center>
<ScrollView
maxW="300"
h="80"
_contentContainerStyle={{
px: '20px',
mb: '4',
minW: '72',
}}
>
<Center mt="3" mb="4">
<Heading fontSize="xl">Cyan</Heading>
</Center>
<VStack flex="1">
{Object.keys(colors.cyan).map((key, index) => {
if (index >= 1 && index <= 5)
return (
<Center py="4" bg={`cyan.${key}`}>
{key}
</Center>
);
})}
</VStack>
<Center mt="8" mb="4">
<Heading fontSize="xl">Yellow</Heading>
</Center>
<VStack flex="1">
{Object.keys(colors.cyan).map((key, index) => {
if (index >= 1 && index <= 5)
return (
<Center py="4" bg={`yellow.${key}`}>
{key}
</Center>
);
})}
</VStack>
<Center mt="8" mb="4">
<Heading fontSize="xl"> Violet</Heading>
</Center>
<VStack flex="1">
{Object.keys(colors.violet).map((key, index) => {
if (index >= 1 && index <= 5)
return (
<Center py="4" bg={`violet.${key}`}>
{key}
</Center>
);
})}
</VStack>
</ScrollView>
</Center>
);
};
40 changes: 21 additions & 19 deletions example/storybook/stories/components/basic/SectionList/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,27 @@ export const Example = () => {
],
},
];

return (
<SectionList
px="12"
mb="4"
sections={data}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<Center py="4" minW="64" bg={item}>
{item.split('.')[1]}
</Center>
)}
renderSectionHeader={({ section: { title } }) => (
<Center>
<Heading fontSize="xl" mt="8" pb="4">
{title}
</Heading>
</Center>
)}
/>
<Center h="80">
<SectionList
maxW="300"
w="100%"
mb="4"
sections={data}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => (
<Center py="4" bg={item}>
{item.split('.')[1]}
</Center>
)}
renderSectionHeader={({ section: { title } }) => (
<Center>
<Heading fontSize="xl" mt="8" pb="4">
{title}
</Heading>
</Center>
)}
/>
</Center>
);
};
4 changes: 2 additions & 2 deletions example/storybook/stories/components/composites/Transitions/Fade.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);

return (
<>
<Center>
<Button onPress={() => setIsOpen(!isOpen)}>
{isOpen ? 'Hide' : 'Show'}
</Button>
Expand All @@ -25,6 +25,6 @@ export const Example = () => {
Fade
</Center>
</PresenceTransition>
</>
</Center>
);
};
4 changes: 2 additions & 2 deletions example/storybook/stories/components/composites/Transitions/ScaleFade.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);

return (
<>
<Center>
<Button onPress={() => setIsOpen(!isOpen)}>
{isOpen ? 'Hide' : 'Show'}
</Button>
Expand All @@ -17,6 +17,6 @@ export const Example = () => {
ScaleFade
</Center>
</PresenceTransition>
</>
</Center>
);
};
65 changes: 13 additions & 52 deletions example/storybook/stories/components/composites/Transitions/Slide.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,26 @@
import React from 'react';
import {
Slide,
Button,
Alert,
VStack,
Heading,
Divider,
Center,
Text,
} from 'native-base';
import { Slide, Button, Alert, Text, Box } from 'native-base';
export const Example = () => {
const [isOpenBottom, setIsOpenBottom] = React.useState(false);
const [isOpenTop, setIsOpenTop] = React.useState(false);

const str1 = `${isOpenTop ? 'Hide' : 'Show'}`;
const str2 = `${isOpenBottom ? 'Hide' : 'Show'}`;
const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;
return (
<>
<Slide in={isOpenBottom} placement="bottom">
<Alert justifyContent="center" mx="4" mt="auto" mb="4" status="success">
<Alert.Icon />
<Text
// _light={{ color: 'success.600' }}
// _dark={{ color: 'success.100' }}
color="success.600"
fontWeight="medium"
>
Order placed successfully!
</Text>
</Alert>
</Slide>
<Box h="32" w="300">
<Slide in={isOpenTop} placement="top">
<Alert justifyContent="center" mx="4" mt="4" status="error">
<Alert justifyContent="center" status="error">
<Alert.Icon />

<Text color="error.600" fontWeight="medium">
No Internet Connection
</Text>
</Alert>
</Slide>

<VStack space={2.5} w={{ base: '50%', md: '25%' }} alignItems="center">
<Center w="100%">
<Heading textAlign="center" size="md" mb={4}>
Top
</Heading>
<Button w="100" onPress={() => setIsOpenTop(!isOpenTop)} mb={5}>
{str1}
</Button>
<Divider />
</Center>
<Center w="100%">
<Heading textAlign="center" size="md" mb={4}>
Bottom
</Heading>
<Button w="100" onPress={() => setIsOpenBottom(!isOpenBottom)}>
{str2}
{/* Click Me to {isOpenBottom ? "hide" : "show"} Bottom Slider */}
</Button>
</Center>
</VStack>
</>
<Button
mt="auto"
onPress={() => setIsOpenTop(!isOpenTop)}
variant="unstyled"
bg="coolGray.700:alpha.30"
>
{str}
</Button>
</Box>
);
};
Loading

1 comment on commit ab057ac

@vercel
Copy link

@vercel vercel bot commented on ab057ac Jan 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.