DEV Community: NativeBase

Announcing HackWithNativeBase

NativeBase — Fri, 10 Jun 2022 13:09:49 +0000

We are thrilled to announce HackWithNativeBase — the biggest React Native Hackathon of 2022.

This is an offline event, organized by NativeBase and sponsored by GeekyAnts. This event will bring together React and React Native enthusiasts in a contest to create a universal application.

About the Hackathon 💻

HackWithNativeBase is a hackathon designed to bring together the community of skilled React and React Native developers. Our goal is to construct cross-platform applications with a single codebase.

The event is taking place on the 2nd of July, 2022.

There will be a single round of screening to qualify for the showdown in Bengaluru, India. For more deets on the location, visit the website: https://nativebase.io/hackathon

Prize Pool 🏆

We have three grand prizes for this Hackathon. Participants can also win big by participating in a Tweetathon challenge that will be conducted as a lead-up to Hack Day.

Three Grand Prizes

The winner bags a ₹100,000/- cash prize
The first runners-up to get a ₹50,000/- cash prize
The second runners-up get a ₹25,000/- cash prize

All who make it to Hack Day in Bengaluru will get exclusive NativeBase swags.

Tweetathon consists of three mini-challenges

Best Meme: ₹1,500/-
Best Tweet: ₹2,000/-
Viral Tweet: ₹4,000/-

For winning these mini-challenges, check out the website for rules. https://nativebase.io/hackathon

Important Dates to Remember 🗓

18th June: Registrations close and so does submissions for the qualifier round
22nd June: Results from the qualifier round are announced
2nd July: Hack Day

Suggestions/ FAQs

If you have any questions, please ask them on #hack-with-nativebase on the NativeBase Discord server. This is a dedicated channel for the Hackathon where you can get your doubts cleared and interact with fellow participants. We will also be sharing every update regarding the Discord channel. To join, CLICK HERE.

You can also ask your doubts and interact with us on Twitter by mentioning @nativebase.
Visit the website to register and for more details: https://nativebase.io/hackathon

We can't wait to see your projects! Good luck. ✌

Clone Experiment #3: Accessible Taxi Booking app for web and mobile

NativeBase — Fri, 18 Feb 2022 12:15:17 +0000

Introduction

We have created a cross-platform Taxi services application using NativeBase. The main objective for this project was to show users how a single codebase having NativeBase components can be deployed as a web and a native app. The application created is inspired by the leading Taxi Service provider Uber’s application. The experiment’s final result looked like this. Check it out yourself.

Motivation:

Why should we build native apps when we have responsiveness in web apps?

Better user experience and cross-platform consistency are possible only through Native Apps.

Finding a solution for this, I came across the Expo framework which helps you to develop, build, deploy, and quickly iterate on iOS, Android, and Web apps from the same JavaScript / TypeScript codebase. But again, designing & achieving responsiveness is very complex in Expo / React Native.

Moreover, unlike CSS, there is nothing similar to media queries in React Native. You will end up writing separate style objects and individual files to support responsiveness in your App. That is where NativeBase comes to the rescue. It supports responsive styles out of the box. You can achieve responsiveness by using either an Object or Array syntax in the props.

Challenges faced:

Maps: The major challenge we have faced was the absence of a map API that works collectively on both native and web. For that, we needed to call different APIs based on the device.

import { Platform } from "react-native";

const ResponsiveMap = Platform.select({
  native: () => (
    <NativeMap />
  ),
  default: () => <WebMap />,
});

NativeMap.tsx

import React from "react";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

function NativeMap(props: any) {
  return (
    <MapView
      style={{
        flex: 1,
        minHeight: 120,
      }}
      provider={PROVIDER_GOOGLE}
      region={{
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
        latitude: 12.9698,
        longitude: 77.75,
      }}
    >
      <MapCircle
        center={{ latitude: 12.9698, longitude: 77.75 }}
        radius={100}
      ></MapCircle>
    </MapView>
  );
}

WebMap.tsx

import React, { useEffect, useState, useRef } from "react";
import { VStack, View } from "native-base";
import Constants from "expo-constants";

function WebMap() {
  const [mapLoaded, setMapLoaded] = useState(false);
  const mapContainerRef = useRef<HTMLElement>(null);    // C1

  useEffect(() => {
    // Check if map script is already present in DOM
    if (!document.body.dataset.mapLoaded) {
      const mapScript = document.createElement("script");
      mapScript.src = MAP_SCRIPT_WITH_API_KEY;

      mapScript.onload = () => {
        // set dataset property on body to indicate map script has been loaded.
        document.body.dataset.mapLoaded = "true";
        setMapLoaded(true);
      };
      document.head.appendChild(mapScript);
    }
  }, []);

  useEffect(() => {
    if (mapLoaded) {
      //@ts-ignore
      const map = new window.google.maps.Map(mapContainerRef.current, {
        zoom: 15,
        mapTypeId: "terrain",
        center: { lat: 12.9698, lng: 77.75 },
      });
    }
  }, [mapLoaded]);

  return (
    <>
      {mapLoaded ? (
        <VStack
          safeAreaBottom
          flex="1"
          space={{ base: "4", md: "0" }}
          rounded={{ md: "lg" }}
          borderWidth={{ base: "0", md: "1" }}
          _light={{
            bg: { md: "white", base: "primary.50" },
            borderColor: "coolGray.200",
          }}
          _dark={{
            bg: { base: "coolGray.700", md: "coolGray.700" },
            borderColor: "coolGray.700",
          }}
        >
          <View flex="1" ref={mapContainerRef} />
        </VStack>
      ) : (
        "Loading ..."
      )}
    </>
  );
}

As you can see, in the line C1, we need to initialise the container as HTMLElement to show the map in web.

