DEV Community: Aleksei Kharitonov

I Built an AI Chat in React Native in 30 Lines — Here's the Library That Made It Possible

Aleksei Kharitonov — Wed, 15 Apr 2026 13:47:14 +0000

You know that feeling when you need to add an AI chat to your React Native app, and suddenly you're dealing with polyfills, manual EventSource implementations, token counting, streaming state management, and a dozen edge cases nobody warned you about?

Yeah. I had that feeling too. So I built react-native-ai-kit — one package that handles all of it.

The Problem

React Native doesn't have the browser EventSource API. If you want streaming AI responses (and you do — nobody wants to stare at a blank screen for 10 seconds while GPT thinks), you're stuck with:

Writing your own SSE parser from scratch
Managing streaming state with useRef and useEffect spaghetti
Handling abort/cleanup on unmount manually
Building chat UI from scratch every time
Adapting response formats for every different LLM provider

Existing libraries either lock you into a single provider, don't handle streaming properly, or give you a hook and say "good luck with the UI."

The Solution

react-native-ai-kit gives you everything in one install:

SSE client with automatic reconnection
React hooks for streaming and chat management
Ready-made UI components
Parsers for structured data extraction

And it works with any LLM backend — OpenAI, Anthropic, Ollama, your own API. No framework lock-in.

30 Lines. That's It.

import { useChat, ChatList, ChatBubble } from 'react-native-ai-kit';

