Skip to content

Fix/typing #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 23, 2021
Merged

Fix/typing #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60c00e6
Fixed typings strict mode
Sep 23, 2021
369b294
Merge branch 'minor' of github.com:GeekyAnts/nativebase-docs into fix…
Sep 23, 2021
7c6dc90
Deleted old version, created again
Sep 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/buildingFooterTabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default function App() {
>
<Center>
<Icon
mb={1}
mb="1"
as={
<MaterialCommunityIcons
name={selected === 2 ? 'cart' : 'cart-outline'}
Expand All @@ -93,7 +93,7 @@ export default function App() {
color="white"
size="sm"
/>
<Text color="white" fontSize={12}>
<Text color="white" font="12">
Cart
</Text>
</Center>
Expand All @@ -107,7 +107,7 @@ export default function App() {
>
<Center>
<Icon
mb={1}
mb="1"
as={
<MaterialCommunityIcons
name={selected === 3 ? 'account' : 'account-outline'}
Expand Down
2 changes: 1 addition & 1 deletion docs/colorMode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function ColorModeExample() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Center flex={1} bg={useColorModeValue('warmGray.50', 'coolGray.800')}>
<Text fontSize="lg" display="flex" mb={20}>
<Text fontSize="lg" display="flex" mb="20">
The active color mode is{' '}
<Text bold fontSize="18px">
{useColorModeValue('Light', 'Dark')}
Expand Down
2 changes: 1 addition & 1 deletion docs/customizingTheme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ function App() {

return (
<NativeBaseProvider theme={theme}>
<Box bg="primary.500" p={4} />
<Box bg="primary.500" p="4" />
</NativeBaseProvider>
);
}
Expand Down
2 changes: 1 addition & 1 deletion docs/design-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const spacing = {
We can use the above tokens in our code instead of using absolute values.

```jsx title="using the above tokens in Box component"
<Box mt={4} bg="primary.500"></Box>
<Box mt="4" bg="primary.500"></Box>
```

The above Box will be translated to
Expand Down
68 changes: 34 additions & 34 deletions docs/interaction-styles.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ NativeBase provides a declarative way to add interaction or platform specific pr
Using `_hover` pseudo prop, we can customize the style of Pressable component on hover.

<NativeBaseProvider>
<Box flex={1} mb={16}>
<Box flex={1} mb="16">
<Pressable
_hover={{ bg: 'primary.700' }}
bg="primary.600"
py={2}
px={3}
py="2"
px="3"
rounded="sm"
alignSelf="center"
>
Expand All @@ -40,8 +40,8 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
<Pressable
_hover={{ bg: 'primary.700' }}
bg="primary.600"
py={2}
px={3}
py="2"
px="3"
rounded="sm"
alignSelf="center"
>
Expand All @@ -56,12 +56,12 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed.

<NativeBaseProvider>
<Box flex={1} mb={16}>
<Box flex={1} mb="16">
<Pressable
_pressed={{ bg: 'primary.800' }}
bg="primary.600"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
rounded="sm"
>
Expand All @@ -76,9 +76,9 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
<Pressable
_pressed={{ bg: 'primary.800' }}
bg="primary.600"
py={2}
py="2"
rounded="sm"
px={3}
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand All @@ -92,7 +92,7 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
Using `_focus` pseudo prop, we can customize the style of Pressable component on focus.

<NativeBaseProvider>
<Box flex={1} mb={16}>
<Box flex={1} mb="16">
<Pressable
_focus={{
bg: 'primary.700',
Expand All @@ -101,8 +101,8 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
}}
bg="primary.600"
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand All @@ -117,8 +117,8 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
_focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }}
bg="primary.600"
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand All @@ -132,14 +132,14 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms.

<NativeBaseProvider>
<HStack space={4} justifyContent="center" alignItems="center" mb={8}>
<VStack alignItems="center" space={2}>
<HStack space="4" justifyContent="center" alignItems="center" mb="8">
<VStack alignItems="center" space="2">
<Box
_web={{ bg: 'cyan.600' }}
bg="cyan.600"
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand All @@ -148,13 +148,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
</Box>
<Text color="white">Web</Text>
</VStack>
<VStack alignItems="center" space={2}>
<VStack alignItems="center" space="2">
<Box
_android={{ bg: 'yellow.400' }}
bg="yellow.400"
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold">
Expand All @@ -163,13 +163,13 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
</Box>
<Text color="white">Android</Text>
</VStack>
<VStack alignItems="center" space={2}>
<VStack alignItems="center" space="2">
<Box
_ios={{ bg: 'violet.500' }}
bg="violet.500"
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand All @@ -183,12 +183,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh

```jsx title="Platform specific example"
<HStack space={4} justifyContent="center" alignItems="center">
<VStack alignItems="center" space={2}>
<VStack alignItems="center" space="2">
<Box
_web={{ bg: 'cyan.600' }}
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand All @@ -197,12 +197,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
</Box>
<Text color="white">Web</Text>
</VStack>
<VStack alignItems="center" space={2}>
<VStack alignItems="center" space="2">
<Box
_android={{ bg: 'yellow.400' }}
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold">
Expand All @@ -211,12 +211,12 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
</Box>
<Text color="white">Android</Text>
</VStack>
<VStack alignItems="center" space={2}>
<VStack alignItems="center" space="2">
<Box
_ios={{ bg: 'violet.500' }}
rounded="sm"
py={2}
px={3}
py="2"
px="3"
alignSelf="center"
>
<Text textTransform="uppercase" fontWeight="bold" color="white">
Expand Down
10 changes: 5 additions & 5 deletions docs/migration/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,17 +68,17 @@ import { VStack, Box, Divider } from 'native-base';

export default function () {
return (
<Box border={1} borderRadius='md'>
<VStack space={4} divider={<Divider />}>
<Box px={4} pt={4}>
<Box border="1" borderRadius="md">
<VStack space="4" divider={<Divider />}>
<Box px="4" pt="4">
NativeBase
</Box>
<Box px={4}>
<Box px="4">
NativeBase is a free and open source framework that enable developers
to build high-quality mobile apps using React Native iOS and Android
apps with a fusion of ES6.
</Box>
<Box px={4} pb={4}>
<Box px="4" pb="4">
GeekyAnts
</Box>
</VStack>
Expand Down
2 changes: 1 addition & 1 deletion docs/migration/Icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default function () {
<Icon
as={Ionicons}
name={Platform.OS ? 'ios-menu' : 'md-menu'}
size={20}
size="20"
color="red"
/>
<Icon as={FontAwesome} name="home" />
Expand Down
4 changes: 2 additions & 2 deletions docs/migration/Radio Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,10 @@ export default function () {
setValue(nextValue);
}}
>
<Radio value="one" my={1}>
<Radio value="one" my="1">
One
</Radio>
<Radio value="two" my={1}>
<Radio value="two" my="1">
Two
</Radio>
</Radio.Group>
Expand Down
2 changes: 1 addition & 1 deletion docs/migration/Spinner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ values={[
<Spinner color="danger.400" />
<Spinner size="sm" />
<Spinner color="blue.500" size="lg" />
<Spinner color="yellow.500" size={50} />
<Spinner color="yellow.500" size="50" />
```

</TabItem>
Expand Down
8 changes: 4 additions & 4 deletions docs/migration/Thumbnail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ export default function () {
const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png';

return (
<VStack space={2} alignItems="center">
<VStack space="2" alignItems="center">
<Text>Square Thumbnail</Text>
<Image size={12} source={{ uri: uri }} alt="react-native" />
<Image size={16} source={{ uri: uri }} alt="react-native" />
<Image size={20} source={{ uri: uri }} alt="react-native" />
<Image size="12" source={{ uri: uri }} alt="react-native" />
<Image size="16" source={{ uri: uri }} alt="react-native" />
<Image size="20" source={{ uri: uri }} alt="react-native" />
<Text>Circular Thumbnail</Text>
<Avatar size="xs" source={{ uri: uri }} />
<Avatar size="md" source={{ uri: uri }} />
Expand Down
8 changes: 4 additions & 4 deletions docs/nativebase-factory.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { View } from 'react-native';
function FactoryViewExample () {
const FactoryView = Factory(View);
return (
<FactoryView bg="emerald.400" borderRadius={4} size={16} />
<FactoryView bg="emerald.400" borderRadius="4" size="16" />
);
}

Expand Down Expand Up @@ -49,7 +49,7 @@ function FactoryViewExample () {
borderRadius: 'md',
},
});
return <FactoryView size={16} />;
return <FactoryView size="16" />;
}

// Example template which wraps component with NativeBaseProvider
Expand Down Expand Up @@ -80,7 +80,7 @@ function FactoryViewModeExample () {
};
},
});
return <FactoryView size={16}/>;
return <FactoryView size="16"/>;
}

