Core
Expo: Create amazing apps that run everywhere
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
🚀 Quick Start:
npx create-expo-app@latest
Typescript: JavaScript with syntax for types
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
Training in playground here.
Style
Paper: Making your React Native apps look and feel native
React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases.
Interactions, animations and accessibility.
React-native-paper takes care of the details and your UI logic, so you can focus on your users.
NativeWind
NativeWind allows you to use Tailwind CSS to style your components in React Native.
import { Text } from "react-native";
export function MyText({ bold, italic, lineThrough, ...props }) {
const classNames = [];
if (bold) classNames.push("font-bold");
if (italic) classNames.push("italic");
if (lineThrough) classNames.push("line-through");
return <Text className={classNames.join(" ")} {...props} />;
}
Simple setup with plugins for improved intellisense support and automatic TypeScript configuration.
Shadcn
Universal shadcn/ui for React Native featuring a focused collection of components - Crafted with NativeWind v4 and accessibility in mind.
Animation
Reanimated: Create smooth animations with an excellent developer experience
React Native Reanimated is a powerful animation library built by Software Mansion.
function App() {
const width = useSharedValue(100);
const handlePress = () => {
width.value = withSpring(width.value + 50);
};
return <Animated.View style={{ ...styles.box, width }} />
}
Animate every React Native prop on iOS, Android and the Web up to 120 fps.
Moti
Moti is the universal animation package for React Native, made by Fernando Rojo.
<MotiView
from={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
Moti uses Reanimated 3 under the hood to drive high-performance animations on iOS, Android and Web.
Installation
npm i moti --legacy-peer-deps
State Managment
Zustand
A small, fast, and scalable bearbones state management solution. Zustand has a comfy API based on hooks. It isn't boilerplatey or opinionated, but has enough convention to be explicit and flux-like.
Installation
npm install zustand
# Or, use any package manager of your choice.
TanstackQuery
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
Installation
npm i @tanstack/react-query
Testing
RN Testing
Installation
npm install -D @testing-library/react-native
The React Native Testing Library (RNTL) is a comprehensive solution for testing React Native components. It provides React Native runtime simulation on top of react-test-renderer, in a way that encourages better testing practices.
Must-have packages
RN MMkv
⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!
React Hook Form
Installing React Hook Form only takes a single command and you're ready to roll.
npm install react-hook-form
FlashList
FlashList is a React Native component that allow you to render large lists of data efficiently.
Installation
npx expo install @shopify/flash-list expo-dev-client
Zeego
Beautiful, native menus for React Native + Web, inspired by Radix UI.
Clerk: The most comprehensive User Management Platform
Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.
RevenueCat
The world's best apps use RevenueCat to power in-app purchases, manage customer data, and grow revenue across iOS, Android, and the web.
React Native Gesture Handler
React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.
Top comments (0)