🛒 How to get the Starter kit
Getting your hands on the Starter kit is easy. Just visit startup.nativebase.io and click on Free Screens on the header.
The screens have been designed with the latest design trends and language. Every screen supports Typescript, and we have defined the
types throughout all the screens (so you don't have to 😀). If you have any questions, you can reach out to the team, who will be happy to help you with your issues.We have also broken down all the screens into small reusable components to make it much easier in case you want to pick and choose components for customization and use them as needed in your project.
All the screens are made responsive for all the platforms like iOS, Android, and Web with the same codebase. Hence you don't have to worry about making the screens responsive and writing separate code for each platform.
📁 Setting up the Starter kit
Download the zipped folder attached with the subscription mail. When you unzip the folder you will see the following folder structure.
As you can see, all screens are arranged according to their functions and usage. From here, it is just a matter of copy-pasting the code to your project after modifying the Figma file.
🧰 Using screens from the Starter kit:
Let us create a simple food delivery application to demonstrate how to best use the Starter kit.
While making a
Food delivery application, we need specific sets of screens to make the application come to life. We will need screens for User Login, Order Summary, User Profile Screen, and Feed Screen. So taking these screens as an example, let us see how we will use the Starter kit to speed up the application development process.
Building the Landing screen
The Landing Page for any application is the user’s first point of interaction and can be used to showcase the brand’s personality. We can use these screens (code snippet below) as templates and make a landing page to suit the service we are providing.
<Box
alignItems="center"
justifyContent="center"
>
<Image
source={require('./images/splash.png')}
height="200"
width="250"
alt="Alternate Text"
/>
</Box>Here, if we look at the code, we can see that just by replacing the
source prop passed in Image we can add our own custom logo or image to suit our brand. Creating the Login screen:
To create a login screen, we can use the Login screen code snippet below and customize it for the application. So, what we need to do is look into the
Modules. Under modules, go for the sign-in screen.
<Text fontWeight="bold" color="white">
Welcome back,
</Text>
<Text fontWeight="bold" color="white">
(text of your choice)
</Text>On opening the
signIn.tsx file, we see the code for the following screen. We can use the same code if we use the same screen or modify the code based on brand guidelines.For example, let us say that we want to change the text ‘Welcome Back’ to something else. We can replace the ‘Welcome back’ text with the one we need. It is that simple. Everything will get updated automatically — padding, font size, placement, etc. 💯
Creating the Profile screen:
To design Profile screens, we can use one of the Startup+ screens (code snippet shown below) and customize it for your application. Under modules, go for the
userProfileScreen screen.
<Box
alignItems="center"
_light={{ bg: 'primary.900' }}
_dark={{ bg: 'coolGray.900' }}
>
<Avatar
source={require('./images/janedoe.png')}
width={20}
height={20}
/>
<HStack alignItems="center" justifyContent="center" space={2} mt={3.5}>
<Text fontSize="xl" fontWeight="bold" color="coolGray.50">
Jane Doe
</Text>
<IconButton
icon={
<Icon
as={MaterialIcons}
name="mode-edit"
size={5}
/>
}
/>
</HStack>
</Box>On opening the
userProfileScreen.tsx file, we see the code for the profile screen. We can use the same code if we use the same screen or modify the code based on brand guidelines. For example, let us say that we want to change the
Avatar and Name. We can change the name, as displayed below. For the avatar, we can replace the Avatar with the one we need. And padding, font size, placement, etc., get adjusted automatically.
<Box
alignItems="center"
_light={{ bg: 'primary.900' }}
_dark={{ bg: 'coolGray.900' }}
>
<Avatar
width={20}
height={20}
>
(Changes to be made here based on requirement)
</Avatar>
<HStack alignItems="center" justifyContent="center" space={2} mt={3.5}>
<Text fontSize="xl" fontWeight="bold" color="coolGray.50">
(Changes to be made here based on requirement)
</Text>
</HStack>
</Box>The same idea applies to any number of components on the screen and the components can be customized based on our needs.
Creating the Feed Screen:
To design Feed screens, go to the News and Feed module and look for
Feed Screen under this module. On opening the feed.tsx file, we see the code for the feed screen. The screen can then be customized as required. For example, let’s say that we want to change certain aspects of the screen like the images on the stories. All we have to do is change the name, as displayed below. For the avatar, we can just replace the Avatar with the one we need. Padding, font size, placement, etc. get adjusted automatically.
function Stories({ storiesData }: { storiesData: StoryProps[] }) {
const Story = ({ story }: { story: StoryProps }) => (
<HStack pl={{ base: 4, md: 4 }} flex={1} justifyContent="space-evenly">
<VStack space={1} alignItems="center">
<Pressable>
<Avatar
width="16"
height="16"
borderWidth="2"
p={0.5}
source={story.image}
borderColor="red.500"
bg="transparent"
/>
</Pressable>
<Text fontSize="xs" fontWeight="normal">
{story.text}
</Text>
</VStack>
</HStack>
);
return (
<Card rounded={{ md: 'sm' }}>
<VStack width="100%" py={{ base: 4, md: 4 }} space={{ base: 1 }}>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={storiesData}
renderItem={({ item, index }) => (
<Story key={`story-${index}`} story={item} />
)}
/>
</VStack>
</Card>
);
}
NOTE: Here as we can see that we have used some random data to show the layout of the story section of the feed screen. If the need arises to change the text or the Avatar, we can modify the text and the avatar piece of code, which will quickly reflect on the screen.
function Stories({ storiesData }: { storiesData: StoryProps[] }) {
const Story = ({ story }: { story: StoryProps }) => (
<HStack pl={{ base: 4, md: 4 }} flex={1} justifyContent="space-evenly">
<VStack space={1} alignItems="center">
<Pressable>
<Avatar
......
source={Add your required path here}
borderColor="red.500"
bg="transparent"
/>
</Pressable>
<Text fontSize="xs" fontWeight="normal">
{Add your required text here}
</Text>
</VStack>
</HStack>
);🏁 Build applications faster
The NativeBase Startup+ bundle saves a lot of effort and eliminates the need to rewrite the same piece of code for the same sets of screens repeatedly. With a slight change in the theme file, you can create a display profile and theme that fits your requirements.
The design file and their source code are entirely responsive, production-ready, and can work on all platforms without making any noticeable change to the codebase. The bundle will significantly power up your application development efforts and goals.
🔮 How it started and Future plans
NativeBase has come a long way since its inception in 2016. Today, it is one of the most loved UI libraries, has 17k+ GitHub stars ⭐, and boasts a thriving community of developers and designers. Its ability to provide universal components with a single codebase has made it the go-to library of choice.
So when the question of “what next?” came, we thought long and hard. Finally, we decided to bridge the gaping chasm that bogged down designing and developing an application—the need to code everything from scratch, even though some tasks were repetitive. That seemed to be the biggest priority for the new millennial.
The team is working tirelessly to improve the quality of code. We have recently refactored all the code screens and added new screens. The NativeBase version has also been updated for faster processing and a better experience. More updates are incoming.
