Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
36 changes: 19 additions & 17 deletions docs/3.0.x/nativebase-factory.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
---
id: nativebase-factory
title: NativeBase Factory
metaTitle: NativeBase Factory | NativeBase
metaDescription: NativeBase factory is a function that converts Non-NativeBase components to NativeBase-enabled components so you can pass style props to them.
---

NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them.

```jsx
import { Factory } from 'native-base';
import { Factory } from "native-base";
```

## Usage

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

function FactoryViewExample() {
const FactoryView = Factory(View);
Expand All @@ -36,15 +38,15 @@ export function Example() {
## Defining component theme

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

function FactoryViewExample() {
const FactoryView = Factory(View, {
baseStyle: {
bg: 'cyan.300',
borderRadius: 'md',
bg: "cyan.300",
borderRadius: "md",
},
});
return <FactoryView size={16} />;
Expand All @@ -65,16 +67,16 @@ export function Example() {
## Using mode in component theme

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

function FactoryViewModeExample() {
const FactoryView = Factory(View, {
baseStyle: (props) => {
return {
bg: themeTools.mode('rose.500', 'cyan.300')(props),
borderRadius: 'md',
bg: themeTools.mode("rose.500", "cyan.300")(props),
borderRadius: "md",
};
},
});
Expand All @@ -96,15 +98,15 @@ export function Example() {
## Using ref

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

function FactoryViewRefExample() {
const NBInput = Factory(TextInput);
Expand Down
36 changes: 19 additions & 17 deletions docs/3.1.x/nativebase-factory.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
---
id: nativebase-factory
title: NativeBase Factory
metaTitle: NativeBase Factory | NativeBase
metaDescription: NativeBase factory is a function that converts Non-NativeBase components to NativeBase-enabled components so you can pass style props to them.
---

NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them.

```jsx
import { Factory } from 'native-base';
import { Factory } from "native-base";
```

## Usage

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

function FactoryViewExample() {
const FactoryView = Factory(View);
Expand All @@ -36,15 +38,15 @@ export function Example() {
## Defining component theme

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

function FactoryViewExample() {
const FactoryView = Factory(View, {
baseStyle: {
bg: 'cyan.300',
borderRadius: 'md',
bg: "cyan.300",
borderRadius: "md",
},
});
return <FactoryView size={16} />;
Expand All @@ -65,16 +67,16 @@ export function Example() {
## Using mode in component theme

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

function FactoryViewModeExample() {
const FactoryView = Factory(View, {
baseStyle: (props) => {
return {
bg: themeTools.mode('rose.500', 'cyan.300')(props),
borderRadius: 'md',
bg: themeTools.mode("rose.500", "cyan.300")(props),
borderRadius: "md",
};
},
});
Expand All @@ -96,15 +98,15 @@ export function Example() {
## Using ref

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

function FactoryViewRefExample() {
const NBInput = Factory(TextInput);
Expand Down
4 changes: 3 additions & 1 deletion docs/3.2.x/nativebase-factory.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
---
id: nativebase-factory
title: NativeBase Factory
metaTitle: NativeBase Factory | NativeBase
metaDescription: NativeBase factory is a function that converts Non-NativeBase components to NativeBase-enabled components so you can pass style props to them.
---

NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them.

```jsx
import { Factory } from 'native-base';
import { Factory } from "native-base";
```

## Usage
Expand Down
4 changes: 3 additions & 1 deletion docs/3.3.x/nativebase-factory.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
---
id: nativebase-factory
title: NativeBase Factory
metaTitle: NativeBase Factory | NativeBase
metaDescription: NativeBase factory is a function that converts Non-NativeBase components to NativeBase-enabled components so you can pass style props to them.
---

NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them.

```jsx
import { Factory } from 'native-base';
import { Factory } from "native-base";
```

## Usage
Expand Down
2 changes: 2 additions & 0 deletions docs/3.4.x/nativebase-factory.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
id: nativebase-factory
title: NativeBase Factory
metaTitle: NativeBase Factory | NativeBase
metaDescription: NativeBase factory is a function that converts Non-NativeBase components to NativeBase-enabled components so you can pass style props to them.
---

NativeBase factory is a function that converts Non-NativeBase components to NativeBase enabled components so you can pass style props to them.
Expand Down
2 changes: 2 additions & 0 deletions docs/next/nativebase-factory.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
id: nativebase-factory
title: NativeBase Factory
metaTitle: NativeBase Factory | NativeBase
metaDescription: NativeBase factory is a function that converts Non-NativeBase components to NativeBase-enabled components so you can pass style props to them.
---

NativeBase factory is a function that converts Non-NativeBase components to NativeBase enabled components so you can pass style props to them.
Expand Down
2 changes: 0 additions & 2 deletions layouts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,8 @@ function Layout({
? frontMatter.title + " | NativeBase "
: pages?.currentPage?.title + " | NativeBase "
}`;

let href = "https://docs.nativebase.io/" + pages.currentPage.id;
const { metaTitle, metaDescription } = frontMatter;
console.log(metaTitle, metaDescription);
return (
<>
<Head>
Expand Down