Sidebar: We needed to show the Sidebar differently on small and large-sized screens.

const isLargeScreen = useBreakpointValue({
    base: false,
    lg: true,
  });

return(
...

{isLargeScreen ? (
    <Box w="300" bg="white" display={isSidebar ? "flex" : "none"}>
      <Sidebar navigation={navigation} />
    </Box>
) : (
    <Slide in={isSlideOpen} placement="left" w={width} h="100">
    <HStack w="100%" h="100%">
      <Box w={{ base: "80%", lg: "25%" }} bg="white">
        <Sidebar navigation={navigation} />
      </Box>
      <Pressable
        w={{ base: "20%", lg: "75%" }}
        onPress={() => setSlideOpen(false)}
        opacity="0.5"
        bg="black"
      ></Pressable>
    </HStack>
  </Slide>
)}
...
);

Small screens

Large screens

Conclusion

With this fun experiment, we were able to show what NativeBase components can do with the expo. It is amazing how our code gets converted to div or React Native components on the basis of the device on which it gets rendered. The support of props has also allowed us to write minimal code to support the same design on the web as well as mobile.

We are working to enhance NativeBase components by turning the challenges faced in this experiment into features.

How to add animations to your NativeBase App

NativeBase — Thu, 10 Feb 2022 11:02:17 +0000

Introduction

What is the difference between a “Good” app and a “Great” app?

When I think about this question, a few things come to mind. But the one thing that most users will notice and remember is Interaction Animations.

So, in this tutorial, we will share with you, how to add animations to your NativeBase app, using Reanimated.

What are We Creating

We will create a Todo app and add interaction animations to it, to enhance the user experience.

To make our Todo app lively and enjoyable, we will use the three animations highlighted below.

Add a small rotate the button on click.
Change the background color of the completed item when clicked.
Animating removing items from the list by swiping the item left.

Implementing Individual Animations

Rotation 🔁

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  useDerivedValue,
  interpolate,
  withRepeat,
} from "react-native-reanimated";
const animation = useSharedValue(0);
const rotation = useDerivedValue(() => {
  return interpolate(animation.value, [0, 360], [0, 360]);
});
const buttonRotation = useAnimatedStyle(() => {
  return {
    transform: [
      {
        rotate: rotation.value + "deg",
      },
    ],
  };
});
const startAnimation = () => {
  animation.value = withRepeat(
    withTiming(30, {
      duration: 400,
    }),
    2,
    true
  );
};
const buttonRotation = useAnimatedStyle(() => {
  return {
    transform: [
      {
        rotate: rotation.value + "deg",
      },
    ],
  };
});

// JSX for button
<TouchableWithoutFeedback
  onPress={() => {
    if (inputValue) addItem(inputValue);
    setInputValue("");
  }}
  onPressIn={startAnimation}
>
  <Animated.View
    style={[
      {
        height: 50,
        width: 100,
        backgroundColor: colors["primary"][700],
        borderRadius: 3,
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: 12,
      },
      buttonRotation,
    ]}
  >
    <Text
      color="white"
      textAlign="center"
      fontSize="md"
      justifyContent="center"
    >
      Add Task
    </Text>
  </Animated.View>
</TouchableWithoutFeedback>

Rotation can act as the base for tons of cool interactions. We used useSharedValue hook from the reanimated library to share the value between the react-native UI thread and animation thread.

To get the transformed shared value if one of the underlying shared value change, we have used the useDerivedValue hook. We then used the useAniamtedStyle hook to make the association between the shared values and the view properties of add button.

By clicking on the button, the start animation function is called. This changes the shared value and all the subsequent changes occur based on the shared value used in animations. The video below demonstrates, what it looks like 🙂.

Changing of background color on click 🎨

We inserted this animation to show that a certain task is pending. We are changing the background color as shown below to denote the completion of the task. Here we are changing the backgroundColor property of the view with some delay animation.

const { colors } = useTheme();
const progress = useDerivedValue(() => {
  return props.item.isCompleted
    ? withTiming(1, { duration: 2000 })
    : withTiming(0, { duration: 2000 });
});
const rContainreStyle = useAnimatedStyle(() => {
  const backgroundColor = interpolateColor(
    progress.value,
    [0, 1],
    ["white", colors["muted"][100]]
  );
  return {
   ..
   backgroundColor,
   ..
  };
});


//JSX
<Pressable
  onPress={() => {
    props.handleStatusChange(props.itemI);
  }}
>
  <PanGestureHandler onGestureEvent={gestureMethod}>
    <Animated.View style={[styles.containreStyle, rContainreStyle]}>
      <Text fontSize="lg" px={6} color="coolGray.800">
        {props.item.title}
      </Text>
    </Animated.View>
  </PanGestureHandler>
</Pressable>

useTheme hook offered by NativeBase and allows you to tap into the theming system provided by NativeBase. The video below demonstrates this animation.

Removing the card 🗑️

We used this animation to show that once we complete a task we just simply slide the card left 👈. With one swipe the card is removed.

Using PanGestureHandler from react-native-gesture-handler to capture touch event and based on the swipe value assigned we animated the translateX, marginVertical, opacity, and height properties of view.

import { PanGestureHandler } from "react-native-gesture-handler";
const SCREENWIDTH = Dimensions.get("window").width;
const TRANSLATEXTHRESHOLD = -SCREENWIDTH * 0.34;
const translateX = useSharedValue(0);
const MARGIN = useSharedValue(10);
const CONTAINERHEIGHT = useSharedValue(70);
const OPACITY = useSharedValue(1);
const gestureMethod = useAnimatedGestureHandler({
  onStart: (event, ctx) => {},
  onActive: (event, ctx) => {
    translateX.value = event.translationX;
  },
  onEnd: (event, ctx) => {
    const isDismissed = translateX.value < TRANSLATEXTHRESHOLD;
    if (isDismissed) {
      translateX.value = withTiming(-SCREENWIDTH);
      CONTAINERHEIGHT.value = withTiming(0);
      MARGIN.value = withTiming(0);
      OPACITY.value = withTiming(0);
    } else {
      translateX.value = withTiming(0);
    }
  },
});
const rContainreStyle = useAnimatedStyle(() => {
  const backgroundColor = interpolateColor(
    progress.value,
    [0, 1],
    ["white", colors["muted"][100]]
  );
  return {
    transform: [{ translateX: translateX.value }],
    height: CONTAINERHEIGHT.value,
    opacity: OPACITY.value,
    marginVertical: MARGIN.value,
    backgroundColor,
  };
});

//JSX
<Pressable
  onPress={() => {
    props.handleStatusChange(props.itemI);
  }}
>
  <PanGestureHandler onGestureEvent={gestureMethod}>
    <Animated.View style={[styles.containreStyle, rContainreStyle]}>
      <Text fontSize="lg" px={6} color="coolGray.800">
        {props.item.title}
      </Text>
    </Animated.View>
  </PanGestureHandler>
</Pressable>

The video below demonstrates the animation:

Conclusion

Animation plays a very pivotal role in enhancing the overall user experience of any application. The experience of a simple application can be improved ten folds by the use of simple animations.

For achieving that outcome React animated plays an important role. NativeBase being an awesome Library offered such a variety to use components and Pseudo props that helped in reducing the code complexity and improving the code quality.

With the use of NativeBase what we can achieve is something great. The experience of using apps essentials in everyday life, like the ToDo application, can be enhanced incredibly using animations from NativeBase.

The only React and React Native Template you’ll ever need

NativeBase — Wed, 09 Feb 2022 13:07:01 +0000

Building a Web or a Mobile app is highly tricky and building it from scratch is overwhelming. Product owners create low-fidelity wireframes, which designers convert into beautiful designs. Developers then convert those designs into code. Although many screens in web and mobile apps are generic, development agencies charge big money for the most simple apps.

The Problem

Every time we build apps, we waste weeks rebuilding the same screens repeatedly; Auth screens, Newsfeed, Search screen, Sidebar / Drawer, Profile screens, Shopping cart, Product pages, etc. We also noticed that around 200 screens make up 80% of all digital software. We are trying to solve the problem of rebuilding the generic screens and components for every project so that you don’t have to.

Solution

The NativeBase Startup+ bundle has over 100 react and react native themes for native mobile apps and web apps. We have spent months building it right so that you don’t have to reinvent the wheel. There are no limits on what you can make. The combination of ways to put screens together is nearly infinite. You can create your version of Airbnb or Facebook or do something that’s never been dreamed of before. A curated list of premium react and react native templates to help you get started building your app.

Who will use this react theme?

Whether you are a business owner, a service provider, or an indie developer, this bundle will save weeks of effort and help you build your web and mobile apps faster. The same code will work everywhere, so you don’t have to code it for different platforms.

What will you get with this react & react-native template?

A bundle of 100+ production-ready screens with source code to help you build your idea faster. All the screens are fully responsive and look great on all the device sizes (Mobiles, Tablets, and Web). This React and the React-Native kit is updated and tested for keyboard operability and screen reader support. All the themes have dark mode support. Typescript support provides a rich environment for spotting common errors as you type the code. Most importantly, the bundle also includes an expertly crafted complete Adobe XD kit with assets for all the screens.

Category of screens

Our React and React native template has screens from various categories

E-Commerce
On-demand food delivery
Fintech
Payments
Health and Fitness
Entertainment
Social
Travel
Ed-tech

You can browse all the screens here.

Free Screens

NativeBase Startup+ also lets you download a free starter kit with five screens for react and react native, which you can download and run on your machine before you decide to purchase the premium kit. If you’re reading this, tadaa, you are already eligible for a 5% additional discount. Use the code NBSGRV5 while making your payment.

Conclusion

We are bullish on Startup+ to be the most popular React and React Native template of 2022. Pick the screens that suit your requirements the best, save more than 50% of the energy, and work needed to build your UI screens.

The app-development costs can drastically decrease if you’re leveraging this react and react-native theme. You might also not need to hire designers or developers so that you can reroute part of your budget into different areas, such as marketing and growth. Focus on what makes your product unique instead of reinventing the wheel.

Clone Experiment #2: Online Ticket Booking universal app for web & mobile using React Native

NativeBase — Thu, 03 Feb 2022 11:57:06 +0000

Introduction

We used Next.js and NativeBase v3 to construct a Hotel and Flight checkout flow inspired by MakeMyTrip. The goal was to illustrate the adaptability of several NativeBase components, find out about any deficiencies with NativeBase, and try to overcome the shortcomings. This would allow us to improve NativeBase’s range of usability. We decided to name the project “Make Your Trip.”

Here are the instructions to install NativeBase in a Next.js project.

Challenges

While replicating the complex UI of MakeMyTrip, we came across a few hurdles. They were taken care of using different components offered by NativeBase.

The overview of the challenges with their fixes are listed below:

Animations

The header animation of the “Make Your Trip” is implemented using the simple NativeBase components and react hooks.

Here, on scroll, we need to calculate the window height using the event listener, and then using react hook. We also changed the visibility of the header components.The following NativeBase components were used for the task.

React.useEffect(() => {
    // window is accessible here.
    window.addEventListener("scroll", changeVisibility);
  }, []);

Tabs

We needed to construct the tab component to match the design. The following NativeBase components were used for the task.

HStack
Pressable
Divider

The state hooks used were:

const [tabName, setTabName] = React.useState("AllOffers");