// Example template which wraps component with NativeBaseProvider
Expand Down Expand Up @@ -112,7 +112,7 @@ function FactoryViewRefExample() {
const NBInput = Factory(TextInput);
const inputRef = React.useRef(null);
return (
<Stack space={4}>
<Stack space="4">
<NBInput
w="200"
placeholder="Name"
Expand Down
8 changes: 4 additions & 4 deletions docs/responsive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ function Example() {
rounded="lg"
overflow="hidden"
width={['72', '72', '4/6']}
shadow={1}
shadow="1"
_light={{ backgroundColor: 'coolGray.50' }}
_dark={{ backgroundColor: 'gray.700' }}>
<Box>
Expand All @@ -119,14 +119,14 @@ function Example() {
bg="violet.500"
_text={{ color: 'white', fontWeight: '700', fontSize: 'xs' }}
position="absolute"
bottom={0}
bottom="0"
px="3"
py="1.5">
PHOTOS
</Center>
</Box>
<Stack p="4" space={[3, 3, 1.5]}>
<Stack space={2}>
<Stack space="2">
<Heading size="md" ml="-1">
The Garden City
</Heading>
Expand All @@ -143,7 +143,7 @@ function Example() {
Bengaluru (also called Bangalore) is the center of India's high-tech
industry. The city is also known for its parks and nightlife.
</Text>
<HStack alignItems="center" space={4} justifyContent="space-between">
<HStack alignItems="center" space="4" justifyContent="space-between">
<HStack alignItems="center">
<Text
color="coolGray.600"
Expand Down
Loading