Creating a Universal App with NativeBase and Solito | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
3.4.x
Search
⌘
K
Hire us
Nativebase logo
NativeBase
Introduction
Getting Started
Installation
Setup NativeBase Provider
Resources
Contribution
Creating a Universal App with NativeBase and Solito
New
Core Concepts
Utility First
Utility Props Specificity
Design Tokens
Pseudo Props: Overview
Pseudo Props: Dos & Don'ts
Internal Pseudo Props
New
Responsive
Features
Utility Props
Color mode (Dark Mode)
NativeBase Factory
SafeAreaView Props
Strict Mode
Accessibility
Theme
Default Theme
Customizing Theme
Customizing Fonts
Customizing Components
Making components dark mode compatible
Breakpoints
Using Theme
TypeScript
Layout
AspectRatio
Box
Center
Container
Flex
HStack / Row
Stack
VStack / Column
ZStack
Forms
Button
Pressable
Checkbox
FormControl
IconButton
Input
Link
Radio
Select
Slider
Switch
TextArea
Data Display
Badge
Divider
Feedback
Alert
Progress
Skeleton
Spinner
Toast
Update
Typography
Text
Heading
Overlay
AlertDialog
Menu
Modal
Popover
Tooltip
Disclosure
ActionSheet
Media and Icons
Avatar
Icon
Image
Transition
PresenceTransition
Slide
Stagger
Others
Fab
Hidden
ReactNative Components
ScrollView
View
KeyboardAvoidingView
StatusBar
FlatList
SectionList
Hooks
useDisclose
useBreakpointValue
useClipboard
useMediaQuery
useTheme
useToken
useColorMode
useColorModeValue
useContrastText
useAccessibleColors
Examples
Todo-List
Kitchen Sink
Recipes
Designs
AppBar
Card
Drawer Navigation
Tab View
Swipe List
Forms
Form with Validation
Login/Signup Forms
SearchBar
Layout
App Drawer
Footer
Migration
Upgrading to v3
Upgrading to 3.2.0 from 3.x
Upgrading to 3.4.0 from 3.3.x
Components Migration
ActionSheet
Badge
Button
Card
Checkbox
DatePicker
DeckSwiper
Drawer
FABs
FooterTab
Form
Header
Icon
Layout
Picker
Radio Button
Searchbar
Segment
Spinner
SwipeList
Tabs
Thumbnail
Toast
Typography
More
Changelog
Testing
FAQ's
More Props
If you are starting a new project, please try gluestack-ui for better performance and new design.
Creating a Universal App with NativeBase and Solito
For a long time, the React Native community has been looking for a way to make Universal Apps a reality with Server Side Rendering support. The major roadblock that was stopping us was Navigation. Solito is the most probable answer. NativeBase already works on all three platforms, as we know, making the NativeBase and Solito combination a match made in heaven. With it, your next application can run with the same codebase on all three platforms. Here is how to proceed.
Note: If you are looking to make your current codebase into a universal app, It’s really tricky and different for different codebases. Feel free to reach out to us on our Discord Server with such use cases, we will try to help you out as much as we can.
We have already done the hard work for you and created a starter kit for you to start with.
Getting Started
Setting up without TypeScript:
Clone the repo:
https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase
Run yarn or npm install on the root directory.
Then run yarn or npm install in apps/expo and apps/next.
Now run yarn or npm install in packages/app.
That’s it your starter kit is ready to be used.
All your screens and components will be present in packages/app and this can be accessed in the next and expo projects.
Setting up with TypeScript:
Clone the repo:
https://github.com/GeekyAnts/nativebase-templates/tree/master/solito-universal-app-template-nativebase-typescript
Run yarn or npm install on the root directory.
Then run yarn or npm install in apps/expo and apps/next.
Now run yarn or npm install in packages/app.
That’s it your starter kit is ready to be used.
All your screens and components will be present in packages/app and this can be accessed in the next and expo projects.
Previous
Contribution
Next
Utility First
Quick Nav
Getting Started
Setting up without TypeScript:
Setting up with TypeScript:
Nativebase logo
MadeWithNativeBase
Gluestack logo
gluestack-ui