And changing the TabName value on onPress was done as follows. Here is an example:

onPress={() => {
  setTabName("AllOffers");
}}

Now, we can easily check the value of tabName and render UI using ternary operator. Here is an example:

borderBottomColor: tabName == "AllOffers" ? "#fd2578" : "f9fafb",

And our goal of implementing the tab component is fulfilled.

Responsive layout

NativeBase provides a simple way to add responsiveness to your components.

Responsive syntax relies on the breakpoints defined in the theme object.

For making our components responsive we need to provide the prop value as an object in which the actual values are defined against different breakpoints.

For example:

w={{ sm:"24",md:"32",lg:"40",xl:"48" }}
// here sm,md,lg,xl depicts the screen sizes//

We can also do the same using the array syntax:

w={[24, 48, 72]}.
// here value 24,48,72 depicts value for small,medium,large screen sizes//

Conclusion

With this experiment, we were able to showcase NativeBase’s capabilities extensively and dig deeper into Next.js. The ease with which Next.js integrated with NativeBase was a blessing for us. This ease of integration allowed us to execute a complex UI by writing minimal code without compromising the design. The code was written once and adapted for multiple screen sizes—mobile, web, and tablets—without any additional code.

We believe NativeBase can do more, especially since existing peers currently lack the Tabs component. It would also be wonderful if they had more versatile animation components. There is always scope for improvement, and the team is working tirelessly to make NativeBase better every day.

Building a Twitter Spaces Clone with NativeBase and 100ms

NativeBase — Wed, 02 Feb 2022 11:47:55 +0000

Introduction

As part of our community initiatives at NativeBase, we partnered with 100ms to do a workshop on “Building a Twitter Spaces Clone,” which you can find in the video version. This article is written as a follow-along reading for the same.

Bootstrapping the project

One of the great things about using NativeBase is its universal character. You get a template for all the possible target platforms you might be thinking of building an app. This means that the bootstrapping time is reduced drastically. You also get an all-configured, basic app that is ready to be extended.

Following the NativeBase Installation guide https://docs.nativebase.io/installation, we will start by using the “react-native” template, and it's as easy as copy-pasting a few commands described in the instructions.

Building the Screens

The demo app we are building has two screens. You see the home screen when you launch the app. This screen shows you all the live spaces. The card component on this screen is attractive. It has details of showing several things and is of moderate complexity.

Let's look at how NativeBase makes building UI's like this a cake-walk.

SpaceCard Component


import React from 'react';
import { Box, Text, HStack, Avatar, Pressable } from 'native-base';

export default function (props) {
  return (
    <Pressable
      w="full"
      bg="fuchsia.800"
      overflow="hidden"
      borderRadius="16"
      onPress={props.onPress}
    >
      <Text px="4" my="4" fontSize="md" color="white">
        Live
      </Text>
      <Text w="80%" pl="4" mb="4" fontSize="xl" color="white">
        Building a Twitter Space Clone in React Native using NativeBase and
        100ms
      </Text>
      <HStack p="4" bg="fuchsia.900" space="4">
        <Box flexDirection="row" justifyContent="center" alignItems="center">
          <Avatar
            size="sm"
            alignSelf="center"
            bg="green.200"
            source={{
              uri: 'https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg',
            }}
          >
            VB
          </Avatar>
          <Box ml="4">
            <Text fontSize="sm" color="white">
              Vipul Bhardwaj
            </Text>
            <Text fontSize="sm" color="white">
              SSE @GeekyAnts
            </Text>
          </Box>
        </Box>
        <Box flexDirection="row" justifyContent="center" alignItems="center">
          <Avatar
            size="sm"
            alignSelf="center"
            bg="green.200"
            source={{
              uri: 'https://pbs.twimg.com/profile_images/1188747996843761665/8CiUdKZW_400x400.jpg',
            }}
          >
            HO
          </Avatar>
          <Box ml="4">
            <Text fontSize="sm" color="white">
              Host
            </Text>
            <Text fontSize="sm" color="white">
              SE @100ms
            </Text>
          </Box>
        </Box>
      </HStack>
    </Pressable>
  );
}

Yup, that's it. That's the whole code. This is how easy NativeBase makes everything🤯.

Let's look at the code in detail and learn about some of the tiny details that make it even more awesome.

Everything is a token

Every component in NativeBase is styled using its comprehensive, professionally designed, and tested Design System, which was created to be extensible to represent the brand identity of your app. This allows you to use tokens available in the NativeBase theme.

And thus, we can use values like w="full", bg="fuchsia.800" , overflow="hidden" , borderRadius="16" all of which are tokens assigned to props. This style of passing styles props as individual values is known as “Utility Props”, which provides great Developer Experience. NativeBase embraces this idea fully, and uses “Utility Props”, instead of the default react-native StyleSheet approach.

Color Modes and Accessibility

NativeBase supports both light and dark mode out of the box, and all the inbuilt components are designed to work with both color modes. But what if you use something other than the default values. With NativeBase, using Pseudo Props this becomes terribly easy.

Let's look at an example, this is the JSX code for the HomeScreen, notice on line 1, we have _light, and _dark. In NativeBase, props that start with an underscore are called pseudo props and they are used to control conditional styling. In the case of light and dark modes, you can use these props to provide styles that will only apply when the color mode is light or dark.

Yes, it's that easy to add support for the dark mode to your components. On top of that, NativeBase used react-native-aria, so all the components are accessible by default, without you needing to do anything extra.

<Box flex="1" _light={{ bg: 'white' }} _dark={{ bg: 'darkBlue.900' }}>
  <VStack space="2" p="4">
    <Heading>Happening Now</Heading>
    <Text>Spaces going on right now</Text>
  </VStack>
  <ScrollView p="4">
    <VStack space="8">
      <SpaceCard
        onPress={() =>
          navigation.navigate('Space', {
            roomID: 'your-room-id-here',
          })
        }
      />   
    </VStack>
  </ScrollView>
</Box>

Adding Functionality

We use the 100ms SDK for react-native, which makes it extremely easy to get your add from just a collection of UI screens with static data to a full-blown functional app. The SDK is easy to set up and the documentation is great.

const fetchToken = async ({ roomID, userID, role }) => {
  const endPoint =
    'https://prod-in.100ms.live/hmsapi/geekyants.app.100ms.live/api/token';

  const body = {
    room_id: roomID,
    user_id: userID,
    role: role,
  };

  const headers = {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  };

  const response = await fetch(endPoint, {
    method: 'POST',
    body: JSON.stringify(body),
    headers,
  });

  const result = await response.json();
  return result;
};

async function joinRoom(hmsInstance, roomID, userID) {
  if (!hmsInstance) {
    console.error('HMS Instance not found');
    return;
  }

  const { token } = await fetchToken({
    roomID,
    userID,
    role: 'speaker',
  });

  const hmsConfig = new HMSConfig({ authToken: token, username: userID });

  hmsInstance.join(hmsConfig);
}

export default function Space({ navigation, route }) {
  const hmsInstance = useContext(HMSContext);
  const [isMute, setMute] = useState(false);
  const [participants, setParticipants] = useState([]);

  const userID = useRef('demouser').current;
  const roomID = useRef(route.params.roomID).current;

  useEffect(() => {
    if (hmsInstance) {
      hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, (data) =>
        console.error('ON_ERROR_HANDLER', data)
      );

      hmsInstance.addEventListener(
        HMSUpdateListenerActions.ON_JOIN,
        ({ room, localPeer, remotePeers }) => {
          const localParticipant = {
            id: localPeer?.peerID,
            name: localPeer?.name,
            role: localPeer?.role?.name,
            avatar: (
              <Circle w="12" h="12" p="2" bg="blue.600">
                {localPeer?.name?.substring(0, 2)?.toLowerCase()}
              </Circle>
            ),
            isMute: localPeer?.audioTrack?.isMute(),
          };

          const remoteParticipants = remotePeers.map((remotePeer) => {
            return {
              id: remotePeer?.peerID,
              name: remotePeer?.name,
              role: remotePeer?.role?.name,
              avatar: (
                <Circle w="12" h="12" p="2" bg="blue.600">
                  {remotePeer?.name?.substring(0, 2)?.toLowerCase()}
                </Circle>
              ),
              isMute: remotePeer?.audioTrack?.isMute(),
            };
          });

          setParticipants([localParticipant, ...remoteParticipants]);
        }
      );

      hmsInstance.addEventListener(
        HMSUpdateListenerActions.ON_ROOM_UPDATE,
        (data) => console.log('ON ROOM UPDATE', data)
      );

      hmsInstance?.addEventListener(
        HMSUpdateListenerActions.ON_PEER_UPDATE,
        ({ localPeer, remotePeers }) => {
          const localParticipant = {
            id: localPeer?.peerID,
            name: localPeer?.name,
            role: localPeer?.role?.name,
            avatar: (
              <Circle w="12" h="12" p="2" bg="blue.600">
                {localPeer?.name?.substring(0, 2)?.toLowerCase()}
              </Circle>
            ),
            isMute: localPeer?.audioTrack?.isMute(),
          };

          const remoteParticipants = remotePeers.map((remotePeer) => {
            return {
              id: remotePeer?.peerID,
              name: remotePeer?.name,
              role: remotePeer?.role?.name,
              avatar: (
                <Circle w="12" h="12" p="2" bg="blue.600">
                  {remotePeer?.name?.substring(0, 2)?.toLowerCase()}
                </Circle>
              ),
              isMute: remotePeer?.audioTrack?.isMute(),
            };
          });

          setParticipants([localParticipant, ...remoteParticipants]);
        }
      );

      hmsInstance?.addEventListener(
        HMSUpdateListenerActions.ON_TRACK_UPDATE,
        ({ localPeer, remotePeers }) => {
          const localParticipant = {
            id: localPeer?.peerID,
            name: localPeer?.name,
            role: localPeer?.role?.name,
            avatar: (
              <Circle w="12" h="12" p="2" bg="blue.600">
                {localPeer?.name?.substring(0, 2)?.toLowerCase()}
              </Circle>
            ),
            isMute: localPeer?.audioTrack?.isMute(),
          };

          const remoteParticipants = remotePeers.map((remotePeer) => {
            return {
              id: remotePeer?.peerID,
              name: remotePeer?.name,
              role: remotePeer?.role?.name,
              avatar: (
                <Circle w="12" h="12" p="2" bg="blue.600">
                  {remotePeer?.name?.substring(0, 2)?.toLowerCase()}
                </Circle>
              ),
              isMute: remotePeer?.audioTrack?.isMute(),
            };
          });

          setParticipants([localParticipant, ...remoteParticipants]);
        }
      );
    }

    joinRoom(hmsInstance, roomID, userID);
  }, [hmsInstance, roomID, userID]);
}

<>
  <VStack
    p="4"
    flex="1"
    space="4"
    _light={{ bg: "white" }}
    _dark={{ bg: "darkBlue.900" }}
  >
    <HStack ml="auto" alignItems="center">
      <IconButton
        variant="unstyled"
        icon={<HamburgerIcon _dark={{ color: "white" }} size="4" />}
      />
      <Button variant="unstyled">
        <Text fontSize="md" fontWeight="bold" color="red.600">
          Leave
        </Text>
      </Button>
    </HStack>
    <Text fontSize="xl" fontWeight="bold">
      Building a Twitter Space Clone in React Native using NativeBase and 100ms
    </Text>
    <FlatList
      numColumns={4}
      ListEmptyComponent={<Text>Loading...</Text>}
      data={participants}
      renderItem={({ item }) => (
        <VStack w="25%" p="2" alignItems="center">
          {item.avatar}
          <Text numberOfLines={1} fontSize="xs">
            {item.name}
          </Text>
          <HStack alignItems="center" space="1">
            {item.isMute && (
              <Image
                size="3"
                alt="Peer is mute"
                source={require("../icons/mute.png")}
              />
            )}
            <Text numberOfLines={1} fontSize="xs">
              {item.role}
            </Text>
          </HStack>
        </VStack>
      )}
      keyExtractor={(item) => item.id}
    />
  </VStack>
  <HStack
    p="4"
    zIndex="1"
    safeAreaBottom
    borderTopWidth="1"
    alignItems="center"
    _light={{ bg: "white" }}
    _dark={{ bg: "darkBlue.900" }}
  >
    <VStack space="2" justifyContent="center" alignItems="center">
      <Pressable
        onPress={() => {
          hmsInstance.localPeer.localAudioTrack().setMute(!isMute);
          setMute(!isMute);
        }}
      >
        <Circle p="2" borderWidth="1" borderColor="coolGray.400">
          {isMute ? (
            <Image
              size="8"
              key="mic-is-off"
              alt="mic is off"
              resizeMode={"contain"}
              source={require("../icons/mic-mute.png")}
            />
          ) : (
            <Image
              size="8"
              key="mic-is-on"
              alt="mic is on"
              resizeMode={"contain"}
              source={require("../icons/mic.png")}
            />
          )}
        </Circle>
      </Pressable>
      <Text fontSize="md">{isMute ? "Mic is off" : "Mic is on"}</Text>
    </VStack>
    <HStack ml="auto" mr="4" space="5">
      <Image
        size="7"
        alt="Participant Icon"
        source={require("../icons/users.png")}
      />
      <Image
        size="7"
        alt="Emojie Icon"
        source={require("../icons/heart.png")}
      />
      <Image size="7" alt="Share Icon" source={require("../icons/share.png")} />
      <Image
        size="7"
        alt="Tweet Icon"
        source={require("../icons/feather.png")}
      />
    </HStack>
  </HStack>
</>

We first join the room with room id. Then we fetch the authentication tokens by hitting the URL and creating an HMSConfig object, which we will use to connect to the room. Once we establish a connection, we will get events based on calls when things happen in the room.

For example, when some peer/user joins the room, we will get an event, and based on that, we can change the state of our data, which will lead to changes reflected in the UI. You can read more about it on the SDK and all the details of different things in the SDK documentation (‣)

Final Product

There we have it, a working demo of a feature minimal Twitter spaces clone. You can add many features to extend this and build an incredibly cool and feature-rich app ready for use in the real world 🙂.

Clone Experiment: Food Ordering web & mobile app using a single codebase

NativeBase — Tue, 01 Feb 2022 11:33:49 +0000

This experiment is a part of our NativeBase Clone Experiment Series. We have taken inspiration from famous food ordering apps to build our own using NativeBase React & React Native. The goal is to write the demo once and it will run anywhere with the behaviour of React Native.

Sneak peek

The final result of the experiment looked like this. Live demo.

Source code

The source code is available in this Github project.

Project setup

We have created a new project using Next.js CLI with NativeBase template by a simple command.

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

The difficult parts

Let's dive into the code of the below banner and understand how easy it is to build with NativeBase.

import React from "react";
import {
  Center,
  Image,
  HStack,
  Text,
  Heading,
  VStack,
  Icon,
  Divider,
  Input,
  Pressable,
} from "native-base";
import { AntDesign, Entypo, FontAwesome } from "@expo/vector-icons";

function Banner() {
  return (
    <VStack w="100%" h={500}>
      <Image
        position="absolute"
        zIndex="-1"
        source={{
          uri: "https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png",
        }}
        alt="Alternate Text"
        w="100%"
        h={500}
      />
      <HStack
        alignItems="center"
        justifyContent="space-between"
        mx={{ base: 10, md: 20, lg: 40 }}
        py={4}
      >
        <Pressable flexDir="row" alignItems="center">
          <Icon as={FontAwesome} name="mobile" size="xs" color="white" />
          <Text color="white" fontWeight="medium" fontSize="md">
            Get the App
          </Text>
        </Pressable>

        <HStack space={{ base: "5", sm: "10" }} alignItems="center">
          <Pressable>
            <Text color="white" fontWeight="medium" fontSize="md">
              Add restaurant
            </Text>
          </Pressable>
          <Pressable>
            <Text color="white" fontWeight="medium" fontSize="md">
              Log in
            </Text>
          </Pressable>
          <Pressable>
            <Text color="white" fontWeight="medium" fontSize="md">
              Sign up
            </Text>
          </Pressable>
        </HStack>
      </HStack>
      <Center mt={20} w="100%">
        <Image
          width={80}
          height={16}
          src={"/images/tomatoWhite.png"}
          alt="Alternate Text"
        />

        <Heading
          textAlign="center"
          w={{ base: "90%", md: "60%", lg: "48%" }}
          color="white"
          fontSize={{ base: "3xl", md: "3xl", lg: "3xl", xl: "4xl" }}
          fontWeight="normal"
          lineHeight="xs"
          mt={10}
          mx={{ base: 10 }}
        >
          Discover the best food &amp; drinks in Delhi NCR
        </Heading>

        <HStack
          bg="white"
          space="3"
          alignItems="center"
          w={{ base: "90%", md: "60%", lg: "48%" }}
          py={2}
          mt={12}
          borderRadius="lg"
        >
          <Pressable flexDir="row" alignItems="center">
            <Icon
              ml="2"
              as={Entypo}
              name="location-pin"
              size="6"
              color="red.400"
            />
            <Text color="coolGray.500" fontSize="md" mx="1">
              Bangla Sahib Gurdwara |
            </Text>
            <Icon
              as={AntDesign}
              name="caretdown"
              size="3"
              color="coolGray.600"
            />
            <Divider h={5} w={0.5} ml={2} orientation="vertical" />
          </Pressable>
          <HStack space="3" alignItems="center" flex={1}>
            <Icon
              ml={3}
              as={AntDesign}
              name="search1"
              size="5"
              color="coolGray.500"
            />
            <Input
              _hover={{ bg: "white" }}
              _focus={{ bg: "white" }}
              color="coolGray.500"
              fontSize="md"
              flex={1}
              borderWidth={0}
              outline="undefined"
            />
          </HStack>
        </HStack>
      </Center>
    </VStack>
  );
}

