Skip to content
BranchesTags

Repository files navigation

NativeBase Build Statusnpm version

NPM

NPM

Essential cross-platform UI components for React Native

Updated docs here!

DemoDemo

Table of Content

  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators

1. What is NativeBase?

NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.

2. Why NativeBase?

What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.

Recommended byMicrosoft

If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo

Recommended by Awesome React Native

NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.

4. Getting Started

Install NativeBase

npminstallnative-base--save

Install Peer Dependencies
The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.

react-nativelink

You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.

Setup with CRNA

Create React Native project using the CRNA cli.
CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux.
Refer to this link for additional information CRNA

Install NativeBase

npminstallnative-base--save

Install @expo/vector-icons

npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.
Synatx 

asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.

5. Components

NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.

6. Native Starter Kit

A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android. Take a look at the demo

7. NativeBase Market

Having tried with the free version, Native Starter Kit and appreciate our product?

Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.
A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps.

8. Documentation

Go through NativeBase Docs to play with NativeBase.

9. Website

https://nativebase.io/

10. Quick Links to NativeBase

11. About the creators

We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.

About

Essential cross-platform UI components for React Native

nativebase.io/

Resources

Readme
Apache-2.0 license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - ghsdh3409/NativeBase: Essential cross-platform UI components for React Native · GitHub
Skip to content
BranchesTags
Repository files navigation
NativeBase Build Statusnpm version
NPM
NPM
Essential cross-platform UI components for React Native
Updated docs here!
DemoDemo
Table of Content
  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. Native Starter Kit
  7. Featured Apps
  1. Documentation
  2. Website
  3. Quick Links to NativeBase
  4. About the creators
1. What is NativeBase?
NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.
2. Why NativeBase?
What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.
Recommended byMicrosoft
If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo
Recommended by Awesome React Native
NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.
4. Getting Started
Install NativeBase
npminstallnative-base--save
Install Peer Dependencies

The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.
react-nativelink
You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.
Setup with CRNA
Create React Native project using the CRNA cli.

CRNA helps you make React Native apps with no build configuration. Create React App works on macOS, Windows, and Linux. 

Refer to this link for additional information CRNA
Install NativeBase
npminstallnative-base--save
Install @expo/vector-icons
npminstall @expo/vector-icons--save

Note
NativeBase uses some custom fonts that can be loaded using loadAsync function. Check out this expo link.


Synatx 
asynccomponentWillMount(){awaitExpo.Font.loadAsync({'Roboto': require('native-base/Fonts/Roboto.ttf'),'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),});

Check out the KitchenSink with CRNA for an example of the implementation.
5. Components
NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.
6. Native Starter Kit
A simple starter project for React Native + NativeBase + Redux + CodePush + React Native Navigator apps on iOS and Android.
Take a look at the demo
7. NativeBase Market
Having tried with the free version, Native Starter Kit and appreciate our product?
Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps.

A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps. 
8. Documentation
Go through NativeBase Docs to play with NativeBase.
9. Website
https://nativebase.io/
10. Quick Links to NativeBase
11. About the creators
We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.
About
Essential cross-platform UI components for React Native
nativebase.io/
Resources
Readme
Apache-2.0 license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages