Using NativeBase v3 the right way
Tags: react, reactnative, typescript, javascript
Published: 2022-01-31 12:38:45

Since the release of [NativeBase v3](https://nativebase.io/?utm_source=Devto&utm_medium=Social&utm_campaign=Article&utm_id=Main+Website), it has been used by many developers to build their cool apps. So as the co-creator of a library, we were curious to know how the community is using it. This has led to us speaking to developers and collecting feedback to see how they use NativeBase v3. The revelation was astonishing.
 
We realized that a lot of folks were not utilizing v3 to its full potential, and sometimes many thought it would be super-complex. Therefore, we wanted to iron out the facts and demonstrate the simplicity of the NativeBase platform.

So, we wrote an introductory guide on how to adopt the v3 philosophy of creating beautiful and efficient UIs while using NativeBase.

We will look through the following six segments in this article:

- Setting up your project
- Utility Props vs StyleSheet API
- Importing from a single source
- Thinking in terms of pseudo props
- Utilising the hooks to the fullest
- Strict Mode

**1. Setting up your project**

If you are creating a new project and want to use NativeBase, we recommend using the example templates provided with the component library. This will save time and be a good starting point to understanding how light and dark modes can be implemented. It will also provide a glimpse of the custom theme setup which you can edit or remove based on your requirement.

The commands for setting up the templates in the expo, CRA, React Native and Next.js projects are given below for your reference.

To implement a template on an Expo Project, use the code given below:
 

> JavaScript
> ```
> expo init my-app --template expo-template-native-base
> ```
> TypeScript
> ```
> expo init my-app --template expo-template-native-base-typescript
> ```
 
To implement a template on a create-react-app Project, use the code given below:

> JavaScript
> ```
> npx create-react-app my-app --template nativebase
> ```
> TypeScript
> ```
> npx create-react-app my-app --template nativebase-typescript
> ```
 
To implement a template on a React Native Project, use the code given below:

> JavaScript
> ```
> npx react-native init my-app --template react-native-template-native-base
> ```
> TypeScript
> ```
> npx react-native init my-app --template react-native-template-native-base-typescript
> ```
 
To implement a template on a NextJS Project, use the code given below:

> JavaScript
> ```
> yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base
> ```
> TypeScript
> ```
> yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript
> ```
 

`All the templates on NativeBase v3 come with a customTheme setup using which you can customise themes very easily.`
 
**2. Utility Props vs StyleSheet API**

We highly recommend all users of NativeBase to use Utility Props over `StyleSheets` where ever they can.

NativeBase components accepts tons of utility props for your use. You can find the list of them  [here](https://docs.nativebase.io/utility-props?utm_source=Devto&utm_medium=Social&utm_campaign=Article&utm_id=Utility+props).

Let’s see an example and compare both approaches:

Example

If you choose to use a React Native `StyleSheet`, refer to the code given below

```javascript
import * as React from "react";
import { Text, View, StyleSheet } from "react-native";

export default function App() {
  return (
    // The code looks cleaner here but it's really hard to tell what is what and how that component would look.
    <View style={styles.container}>
      <View style={styles.card}>
        <View style={styles.row}>
          <Text style={styles.subHeading}>Business</Text>
          <Text style={styles.period}>1 month ago</Text>
        </View>
        <Text style={styles.heading}>Marketing License</Text>
        <Text style={styles.paragraph}>
          Unlock powerfull time-saving tools for creating email delivery and
          collecting marketing data
        </Text>
        <Text style={styles.link}>Read More</Text>
      </View>
    </View>
  );
}

// You need to switch back and forth to understand which component has which style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#374151",
  },
  card: {
    width: 296,
    backgroundColor: "#f9fafb",
    padding: 20,
    borderRadius: 8,
  },
  paragraph: {
    marginTop: 8,
    fontSize: 14,
    fontWeight: "medium",
    color: "#6b7280",
  },
  period: {
    fontSize: 10,
    color: "#a1a1aa",
  },
  heading: {
    marginTop: 12,
    fontSize: 20,
    fontWeight: 500,
  },
  link: {
    marginTop: 8,
    color: "#0891b2",
    fontWeight: "medium",
    fontSize: 12,
  },
  subHeading: {
    fontSize: 12,
    color: "#71717a",
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
  },
});
```
 
**Expo Snack:** https://snack.expo.dev/pu9jBPcut
 

- Now the same UI can be implemented on NativeBase using its Utility Props. Refer to the code given below:
 

```javascript
import React from 'react';
import {
  Center,
  NativeBaseProvider,
  HStack,
  Box,
  Text,
  Spacer,
} from 'native-base';

export default () => {
  return (
        // Though it doesn't look as slick as the previous example but try reading the code.
    <NativeBaseProvider>
      <Center flex={1} bg="coolGray.700">
            {// Every line of code is so much intuitive, one can easily understand what it does.}
        <Box bg="blueGray.50" p="5" w="296" rounded="8">
          <HStack alignItems="flex-start">
            <Text fontSize="12" color="gray.500" fontWeight="medium">
              Business
            </Text>
            <Spacer />
            <Text fontSize="10" color="gray.400">
              1 month ago
            </Text>
          </HStack>
          <Text mt="3" fontWeight="medium" fontSize="20">
            Marketing License
          </Text>
          <Text mt="2" fontSize="14" color="gray.500">
            Unlock powerfull time-saving tools for creating email delivery and
            collecting marketing data
          </Text>
          <Text mt="2" fontSize="12" fontWeight="medium" color="cyan.600">
            Read More
          </Text>
        </Box>
      </Center>
    </NativeBaseProvider>
  );
};
```
 
**Expo Snack:** https://snack.expo.dev/AGNgFxZ4L

The advantages of using Utility Props are:

- Massive productivity boost

- Better code readability

- No need to remember style names

- Emphasis on creating reusable components instead of reusable stylesheets

- Using Theme Tokens
 

`Alternatively, you can use Utility Props in StyleSheet APIs by creating objects of utility props and spreading them even through this method is not recommended.`
 
**3. Importing from a single source**

We selected few common components from the core React Native Library that you might commonly need while developing your application and passed them through our `Factory` function. This allows us to import from a single source and pack in all the good stuff that NativeBase has to offer without a worry of having to import a new component from any other line.

If you are using NativeBase v3, then we highly recommend that you use the following components from the NativeBase library:

```javascript
import {
  ScrollView,
  View,
  KeyboardAvoidingView,
  StatusBar,
  FlatList,
  SectionList,
} from "native-base";
```

The components are listed below along with their documentation links:

- ScrollView -  https://docs.nativebase.io/scrollview 

- View - https://docs.nativebase.io/view 

- KeyboardAvoidingView - https://docs.nativebase.io/keyboard-avoiding-view 

- StatusBar - https://docs.nativebase.io/status-bar
 
- FlatList -  https://docs.nativebase.io/flat-list 

- SectionList - https://docs.nativebase.io/section-list

 
**4. Thinking in terms of pseudo props**

We, at NativeBase, have put a lot of thought on making the development experience simpler for the tech community. To extend that thought, we have provided a few pseudo props that entirely changes how you approach making applications all together. Let’s understand this with a few examples.

**Color Mode Pseudo Props:**

NativeBase provides hooks to check what is the current theme and color mode i.e. `Light` or `Dark` , but this comes with the hassle of importing the hook, calling it, conditionally checking the color mode etc. All of this can be a tedious endeavour.

Instead, you can just add your props in `_light` and `_dark` pseudo props and NativeBase will apply those props based on the relevant color mode only. Lets check this out with an example:

- For demonstration, let’s suppose that there is a button that needs to have a `backgroundColor` = “primary.500” in `light mode` and the default background color when in `dark mode`.

- Conditionally, the text color should be “primary.800” in `dark mode` and default in `light mode`.

Use the following code to check the current theme and color mode using hooks:

```javascript
import React from "react";
import {
  Button,
  Center,
  useColorMode, // Step 1 Importing the hook
  NativeBaseProvider,
} from "native-base";

export function TestApp() {
  const { colorMode } = useColorMode(); // Step 2 Calling the hook
  return (
    <Button
      bg={colorMode === "light" ? "primary.500" : "primary.400"} // Step 3 Conditionally applying props
      _text={colorMode === "light" ? { color: "primary.800" } : "white"} // Step 3 Conditionally applying props
    >
      Button
    </Button>
  );
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <TestApp />
      </Center>
    </NativeBaseProvider>
  );
};
```

Use the following code to check the current theme and color mode using `_light` and `_dark` pseudo props:

```javascript
import React from "react";
import { Button, Center, NativeBaseProvider } from "native-base";

export function TestApp() {
  return (
    <Button
      _light={{ bg: "primary.500" }} // Step 1 Conditionally pass props to _light and _dark
      _dark={{ _text: { color: "primary.800" } }}
    >
      Button
    </Button>
  );
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <TestApp />
      </Center>
    </NativeBaseProvider>
  );
};
```

The following pictorial depiction is an example to show you how these pseudo props can be used to make things easier:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7dbvvvyyutwt8o1hdhp.gif)
 
 
**Platform Pseudo Props:**

Remember doing something like this to conditionally pass props to your components based on Platform.OS?

```javascript
<Input
  numberOfLines={Platform.OS === "android" ? "4" : null}
  width={Platform.OS === "web" ? "48" : "80%"}
/>
```

Well, that not an issue anymore on the latest version of NativeBase! You can simply use `_web`, `_android` and `_ios` props and pass the relevent one to a certain platform and you are good to go.

```javascript
<Input _android={{ numberOfLines: 4 }} _web={{ width: "48" }} width="80%" />
```

Platform props override other props when the particular platform is true as they top the precedence level.

There are more pseudo props on NativeBase with which we will cover in upcoming blogs along with introductory guides to implement them. Hope to see you there too!
 
**5. Utilising the hooks to the fullest**

NativeBase also comes with a lot of easy-to-use custom hooks to help you build your applications super fast, so keep in mind to use them when you can.

For example, let’s look into how to implement the `useDisclose` hook. Refer to the code given below:

```javascript
import React from "react";
import {
  Modal,
  Button,
  Center,
  useDisclose,
  NativeBaseProvider,
} from "native-base";

function UseDiscloseExample() {
  // handles common open, close, or toggle scenarios
  const { isOpen, onOpen, onClose } = useDisclose();
  // no need to create your own state and helper functions
  return (
    <>
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Content>
          <Modal.CloseButton />
          <Modal.Header fontSize="4xl" fontWeight="bold">
            Hello World
          </Modal.Header>
          <Modal.Body>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quasi
            cupiditate expedita, ipsa corporis officia totam similique delectus!
            Debitis esse, ea blanditiis iste enim iure at odit fugiat autem.
            Accusamus?
          </Modal.Body>
          <Modal.Footer>
            <Button colorScheme="blue" mr={1}>
              Save
            </Button>
            <Button onPress={onClose}>Close</Button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
      <Button onPress={onOpen}>Open Modal</Button>
    </>
  );
}
export default function () {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <UseDiscloseExample />
      </Center>
    </NativeBaseProvider>
  );
}
```

Another important hook is the `useBreakpointValue` which returns the value for the current breakpoint. Refer to the code given below:

```javascript
import React from "react";
import {
  Box,
  useBreakpointValue,
  NativeBaseProvider,
  Center,
} from "native-base";
function UseBreakpointValueExample() {
  // the value of color will change based on the screen sizes.
  const color = useBreakpointValue({
    base: "red.200",
    sm: "blue.200",
    md: "blue.200",
  });
  return (
    <Box bg={color} w={"100px"}>
      This is a box
    </Box>
  );
}
export default function () {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <UseBreakpointValueExample />
      </Center>
    </NativeBaseProvider>
  );
}
```

Below is a list of other hooks along with their docs:

- useDisclose - https://docs.nativebase.io/use-disclosure

- useBreakpointValue - https://docs.nativebase.io/use-breakPoint-value

- useClipboard - https://docs.nativebase.io/use-clipboard

- useMediaQuery - https://docs.nativebase.io/use-media-query

- useTheme - https://docs.nativebase.io/use-theme

- useToken - https://docs.nativebase.io/use-token

- seColorMode - https://docs.nativebase.io/use-color-mode

- useColorModeValue - https://docs.nativebase.io/use-color-mode-value

- useContrastText - https://docs.nativebase.io/use-contrast-text

- useAccessibleColors - https://docs.nativebase.io/use-accessible-colors

 
**6. Strict Mode**

NativeBase v3 now also has a Strict Mode that lets you control the level of strictness of the app development environment. A really handy tool to maintain the best possible practices through out your codebase, Strict Mode is a configuration that you can pass into your NativeBase configuration settings. 

It takes in three values, `error`, `warn` and `off`. The default setting is `off`. Based on your chosen option, it goes through every prop in your project and checks if you have used the proper `token values` from `theme` by only passing `string` values to the props. If this condition is not satisfied, it throws an error/warning or does nothing.

If you are previously used to passing numbers to utility props, then please use string tokens since the version 3.2.0 have new token values added that might cause a dilemma. Refer to the code given below:

```javascript
// If you previously had something like this in your code
<Box p={4} mx={3} my="12px" bg="primary.400" width="50%" >
    Hello World
</Box>

// Then now the correct way would be
<Box p="4" mx="3" my="3" bg="primary.400" width="1/2" >
    Hello World
</Box>
```
 
**Conclusion**

This wraps up our introduction on how to utilise the latest features on NativeBase in the most optimum way. With its most recent improvements, NativeBase can be used to create accessible and customizable components. I hope this article prompts you to try out the new functionalities that v3 comes with it.

We will have more guides for you in the future to help you create beautiful applications using the rich component library that NativeBase has to offer.

Do tell us about your experiments on our Discord channel by clicking [here](https://discord.gg/8ThhQcEK).

This article had originally been published on [dev.to](https://dev.to/rayan1810/using-nativebase-v3-the-right-way-dp2) by Rohit Singh