BranchesTags

Repository files navigation

react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit

Get Started

Installation

Follow these instructions to install React Native Elements!

Usage

Start using the components or try it on Snack here.

import{Button}from'react-native-elements';<Button/>;

Components included:

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Demo App

Checkout the official React Native Elements App on Expo which uses all of the React Native Elements components.

If you are looking to contribute to the React Native Elements App, click here to view the implementation & run the RNE expo app locally.

Documentation

View the full docs here

Contributing

Interested in contributing to this repo? Check out our Contributing Guide and submit a PR for a new feature/bug fix.

A big shoutout to all our contributors! You could be here too!

First Contributors

We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label Good First Issue on the issues. Click here to see them.

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

Core Contributors

We are currently looking for new core contributors that can help lead this project.

Learn more here

Slack Community

In case you have any other question or would like to come say Hi! to the RNE community, join our Slack team. See you on the other side! 👋😃

Backers

Become a backer and show your support for React Native Elements.

React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer

Sponsors

Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.

React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer

About

Cross Platform React Native UI Toolkit

react-native-elements.github.io/react-native-elements/

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
react-native-elements

Cross Platform React Native UI Toolkit


React Native Elements UI Toolkit
Get Started
Installation
Follow
these instructions
to install React Native Elements!
Usage
Start using the components or try it on Snack
here.
import{Button}from'react-native-elements';<Button/>;
Components included:
React Native Web support
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.
Click here for a full walkthrough using React Native Elements + React Native Web.
Demo App
Checkout the official
React Native Elements App
on Expo which uses all of the React Native Elements components.
If you are looking to contribute to the React Native Elements App, click
here to
view the implementation & run the RNE expo app locally.
Documentation
View the full docs here
Contributing
Interested in contributing to this repo? Check out our
Contributing Guide
and submit a PR for a new feature/bug fix.
A big shoutout to all our contributors! You could be here too!
First Contributors
We encourage everyone to contribute & submit PR's especially first-time
contributors. Look for the label Good First Issue on the issues. Click
here
to see them.
If there is something you's like to see or request a new feature, please submit
an
issue
or a
pull request.
Core Contributors
We are currently looking for new core contributors that can help lead this project.
Learn more here
Slack Community
In case you have any other question or would like to come say Hi! to the RNE
community, join our Slack team.
See you on the other side! 👋😃
Backers
Become a backer and show your support for React Native Elements.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
Sponsors
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info.
React Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements BackerReact Native Elements Backer
About
Cross Platform React Native UI Toolkit
react-native-elements.github.io/react-native-elements/
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages