101 posts tagged with "React Native"

In the world of React Native development, creating efficient and responsive lists is a common task. One of the go-to components for this purpose is the FlatList. In this comprehensive tutorial, we will take a deep dive into React Native’s FlatList component. We’ll cover everything you need to know to use FlatList effectively in your React Native applications.

KeyboardAvoidingView is the built-in React Native component for moving or resizing content when the software keyboard appears. It is useful for simple forms, authentication screens, checkout fields, profile edits, and support flows.

The tricky part is that keyboard behavior differs by platform, navigation header, safe area, scroll container, modal presentation, and Android window settings. Treat keyboard handling as a screen-level layout decision, not a wrapper you add around the whole app.

React Native performance work should start with measurement, not guesses. Most slow apps are not slow everywhere. They are slow on a few screens: feeds, checkout, chat, onboarding, maps, image grids, video playback, or cold start.

React Context and Redux solve different parts of the state problem. Context lets a parent make a value available deep in the component tree. Redux Toolkit gives you a predictable external store with reducers, actions, middleware, selectors, DevTools integration, and a mature ecosystem.

For React Native apps, the right answer is usually a mix: local component state for local UI, Context for low-frequency app-wide values, server-state tools or backend listeners for remote data, and Redux Toolkit only when global client state is complex enough to deserve a store.

Network bugs are some of the most common React Native production issues. A screen may fail because the request is wrong, the token is missing, Firebase rules reject the user, App Check blocks the call, the backend returns a 500, or the simulator cannot reach the host.

Visual Studio Code (VSCode) is a popular code editor among React Native developers due to its rich features and extensive ecosystem. In this blog post, we will explore some valuable tips to enhance your React Native development workflow using VSCode.

React Native Debugger was a popular standalone debugger for older React Native apps. For modern projects, the recommended starting point is React Native DevTools, which is built into the React Native development workflow.

AWS Amplify is a framework that lets us develop a web or mobile application quickly. In this tutorial, we are going to continue to learn how to perform CRUD operations with the database by using GraphQL mutations. AWS Amplify has a complete toolchain wiring and managing APIs with GraphQL. The API we will be creating in this tutorial is a GraphQL API using AWS AppSync (a managed GraphQL service) and the database will be Amazon DynamoDB (a NoSQL database).

A bottom sheet is a mobile surface that slides up from the bottom of the screen. It is useful for filters, sorting controls, checkout options, map place details, share menus, comments, media actions, and short forms.

React Native bottom sheets are gesture-heavy. A production implementation needs more than a visible prop: it needs Gesture Handler, Reanimated, stable snap points, keyboard behavior, safe areas, scrollable content, and cleanup around navigation.

Animated.View is the built-in React Native way to animate a view's opacity, transform, position, and other supported styles. It is still useful for simple microinteractions: fade-ins, scale feedback, loading motion, card entrance animations, and small transitions that do not need complex gesture logic.

For heavy gesture-driven UI, shared element transitions, and UI-thread worklets, React Native Reanimated is usually the better tool. For simple screen polish, the core Animated API is still enough.