export default Banner;

Most of the components in NativeBase are self-explanatory.

Conclusion

Building this app with NativeBase was super easy and fun. Lines of code get reduced significantly with NativeBase. We discovered that by creating with NativeBase, we have access to all of the components that we can utilize directly. All of this was done while also being able to alter them in inconceivable ways for creating complex designs. By default support of Next.js, it lets you use its powerful features of it.

NativeBase Clone Experiments

NativeBase — Tue, 01 Feb 2022 09:51:24 +0000

NativeBase Clone Experiments is a showcase of work by developers who are pushing the boundaries of web & mobile technology with NativeBase, creating beautiful, unique experiences by taking inspirations from famous websites. You'll find helpful links throughout the blog for creating your own experiments, and you can also explore resources like using a single codebase to build web and mobile apps.

NativeBase uses React Native and React Native Web for the web support but without losing the best of both the worlds. For eg: We wrote our own mapping for accessibility that handles keyboard and mouse interactions and works seamlessly on all the platforms, we called it React Native Aria.

The idea behind these projects is to showcase a list of projects solving one critical problem each so that you won’t have to solve them.

You can browse the experiments below:

Food ordering clone experiment

Using NativeBase v3 the right way

NativeBase — Mon, 31 Jan 2022 12:38:45 +0000

Since the release of NativeBase v3, 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.

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

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:

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:

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:

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:

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:

Platform Pseudo Props:

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

<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.

<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:

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:

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:

// 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.

This article had originally been published on dev.to by Rohit Singh

Announcing NativeBase

NativeBase — Fri, 28 Jan 2022 11:17:04 +0000

We are stumped, and excited at the same time. No one predicted we would come this far with a UI component library for React Native. Back in 2016, we built a starter-kit for React Native and pulled out reusable components in a separate library. We dubbed it NativeBase.

The first version was just a bunch of components bundled together in an NPM package. Later, we released v2.0. It was quite an improvement considering the platform level design philosophies of Material and Cupertino design. Things have evolved since then.

With over 55,000 dependent projects and almost 16,000 stars on Github, we are ready for NativeBase 3.0—the new paradigm of utility-first library which makes the components reusable and adheres to a wide-spectrum of design. We strongly believe that its capabilities are the need of the hour.

We have tried our best to make the library flexible and customizable. But that is not what makes NativeBase 3.0 a game-changer. It is is the fact that it is now universal, it works on all the platforms, web and mobile. It behaves natively on those platforms with a focused support for accessibility (keyboard, mouse, screen readers). And how can I not mention, the most important feature (well at least for a lot of us)—the dark mode.

We stand in the middle of a very exciting time in tech when all the platforms are merging. And thanks to React Native and the folks in the community, this transformation is being made possible.

We, the NativeBase team, are doing our part to take this journey forward that would eventually help millions build quality software faster.

What’s new and improved?

Themability

Based on the Styled System Theme specification, NativeBase 3.0 has highly themeable core components. Using it, you can easily define features like your app’s color palette, type scale, font stacks, breakpoints, and border radius values. The only limitation is your imagination!.

Out of the box Accessibility

Integrated with React ARIA and React Native ARIA, which provides React hooks, this feature enables you to build accessible design systems in no time. The customizability and consistency offered by our framework allow one to code to their heart’s content.

accessibility

Utility Props

Inspired by Styled System so you can rapidly build custom UI components with constraint-based utility style props, the platform has been enhanced to provide expressive and consistent UI components which you can define according to your theme.

<Box px="3" py="2" mb="4" bg="primary.400" rounded="lg">
  <Text fontWeight="medium" color="white" fontSize="sm">
    Hey There!
  </Text>
</Box>

Customizable Theme

Theming is one of the core elements of NativeBase. You can customize the theme as per your liking. NativeBase theme is a complex object which can be easily extended and customized.

import React from "react";
import { NativeBaseProvider, extendTheme } from "native-base";
import { Content } from "./Content";

export default function () {
  const theme = extendTheme({
    colors: {
      // Add new color
      primary: {
        50: "#E3F2F9",
        100: "#C5E4F3",
        200: "#A2D4EC",
        300: "#7AC1E4",
        400: "#47A9DA",
        500: "#0088CC",
        600: "#007AB8",
        700: "#006BA1",
        800: "#005885",
        900: "#003F5E",
      },
      // Redefinig only one shade, rest of the color will remain same.
      amber: {
        400: "#d97706",
      },
    },
    config: {
      // Changing initialColorMode to 'dark'
      initialColorMode: "dark",
    },
  });

  return (
    <NativeBaseProvider theme={theme}>
      <Content />
    </NativeBaseProvider>
  );
}

Introducing Pseudo Props

Inspired by Chakra and other utility first libraries, we have also provided support for new Pseudo props. It covers various conditional domains like, platforms, color modes, interaction states etc.

