Skip to content

Commit

Permalink
Merge branch 'staging' of github.com:GeekyAnts/nativebase-docs into s…
Browse files Browse the repository at this point in the history 
…taging
  • Loading branch information
Vidhi Kataria authored and Vidhi Kataria committed Mar 9, 2022
2 parents 8f37b11 + fbce44b commit a3140df
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 45 deletions.
38 changes: 18 additions & 20 deletions docs/3.0.x/customizing-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@ Let's customise a Button component to include rounded borders and red colorSchem
## Basic

```tsx
import React from 'react';
import { NativeBaseProvider, extendTheme } from 'native-base';
import React from "react";
import { NativeBaseProvider, extendTheme } from "native-base";

export default function () {
const theme = extendTheme({
components: {
Button: {
// Can simply pass default props to change default behaviour of components.
baseStyle: {
rounded: 'md',
rounded: "md",
},
defaultProps: {
colorScheme: 'red',
colorScheme: "red",
},
},
Heading: {
// Can pass also function, giving you access theming tools
baseStyle: ({ colorMode }) => {
return {
color: colorMode === 'dark' ? 'red.300' : 'blue.300',
fontWeight: 'normal',
color: colorMode === "dark" ? "red.300" : "blue.300",
fontWeight: "normal",
};
},
},
Expand Down Expand Up @@ -78,22 +78,22 @@ When variant in defaultProps is `solid` the above button will use solid variant.
You can specify the base style of the component and use it across project.

```jsx isLive=true
import React from 'react';
import { Text, NativeBaseProvider, Center, extendTheme } from 'native-base';
import React from "react";
import { Text, NativeBaseProvider, Center, extendTheme } from "native-base";

export function Example() {
const theme = extendTheme({
components: {
Text: {
baseStyle: {
color: 'emerald.400'
color: "emerald.400",
},
defaultProps: { size: 'lg' },
defaultProps: { size: "lg" },
sizes: {
xl: { fontSize: '64px' },
lg: { fontSize: '32px' },
md: { fontSize: '16px' },
sm: { fontSize: '12px' },
xl: { fontSize: "64px" },
lg: { fontSize: "32px" },
md: { fontSize: "16px" },
sm: { fontSize: "12px" },
},
},
},
Expand All @@ -106,32 +106,31 @@ export function Example() {
</NativeBaseProvider>
);
}

```

## Adding Variants

You can also add the variants to the components and use it across project.

```jsx isLive=true
import React from 'react';
import React from "react";
import {
NativeBaseProvider,
Button,
extendTheme,
Center,
VStack,
} from 'native-base';
} from "native-base";

export function Example() {
const theme = extendTheme({
components: {
Button: {
variants: {
rounded: ({ colorScheme }: any) => {
rounded: ({ colorScheme }) => {
return {
bg: `${colorScheme}.500`,
rounded: 'full',
rounded: "full",
};
},
},
Expand All @@ -152,7 +151,6 @@ export function Example() {
</NativeBaseProvider>
);
}

```

<br />
Expand Down
38 changes: 18 additions & 20 deletions docs/3.1.x/customizing-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@ Let's customise a Button component to include rounded borders and red colorSchem
## Basic

```tsx
import React from 'react';
import { NativeBaseProvider, extendTheme } from 'native-base';
import React from "react";
import { NativeBaseProvider, extendTheme } from "native-base";

export default function () {
const theme = extendTheme({
components: {
Button: {
// Can simply pass default props to change default behaviour of components.
baseStyle: {
rounded: 'md',
rounded: "md",
},
defaultProps: {
colorScheme: 'red',
colorScheme: "red",
},
},
Heading: {
// Can pass also function, giving you access theming tools
baseStyle: ({ colorMode }) => {
return {
color: colorMode === 'dark' ? 'red.300' : 'blue.300',
fontWeight: 'normal',
color: colorMode === "dark" ? "red.300" : "blue.300",
fontWeight: "normal",
};
},
},
Expand Down Expand Up @@ -78,22 +78,22 @@ When variant in defaultProps is `solid` the above button will use solid variant.
You can specify the base style of the component and use it across project.

```jsx isLive=true
import React from 'react';
import { Text, NativeBaseProvider, Center, extendTheme } from 'native-base';
import React from "react";
import { Text, NativeBaseProvider, Center, extendTheme } from "native-base";

export function Example() {
const theme = extendTheme({
components: {
Text: {
baseStyle: {
color: 'emerald.400'
color: "emerald.400",
},
defaultProps: { size: 'lg' },
defaultProps: { size: "lg" },
sizes: {
xl: { fontSize: '64px' },
lg: { fontSize: '32px' },
md: { fontSize: '16px' },
sm: { fontSize: '12px' },
xl: { fontSize: "64px" },
lg: { fontSize: "32px" },
md: { fontSize: "16px" },
sm: { fontSize: "12px" },
},
},
},
Expand All @@ -106,32 +106,31 @@ export function Example() {
</NativeBaseProvider>
);
}

```

## Adding Variants

You can also add the variants to the components and use it across project.

```jsx isLive=true
import React from 'react';
import React from "react";
import {
NativeBaseProvider,
Button,
extendTheme,
Center,
VStack,
} from 'native-base';
} from "native-base";

export function Example() {
const theme = extendTheme({
components: {
Button: {
variants: {
rounded: ({ colorScheme }: any) => {
rounded: ({ colorScheme }) => {
return {
bg: `${colorScheme}.500`,
rounded: 'full',
rounded: "full",
};
},
},
Expand All @@ -152,7 +151,6 @@ export function Example() {
</NativeBaseProvider>
);
}

```

<br />
Expand Down
20 changes: 15 additions & 5 deletions layouts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { useEffect, useContext } from "react";
import {
Box,
HStack,
Link,
ScrollView,
Text,
useBreakpointValue,
Expand Down Expand Up @@ -246,15 +247,24 @@ function Layout({
<NativebaseIconLogo width="125" height="130" />
</Box>

<Text
<Link
pl="6"
_light={{ color: "black" }}
_dark={{ color: "coolGray.50" }}
_text={{
_light: {
color: "black",
},
_dark: {
color: "coolGray.50",
},
fontSize: "sm",
}}
m="auto"
fontSize="sm"
isUnderlined={false}
href="https://madewithnativebase.com/"
isExternal
>
MadeWithNativeBase
</Text>
</Link>
</Box>
</Box>
</>
Expand Down

1 comment on commit a3140df

@vercel
Copy link

@vercel vercel bot commented on a3140df Mar 9, 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:

staging-docs – ./

staging-docs-git-staging-geekyants-team.vercel.app
staging-docs.nativebase.io
staging-docs-geekyants-team.vercel.app

Please sign in to comment.