function ChatScreen() {
  const { messages, sendMessage, isStreaming } = useChat({
    apiUrl: 'https://api.openai.com/v1/chat/completions',
    systemPrompt: 'You are a helpful assistant.',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.EXPO_PUBLIC_OPENAI_KEY}`,
    },
  });

  return (
    <ChatList
      messages={messages}
      renderMessage={(msg) => (
        <ChatBubble
          message={msg}
          variant={msg.role === 'user' ? 'user' : 'assistant'}
        />
      )}
    />
  );
}

No polyfills. No manual state management. No EventSource hacks. Just a working AI chat.

What's Inside

`useChat` — The All-in-One Hook

Handles messages, history, streaming, retry, and token tracking.

const {
  messages,      // Message[]
  sendMessage,   // (content: string) => void
  isStreaming,   // boolean
  tokenUsage,    // { promptTokens, completionTokens, totalTokens } | null
  retry,         // () => void
  stop,          // () => void
  clear,         // () => void
  error,         // Error | null
} = useChat(config);

Token usage comes for free — track costs without extra API calls.

`useAIStream` — Low-Level Control

When you need raw streaming access without the chat management layer:

const { text, status, send, abort, reset } = useAIStream({
  apiUrl: 'https://api.anthropic.com/v1/messages',
  // ...
});

UI Components

ChatList — FlatList with auto-scroll
ChatBubble — User/assistant message variants with avatar support
StreamingText — Animated typing effect with deferred Markdown rendering

<StreamingText
  text={streamingText}
  showCursor
  renderContent={(text) => <Markdown>{text}</Markdown>}
/>

Markdown rendering is deferred until the stream completes — no more layout jumps from headings appearing mid-token.

Parsers — Extract Structured Data

Pure functions you can use anywhere — in hooks, utilities, middleware:

import { extractJSON, extractToolCalls, extractReasoning } from 'react-native-ai-kit';

// JSON from fenced code blocks or raw text
extractJSON('Result: ```

json\n{"score": 0.95}\n

```')
// => { score: 0.95 }

// Function calling data
extractToolCalls({ tool_calls: [{ type: 'function', function: { name: 'search', arguments: '{"q":"test"}' } }] })
// => [{ type: 'function', name: 'search', input: { q: 'test' } }]

// Chain-of-thought (DeepSeek-style)
extractReasoning('<think source="internal">Analyzing...</think >The answer is 42.')
// => { reasoning: 'Analyzing...', content: 'The answer is 42.' }

Any Backend, Zero Lock-In

The default config works with OpenAI out of the box. For anything else, two functions is all you need:

const { messages, sendMessage } = useChat({
  apiUrl: 'https://my-custom-api.com/chat',
  buildRequestBody: (msgs) => ({
    messages: msgs,
    model: 'my-model',
    stream: true,
  }),
  parseResponse: (chunk) => {
    const parsed = JSON.parse(chunk);
    return parsed.result;
  },
  headers: { Authorization: 'Bearer TOKEN' },
});

Works with Anthropic, Ollama, LangChain, Hugging Face, or literally any endpoint that returns streaming text.

Clean Cancellation

Streams are automatically aborted on unmount. Manual cancellation is one call:

<Button onPress={stop} title="Stop generating" />

No dangling connections. No memory leaks.

Why Not Just Use...

	react-native-ai-kit	openai-sdk	vercel/ai	react-native-sse
React Native SSE	Yes	No (Node.js only)	Limited	Yes
Chat hooks	Yes	No	Yes	No
UI components	Yes	No	No	No
Response parsers	Yes	No	Partial	No
Any LLM backend	Yes	OpenAI only	Yes	Yes
Token tracking	Yes	Yes	Partial	No

This isn't a competitor to Vercel AI SDK — it's the React Native piece that's missing from that ecosystem.

Installation

npm install react-native-ai-kit

Requires React Native >= 0.71 and React >= 18. Works with Expo and bare React Native.

What's Next

I'm actively developing this. Coming soon:

Image/vision support for multimodal models
Conversation persistence helpers
More UI component variants
Anthropic and Ollama preset configs

If you're building AI features in React Native, I'd love your feedback. Check out the repo — stars, issues, and PRs are all welcome.

Links:

If this saved you a few hours of SSE debugging, consider dropping a star — it helps others find it too.

Creating an Animated FAB with Button Flow in React Native

Aleksei Kharitonov — Wed, 18 Feb 2026 13:14:47 +0000

Recently, while working on a Food Tracker app, I needed a way for users to quickly log their meals. I wanted something more engaging than a standard modal or dropdown — a floating action button that expands into a horizontal list of meal types with smooth animations.

In this article, I'll walk you through how I built this animated FAB component using React Native Reanimated.

What We're Building

A floating action button positioned at the bottom-right of the screen that:

Shows a "Log" label with a plus icon
When pressed, the text fades out and the button shrinks to a circle
The icon rotates 45° — the plus becomes an "X" close symbol
A horizontal list of meal types slides in from above
Selecting an option closes the menu and triggers the action

Prerequisites

React Native (0.70+)
react-native-reanimated (v3+)
react-native-svg (for the icon)

Basic Component Structure

Let's start with the basic structure of our component:

import React, { useCallback, useMemo } from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

const BUTTON_HEIGHT = 48;
const LIST_BOTTOM_OFFSET = BUTTON_HEIGHT;
const ANIMATION_DURATION = 300;

const MEALS = [
  { type: 'breakfast', label: 'Breakfast' },
  { type: 'lunch', label: 'Lunch' },
  { type: 'dinner', label: 'Dinner' },
  { type: 'snack', label: 'Snack' },
];

type TProps = {
  onPress: (type: string) => void;
};

export const LogButton: React.FC<TProps> = ({ onPress }) => {
  const isOpen = useSharedValue(false);

  const toggleMenu = useCallback(() => {
    isOpen.value = !isOpen.value;
  }, [isOpen]);

  return (
    <View style={styles.container}>
      {/* List of options */}
      <Animated.View style={styles.listContainer}>
        <ScrollView horizontal>
          {/* Meal type items */}
        </ScrollView>
      </Animated.View>

      {/* Main FAB button */}
      <Pressable style={styles.mainButton} onPress={toggleMenu}>
        {/* Icon and text */}
      </Pressable>
    </View>
  );
});

Styling

Here's the stylesheet for our component. Nothing fancy — just positioning and some shadows for depth:

import { StyleSheet } from 'react-native';

const BUTTON_HEIGHT = 48;
const ITEM_HEIGHT = 40;

export const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 16,
    bottom: 16,
    alignItems: 'flex-end',
    width: '100%',
  },
  listContainer: {
    position: 'absolute',
    bottom: 0,
    right: -16,
    height: 50,
    alignItems: 'flex-end',
  },
  scrollContent: {
    paddingHorizontal: 16,
    gap: 4,
  },
  mealItem: {
    height: ITEM_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: 'white',
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 3,
    borderRadius: 16,
  },
  mainButton: {
    height: BUTTON_HEIGHT,
    borderRadius: BUTTON_HEIGHT / 2,
    backgroundColor: '#FF3B30',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
    zIndex: 100,
    overflow: 'hidden',
  },
  label: {
    fontSize: 19,
    fontWeight: '600',
    lineHeight: 24,
    letterSpacing: -0.38,
    color: 'white',
  },
});

The Icon Component

I use a simple SVG plus icon that rotates to become an "X" when the menu opens:

import React, { memo } from 'react';
import { Path, Svg, SvgProps } from 'react-native-svg';

interface IconProps extends SvgProps {
  size?: number;
  color?: string;
}

const TrackIconComponent: React.FC<IconProps> = ({ color = 'white', size = 20, ...rest }) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" {...rest}>
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.5 17.5C8.5 18.3284 9.17157 19 10 19C10.8284 19 11.5 18.3284 11.5 17.5V11.5H17.5C18.3284 11.5 19 10.8284 19 10C19 9.17157 18.3284 8.5 17.5 8.5H11.5V2.5C11.5 1.67157 10.8284 1 10 1C9.17157 1 8.5 1.67157 8.5 2.5V8.5H2.5C1.67157 8.5 1 9.17157 1 10C1 10.8284 1.67157 11.5 2.5 11.5H8.5V17.5Z"
        fill={color}
      />
    </Svg>
  );
};

export const TrackIcon = memo(TrackIconComponent);

The key insight: a plus sign rotated 45° becomes an X. This gives users a visual cue that the button now closes the menu.

The Magic: Reanimated Animations

Now comes the interesting part. We need four different animated styles working together:

1. FAB Width Animation

When opened, the button shrinks from a pill shape (102px) to a circle (48px):

const fabStyle = useAnimatedStyle(() => {
  return {
    width: withTiming(isOpen.value ? BUTTON_HEIGHT : 102, {
      duration: ANIMATION_DURATION,
      easing: Easing.out(Easing.ease),
    }),
  };
}, [isOpen]);

I use Easing.out(Easing.ease) for a natural deceleration at the end of the animation.

2. Text Fade Out

The "Log" text smoothly disappears with three animated properties:

const logTextStyle = useAnimatedStyle(() => {
  return {
    opacity: withTiming(isOpen.value ? 0 : 1, { duration: 200 }),
    width: withTiming(isOpen.value ? 0 : 35, { duration: 200 }),
    marginLeft: withTiming(isOpen.value ? 0 : 8, { duration: 200 }),
    overflow: 'hidden',
  };
}, [isOpen]);

Animating opacity, width, and marginLeft simultaneously creates a smooth collapse effect. The overflow: 'hidden' ensures the text doesn't spill out during the animation.

3. Icon Rotation

The icon rotates 45° to transform the plus into an X:

const iconStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {
        rotate: withTiming(isOpen.value ? '45deg' : '0deg', {
          duration: 300,
        }),
      },
    ],
  };
}, [isOpen]);

4. List Slide-In

The horizontal list slides up, scales up, and fades in:

const listStyle = useAnimatedStyle(() => {
  return {
    transform: [
      {
        translateY: withTiming(isOpen.value ? -LIST_BOTTOM_OFFSET : 0, {
          duration: ANIMATION_DURATION,
          easing: Easing.out(Easing.ease),
        }),
      },
      { scale: withTiming(isOpen.value ? 1 : 0.5, { duration: 200 }) },
    ],
    opacity: withTiming(isOpen.value ? 1 : 0, { duration: 200 }),
  };
}, [isOpen]);

Combining translateY, scale, and opacity creates a dynamic "pop" entrance. The scale starts at 0.5 and grows to 1, making the list appear to emerge from the button.

Putting It All Together

Here's the complete component:

import React, { useCallback, useEffect, useMemo } from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';

import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

import { TrackIcon } from './Icon';
import { styles } from './styles';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const BUTTON_HEIGHT = 48;
const LIST_BOTTOM_OFFSET = BUTTON_HEIGHT;
const ANIMATION_DURATION = 300;

const MEALS = [
  { type: 'breakfast', label: 'Breakfast' },
  { type: 'lunch', label: 'Lunch' },
  { type: 'dinner', label: 'Dinner' },
  { type: 'snack', label: 'Snack' },
];

type TProps = {
  onPress: (type: string) => void;
};

export const LogButton: React.FC<TProps> = ({ onPress }) => {
  const isOpen = useSharedValue(false);

  const toggleMenu = useCallback(() => {
    isOpen.value = !isOpen.value;
  }, [isOpen]);

  const renderMealTypes = useMemo(
    () =>
      MEALS.map(meal => {
        const handleMealPress = () => {
          onPress(meal.type);
          isOpen.value = false;
        };
        return (
          <Pressable key={meal.type} style={styles.mealItem} onPress={handleMealPress}>
            <Text>{meal.label}</Text>
          </Pressable>
        );
      }),
    [onPress, isOpen]
  );

  const listStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withTiming(isOpen.value ? -LIST_BOTTOM_OFFSET : 0, {
            duration: ANIMATION_DURATION,
            easing: Easing.out(Easing.ease),
          }),
        },
        { scale: withTiming(isOpen.value ? 1 : 0.5, { duration: 200 }) },
      ],
      opacity: withTiming(isOpen.value ? 1 : 0, { duration: 200 }),
    };
  }, [isOpen]);

  const iconStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotate: withTiming(isOpen.value ? '45deg' : '0deg', {
            duration: 300,
          }),
        },
      ],
    };
  }, [isOpen]);

  const logTextStyle = useAnimatedStyle(() => {
    return {
      opacity: withTiming(isOpen.value ? 0 : 1, { duration: 200 }),
      width: withTiming(isOpen.value ? 0 : 35, { duration: 200 }),
      marginLeft: withTiming(isOpen.value ? 0 : 8, { duration: 200 }),
      overflow: 'hidden',
    };
  }, [isOpen]);

  const fabStyle = useAnimatedStyle(() => {
    return {
      width: withTiming(isOpen.value ? BUTTON_HEIGHT : 102, {
        duration: ANIMATION_DURATION,
        easing: Easing.out(Easing.ease),
      }),
    };
  }, [isOpen]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      isOpen.value = false;
    };
  }, []);

  return (
    <View style={styles.container} pointerEvents="box-none">
      <Animated.View style={[styles.listContainer, listStyle]}>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.scrollContent}
        >
          {renderMealTypes}
        </ScrollView>
      </Animated.View>

      <AnimatedPressable style={[styles.mainButton, fabStyle]} onPress={toggleMenu}>
        <Animated.View style={iconStyle}>
          <TrackIcon size={18} color="white" />
        </Animated.View>
        <Animated.View style={logTextStyle}>
          <Text style={styles.label} numberOfLines={1}>
            Log
          </Text>
        </Animated.View>
      </AnimatedPressable>
    </View>
  );
};

Key Implementation Details

`pointerEvents="box-none"`

This is crucial. Without it, the container would block all touch events on the content behind it. box-none allows touches to pass through the container while still capturing events on its children (the button and menu items).

Cleanup in useEffect

When the component unmounts while the menu is open, we reset the isOpen shared value. This prevents potential issues if the component gets remounted:

useEffect(() => {
  return () => {
    isOpen.value = false;
  };
}, []);

`AnimatedPressable`

We create an animated version of Pressable to animate the button width:

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

This is a common Reanimated pattern when you need to animate props on a native component.

Potential Improvements

Here are some ideas to take this component further:

1. Staggered Animation for Menu Items

Make each meal type appear with a slight delay for a more polished look:

const MealItem = ({ meal, index, isOpen, onPress }) => {
  const itemStyle = useAnimatedStyle(() => ({
    opacity: withTiming(isOpen.value ? 1 : 0, { duration: 200 }),
    transform: [
      {
        translateY: withTiming(isOpen.value ? 0 : 10, {
          duration: 200,
          delay: index * 50, // Stagger effect
        }),
      },
    ],
  }));

  return (
    <Animated.View style={itemStyle}>
      <Pressable style={styles.mealItem} onPress={onPress}>
        <Text>{meal.label}</Text>
      </Pressable>
    </Animated.View>
  );
};

2. Haptic Feedback

Add tactile feedback when the menu opens:

import * as Haptics from 'expo-haptics';

const toggleMenu = useCallback(() => {
  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  isOpen.value = !isOpen.value;
}, [isOpen]);

3. Backdrop Overlay

Add a semi-transparent backdrop that dismisses the menu when tapped:

// Add to styles:
backdrop: {
  ...StyleSheet.absoluteFillObject,
  backgroundColor: 'black',
},

// In component:
const backdropStyle = useAnimatedStyle(() => ({
  opacity: withTiming(isOpen.value ? 0.3 : 0),
}));

// In render (before the container):
{isOpen.value && (
  <Animated.View style={[styles.backdrop, backdropStyle]}>
    <Pressable style={StyleSheet.absoluteFill} onPress={() => isOpen.value = false} />
  </Animated.View>
)}

4. Accessibility

Don't forget accessibility! Add proper labels:

<Pressable
  accessibilityLabel={isOpen.value ? 'Close menu' : 'Log meal'}
  accessibilityRole="button"
  accessibilityState={{ expanded: isOpen.value }}
>

5. Close on Outside Tap

Use a Pressable wrapper to detect taps outside the menu:

<Pressable style={StyleSheet.absoluteFill} onPress={() => isOpen.value = false}>
  <View style={styles.container} pointerEvents="box-none">
    {/* ... rest of component */}
  </View>
</Pressable>

Conclusion

This animated FAB demonstrates how combining multiple Reanimated animations can create a smooth, delightful user experience. The key takeaways:

Use useSharedValue for state that drives animations — it's more performant than React state
Create separate useAnimatedStyle hooks for each animated element — keeps code organized
Use appropriate easing functions — Easing.out(Easing.ease) gives a natural deceleration
Keep animations short — 200-300ms feels responsive without being jarring
Combine transforms — mixing translateY, scale, and opacity creates richer effects

*Have questions or suggestions? Drop a comment below!

How We Taught Our App to Find Medical Lab Results in Gmail

Aleksei Kharitonov — Sat, 14 Feb 2026 21:36:37 +0000

About a year ago, I received a task that seemed simple at first glance: implement a feature to search for PDF files containing medical lab results in Gmail.

The idea was straightforward - the user authorizes access to their email through our app, we scan the mailbox for PDFs with lab results and medical data, then display all found documents to the user. After that, the user decides which ones they want to share with us.

The Challenge

Sounds simple enough, right? But there's a big catch - Google doesn't just give you access to a user's mailbox. Working with Gmail API requires going through a verification process and getting approval from the Google team.

I want to express my gratitude to the Google team for their support and for approving our request. But the hardest part wasn't the approval process itself - it was figuring out how to even approach it. The documentation didn't provide clear answers.

Finding the Solution

An article from another developer who had faced a similar challenge helped me out. It turned out there's one key requirement for getting approved: all operations must be performed strictly on the client side.

Since we have a mobile app, all Gmail operations must happen directly on the user's device. Sending tokens, email IDs, or attachment IDs to the backend is strictly prohibited. Everything stays on the client side.

The Result

The dialogue with the Google team lasted 6 months. And finally, we got the green light. The feature was shipped and warmly received by our users.

The moral of the story: sometimes the hardest part of a task isn't the technical solution itself, but figuring out how to get that solution approved by the platform.

Vibe-coding: Not for Those Who Can't Code

Aleksei Kharitonov — Thu, 12 Feb 2026 16:55:21 +0000

Not long ago, I tried Claude Code in my workflow. Before that, I'd used GPT, Gemini, and Claude itself. I also gave Cursor a shot, but it didn't really click. I didn't even like the IDE that much - plain VS Code is just better. More customization options.

So what is Vibe-coding?

Vibe-coding is a software development method where a person describes the desired functionality in natural language, and generative AI (like Claude, ChatGPT, or Replit AI) creates, modifies, and debugs the code.

I often hear the idea that vibe-coding is a process where the developer doesn't understand code at all, and AI does all the work for them.

This is a misconception. In reality, it's the opposite: the better you understand code, architecture, and development principles - the more effective vibe-coding becomes.

Why is that?

Imagine you have a talented junior developer writing code for you. They can quickly sketch out a function, but without your guidance:

they'll choose the wrong pattern
they'll miss edge cases
they'll write code that's hard to maintain
they won't think about security

It's the same with AI. It's a powerful tool, but without an experienced developer setting the direction, reviewing the results, and understanding what's happening - the outcome will be mediocre at best.

What does vibe-coding give to an experienced developer?

Speed. Routine tasks - writing boilerplate, tests, documentation - get exponentially faster. What used to take an hour now takes 10 minutes.

Focus on what matters. Less time spent on mechanical coding, more time on architecture, business logic, and team communication.

Exploration. You can quickly test a hypothesis, sketch a prototype, try different approaches - all without significant time investment.

How I use it

After several weeks of working with Claude Code, I realized the main thing: it's not a replacement for knowledge, it's an amplifier. I still understand what the code does. I can still write everything myself. But now I choose: what to write by hand and what to delegate.

And this changes the development process itself. Instead of "how do I write this?" I more often think "what exactly needs to be done?" The mechanics are left to the tool.

Conclusion

Vibe-coding isn't for those who can't code. It's for those who can, but want to spend less time on routine and more on solving real problems.

DEV Community: Aleksei Kharitonov

I Built an AI Chat in React Native in 30 Lines — Here's the Library That Made It Possible

The Problem

The Solution

30 Lines. That's It.

What's Inside

useChat — The All-in-One Hook

useAIStream — Low-Level Control

UI Components

Parsers — Extract Structured Data

Any Backend, Zero Lock-In

Clean Cancellation

Why Not Just Use...

Installation

What's Next

Creating an Animated FAB with Button Flow in React Native

What We're Building

Prerequisites

Basic Component Structure

Styling

The Icon Component

The Magic: Reanimated Animations

1. FAB Width Animation

2. Text Fade Out

3. Icon Rotation

4. List Slide-In

Putting It All Together

Key Implementation Details

pointerEvents="box-none"

Cleanup in useEffect

AnimatedPressable

Potential Improvements

1. Staggered Animation for Menu Items

2. Haptic Feedback

3. Backdrop Overlay

4. Accessibility

5. Close on Outside Tap

Conclusion

How We Taught Our App to Find Medical Lab Results in Gmail

The Challenge

Finding the Solution

The Result

Vibe-coding: Not for Those Who Can't Code

Why is that?

What does vibe-coding give to an experienced developer?

How I use it

Conclusion

`useChat` — The All-in-One Hook

`useAIStream` — Low-Level Control

`pointerEvents="box-none"`

`AnimatedPressable`