<Button
  _hover={{
    _text: { color: "secondary.400" },
  }}
>
  Change My Color
</Button>

A demo—Kitchen Sink

To make NativeBase more comprehensible for users, we have also launched a simple demo app showcasing all the NativeBase components in action. Kitchen Sink gives an up-close demonstration of features like buttons, forms, and icons.

Rich Component Library

With NativeBase, you are spoilt for choice with over forty components pre-provided to enable seamless development. These components include buttons, action sheets, menus, spinners, popovers, breadcrumbs, and more.

Highly Responsive

NativeBase 3.0 allows you to provide object and array values to add responsive styles. This makes apps highly responsive and ideal for all kinds of display devices, from mobile phones to large desktops.

<Center
  bg="primary.400"
  rounded="xl"
  w={["24", "48", "72"]}
  h={{ base: "24", sm: "48", md: "72" }}
>
  This is a responsive box
</Center>

Introducing Dark Mode

NativeBase now supports dark and light themes by default. It just got a whole lot easier to build a dark mode setting for your apps.

function UseColorMode() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Box flex={1} bg={colorMode === "dark" ? "black" : "coolGray.300"}>
      <Button m={2} ml="auto" onPress={toggleColorMode}>
        Toggle
      </Button>
      <Center flex={1}>
        <Button
          _light={{ bg: "teal.600", _text: { color: "white" } }}
          _dark={{ bg: "amber.500" }}
        >
          Sample
        </Button>
      </Center>
    </Box>
  );
}

export default function () {
  return (
    <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>
  );
}

Consistent Across Platforms

Built using the React Native Framework, we are trying to bring to you a native experience which is consistent across all platforms. iOS, Android or web— all features are created to be highly desirable for developers. You can also fast-track your dev process with universal components for reliable and organised coding.

The Future of NativeBase 2.0 & 3.0

Over the years, NativeBase has been used as the desired framework for over 50k projects worldwide. The same has happened for NativeBase 3.0 and we are humbled by the love we’ve received so far, in terms of downloads and starts received on GitHub.

With the onset of NativeBase 3.0, we thought it will be best to slow down NativeBase 2.0 and help users migrate to v3.0. NativeBase 2.0 will still be supported by us for the time being, which means that if your app is dependent on NativeBase 2.0 and you don’t want to upgrade just yet (which you should), you can continue to use it for as long as you like. We will also support critical bug fixes in v2.0 till March, 2022.

The NativeBase 2.0 blog, however, is now deprecated but is still available as an archive where you can read about NB 2.0 and everything around the legacy NativeBase. Find it here.

We’re really excited to share NativeBase 3.0 with you and the rest of the community. We really hope that you like it and help us improve it. We also have plans of introducing a starter kit, NativeBase StartUp+, which are over 100+ production-ready UI screens that work on web and native platforms, which will be coming soon. Meanwhile, do follow us on our Discord channel and Twitter for further updates.

NativeBase Meets Figma

NativeBase — Thu, 27 Jan 2022 11:50:19 +0000

Introduction

The NativeBase team is excited to bring the most requested addition into the NativeBase ecosystem—an amalgamation with Figma.

With the goodness of Figma, we present the “NativeBase Design Kit” to help you design consistent UI at scale for various platforms. The file contains variants of all the UI components from the NativeBase Library. All the style properties and components in the file are the exact designs of the component library we used to build the components. Now you can recreate your Figma designs to code projects using the NativeBase utility classes in the blink of an eye.

We indeed have come full circle.

We ensured that all the elements you use to design stay consistent throughout your project. Typography, spacing, colors, or other components—everything follows the NativeBase standard.

Something for everyone

Designers

This UI kit will help create versatile designs on top of the NativeBase foundation as a designer. You can customize the kit according to your branding guidelines.

Product Managers

The NativeBase Figma file bridges the gap between designers and developers. It ensures a smooth transition between what is designed and developed. Focus on the business logic, and leave the rest to the library!

Developers

Have a visual representation of the design to ensure fewer surprises when building the UI. You can browse through our wide range of variants and choose from existing tokens.

Foundation - Style Guide

The style guide is a foundation tool for any design system to help ensure design consistency. Every component on this Figma file is built around the ‘NativeBase Design System’ foundation. It includes colors, typography, and more.

Auto Layout

We can easily create components to change the sizes without easily distorting the spacing and positioning. If you are designing for multiple platforms, you don’t need to design each component numerous times. Now you can use the NativeBase Design System on Figma and stretch the components depending on the size you require. The components will keep the elements intact with consistent spacing and positioning.

Components and Variants

The Figma file has 29 components with over 780 variants consisting of all the variants from the NativeBase library. For example, an alert component consists of four themes and six styles for each theme. You can select any one style that goes well with your design.

Responsive Designs

With increasing mobile users, designing for multiple platforms is equally important. We have made sure that the components at NativeBase Design Systems are responsive, meaning one component will fit and look good on all regardless of the screen size. We can easily adjust the responsive designs to different sizes and custom viewports.

Dark and Light theme

Most traditional apps still use a light background with a text of dark color. But the darker themes have been in trend for quite some time now. It can be just for the appearance, but darker themes help increase the accessibility drastically. All the themes are designed keeping accessibility in mind. We have variants of both light and dark themes to decide your preference.

What’s Next...

We are thrilled to share some upcoming milestones with our community that the team has been tirelessly working on over the last few weeks. With the launch of the NativeBase v3 design kit, there has been no time to rest.

All of the positive feedback from the community has energized us and is pushing us even harder to deliver. We will soon be launching a v4 version of the kit, which will address component states, color contrast, accessibility, and more. Join our discord channel to stay on trend with the latest updates..

Go and check the NativeBase Figma file.