# React Native + NativeWind Template A minimal but robust template for React Native projects using NativeWind (TailwindCSS), Expo Router, and TypeScript with built-in dark/light theme support. ## š Quick Start ```sh git clone https://github.com/SalehAhmed10/Expo-ReactNative-NativeWind-Tailwind-Template.git ``` ``` cd Expo-ReactNative-NativeWind-Tailwind-Template npm install npx expo start ``` ## š¦ What's Included - ā”ļø Expo Router for navigation - šØ NativeWind (TailwindCSS) for styling - š Dark/Light theme with system sync - š± Responsive design ready - š TypeScript for type safety ## šØ Theme System The template includes a complete theme system with: - System theme detection - Manual theme toggle - HSL color system with opacity support - Consistent styling across light/dark modes ## ā ļø Known Issues & Fixes ### 1. NativeWind Babel Error **Fix**: Use NativeWind version 2.0.11 json { "dependencies": { "nativewind": "^2.0.11" } } ## š Project Structure āāā app/ ā āāā layout.tsx # Root layout with theme provider ā āāā index.tsx # Home screen ā āāā +not-found.tsx # 404 page āāā components/ ā āāā ThemeToggle.tsx # Theme toggle component āāā context/ ā āāā ThemeProvider.tsx # Theme management āāā babel.config.js āāā tailwind.config.js # Theme configuration āāā tsconfig.json ## š Configuration Files ### tailwind.config.js Contains theme colors and configuration. Modify this file to customize your color scheme. ### babel.config.js Includes necessary configuration for NativeWind. ## š± Supported Platforms - iOS - Android - Web (with appropriate configuration) ## š License MIT ## š¤ Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Read Post Here
# HELLO WORLD ### pragraph > assadadasdassssssssssd *** *** ```js const text = "hello" ``` --- ``` asdadasdsad ``` 
Read Post Here
# [react-markdown](https://www.npmjs.com/package/react-markdown#react-markdown) [](https://github.com/remarkjs/react-markdown/actions) [](https://codecov.io/github/remarkjs/react-markdown) [](https://www.npmjs.com/package/react-markdown) [](https://bundlejs.com/?q=react-markdown) [](https://opencollective.com/unified) [](https://opencollective.com/unified) [](https://github.com/remarkjs/remark/discussions) React component to render markdown. ## [Feature highlights](https://www.npmjs.com/package/react-markdown#feature-highlights) - \[x\] **[safe](https://www.npmjs.com/package/react-markdown#security) by default** (no `dangerouslySetInnerHTML` or XSS attacks) - \[x\] **[components](https://www.npmjs.com/package/react-markdown#appendix-b-components)** (pass your own component to use instead of `<h2>` for `## hi`) - \[x\] **[plugins](https://www.npmjs.com/package/react-markdown#plugins)** (many plugins you can pick and choose from) - \[x\] **[compliant](https://www.npmjs.com/package/react-markdown#syntax)** (100% to CommonMark, 100% to GFM with a plugin) ## [Contents](https://www.npmjs.com/package/react-markdown#contents) - [What is this?](https://www.npmjs.com/package/react-markdown#what-is-this) - [When should I use this?](https://www.npmjs.com/package/react-markdown#when-should-i-use-this) - [Install](https://www.npmjs.com/package/react-markdown#install) - [Use](https://www.npmjs.com/package/react-markdown#use) - [API](https://www.npmjs.com/package/react-markdown#api) - [`Markdown`](https://www.npmjs.com/package/react-markdown#markdown) - [`defaultUrlTransform(url)`](https://www.npmjs.com/package/react-markdown#defaulturltransformurl) - [`AllowElement`](https://www.npmjs.com/package/react-markdown#allowelement) - [`Components`](https://www.npmjs.com/package/react-markdown#components) - [`ExtraProps`](https://www.npmjs.com/package/react-markdown#extraprops) - [`Options`](https://www.npmjs.com/package/react-markdown#options) - [`UrlTransform`](https://www.npmjs.com/package/react-markdown#urltransform) ## [Install](https://www.npmjs.com/package/react-markdown#install) This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). In Node.js (version 16+), install with [npm](https://docs.npmjs.com/cli/install): ```shell npm install react-markdown ``` In Deno with [`esm.sh`](https://esm.sh/): ```js import Markdown from 'https://esm.sh/react-markdown@9' ``` In browsers with [`esm.sh`](https://esm.sh/): ```html <script type="module"> import Markdown from 'https://esm.sh/react-markdown@9?bundle' </script> ``` ## [Use](https://www.npmjs.com/package/react-markdown#use) A basic hello world: ```js import React from 'react' import {createRoot} from 'react-dom/client' import Markdown from 'react-markdown' const markdown = '# Hi, *Pluto*!' createRoot(document.body).render(<Markdown>{markdown}</Markdown>) ``` Show equivalent JSX ```js <h1> Hi, <em>Pluto</em>! </h1> ``` Here is an example that shows how to use a plugin ([`remark-gfm`](https://github.com/remarkjs/remark-gfm), which adds support for footnotes, strikethrough, tables, tasklists and URLs directly): ```js import React from 'react' import {createRoot} from 'react-dom/client' import Markdown from 'react-markdown' import remarkGfm from 'remark-gfm' const markdown = `Just a link: www.nasa.gov.` createRoot(document.body).render( <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown> ) ```
Read Post Here